applied figma styles, closes #854

src/theme/colors.ts

@@ -8,7 +8,7 @@ export const colorsBase = {
   },
   gradient: 'linear-gradient(to right, #546E39, #2E441A)',
   gray: {
-    light: '#CBD5E0',
+    light: 'rgba(255, 255, 255, 0.24)',
     normal: '#718096',
   },
   primary: '#546E39',
@@ -24,6 +24,13 @@ export const colorsBase = {
 
 export const colors = {
   account_create_text_secondary: colorsBase.gray.normal,
+  alert: {
+    bg: {
+      light: colorsBase.white.pure,
+      dark: colorsBase.blue.grayish,
+    },
+    border: colorsBase.gray.light,
+  },
   auth: {
     textColorSecondary: colorsBase.gray.normal,
   },

src/theme/components/alert.ts

@@ -0,0 +1,32 @@
+import { alertAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+import { InfoIcon, WarningIcon, CheckIcon, CloseIcon } from '@chakra-ui/icons'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.keys)
+
+const baseStyle = definePartsStyle({
+  container: {
+    bgColor: 'alert.bg.light',
+    display: 'grid',
+    gridTemplateColumns: { base: '1fr', lg: 'fit-content(50px) 1fr' },
+    border: '1px solid',
+    borderColor: 'alert.border',
+    borderRadius: 'lg',
+    width: 'fit-content',
+
+    _dark: {
+      bgColor: 'alert.bg.dark',
+    },
+  },
+  title: {
+    gridColumn: { lg: 2 },
+  },
+  description: {
+    gridColumn: { lg: 2 },
+  },
+  icon: {
+    gridColumn: 1,
+  },
+})
+
+export const Alert = defineMultiStyleConfig({ baseStyle })

src/theme/index.ts

@@ -23,6 +23,7 @@ import { Text } from './components/text'
 import { Textarea } from './components/textarea'
 import { editor } from './editor'
 import { spacing } from './space'
+import { Alert } from './components/alert'
 
 export const theme = extendTheme(vtheme, {
   config: {
@@ -79,6 +80,7 @@ export const theme = extendTheme(vtheme, {
   },
   components: {
     Accordion,
+    Alert,
     Badge,
     Button,
     Card,