Alerts figma

src/components/Layout/AlertIcon.tsx

@@ -0,0 +1,32 @@
+import { AlertIconProps, chakra, useAlertContext, useAlertStyles } from '@chakra-ui/react'
+import { cx } from '@chakra-ui/utils'
+import { FaRegCheckCircle } from 'react-icons/fa'
+import { RiErrorWarningLine } from 'react-icons/ri'
+
+const icons = {
+  info: <RiErrorWarningLine />,
+  warning: <RiErrorWarningLine />,
+  success: <RiErrorWarningLine />,
+  error: <FaRegCheckCircle />,
+}
+
+export const AlertIcon = (props: AlertIconProps) => {
+  const styles = useAlertStyles()
+  const { status } = useAlertContext()
+  const css = status === 'loading' ? styles.spinner : styles.icon
+
+  const icon = icons[status] || <RiErrorWarningLine />
+
+  return (
+    <chakra.span
+      display='inherit'
+      data-status={status}
+      {...props}
+      className={cx('chakra-alert__icon', props.className)}
+      __css={css}
+      {...props}
+    >
+      {icon}
+    </chakra.span>
+  )
+}

src/theme/colors.ts

@@ -8,9 +8,12 @@ export const colorsBase = {
   },
   gradient: 'linear-gradient(to right, #546E39, #2E441A)',
   gray: {
+    light2: '#ffffff3d',
     light: '#CBD5E0',
     normal: '#718096',
   },
+  green: '#00FF00',
+  orange: '#FFA500',
   primary: '#546E39',
   primary_dark: 'rgba(84, 110, 57, 0.2)',
   white: {
@@ -24,6 +27,19 @@ export const colorsBase = {
 
 export const colors = {
   account_create_text_secondary: colorsBase.gray.normal,
+  alert: {
+    bg: {
+      light: colorsBase.white.pure,
+      dark: colorsBase.blue.dark,
+    },
+    border: colorsBase.gray.light,
+    error: colorsBase.green,
+    info: colorsBase.gray.normal,
+    success: colorsBase.green,
+    warning: colorsBase.orange,
+    box_shadow_light: colorsBase.white.pure,
+    box_shadow_dark: colorsBase.blue.dark,
+  },
   auth: {
     textColorSecondary: colorsBase.gray.normal,
   },
@@ -154,12 +170,12 @@ export const colors = {
     },
     border: {
       dark: colorsBase.white,
-      light: colorsBase.gray.light,
+      light: colorsBase.gray.light2,
     },
     disabled: colorsBase.gray.normal,
     hover: {
       dark: colorsBase.white,
-      light: colorsBase.gray.light,
+      light: colorsBase.gray.light2,
     },
     outline: colorsBase.blue.normal,
     placeholder: colorsBase.gray.normal,

src/theme/components/alert.ts

@@ -0,0 +1,54 @@
+import { alertAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.keys)
+
+const baseStyle = (props: any) => {
+  const { status } = props
+
+  const statusColorMap = {
+    info: 'var(--chakra-colors-alert-info)',
+    success: 'var(--chakra-colors-alert-success)',
+    error: 'var(--chakra-colors-alert-error)',
+    warning: 'var(--chakra-colors-alert-warning)',
+  }
+
+  const color = statusColorMap[status] || statusColorMap['info']
+
+  return {
+    container: {
+      display: 'grid',
+      gridTemplateColumns: { base: '1fr', lg: 'fit-content(50px) 1fr' },
+      border: '1px solid',
+      borderColor: 'alert.border',
+      borderRadius: 'lg',
+      width: 'fit-content',
+      bgColor: 'alert.bg.light',
+      _dark: {
+        bgColor: 'alert.bg.dark',
+      },
+    },
+    title: {
+      gridColumn: { lg: 2 },
+    },
+    description: {
+      gridColumn: { lg: 2 },
+    },
+    icon: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gridColumn: 1,
+      color,
+      boxShadow: `0 0 0px 1px var(--chakra-colors-alert-box_shadow_light), 0 0 0px 3px  ${color}, 0 0 0 4px var(--chakra-colors-alert-box_shadow_light), 0 0 1px 5px ${color}`,
+      borderRadius: 'lg',
+      _dark: {
+        boxShadow: `0 0 0px 1px var(--chakra-colors-alert-box_shadow_dark), 0 0 0px 3px ${color}, 0 0 0 4px var(--chakra-colors-alert-box_shadow_dark), 0 0 1px 5px ${color}`,
+      },
+      w: 4,
+      h: 4,
+    },
+  }
+}
+
+export const Alert = defineMultiStyleConfig({ baseStyle })

src/theme/index.ts

@@ -25,6 +25,7 @@ import { editor } from './editor'
 import { spacing } from './space'
 import { Tag } from './components/tag'
 import { Menu } from './components/menu'
+import { Alert } from './components/alert'
 
 export const theme = extendTheme(vtheme, {
   config: {
@@ -81,6 +82,7 @@ export const theme = extendTheme(vtheme, {
   },
   components: {
     Accordion,
+    Alert,
     Badge,
     Button,
     Card,