fixed issues

vocdoni · Nov 28, 2024 · 4d38043 · 4d38043
1 parent 7de2550
commit 4d38043
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@chakra-ui/react'
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Box } from '@chakra-ui/react'
 import Benefits from './Benefits'
 import Clients from './Clients'
 import ContactUs from './ContactUs'
@@ -12,6 +12,11 @@ import Support from './Support'
 const Home = () => (
   <>
     <Box position='relative'>
+      <Alert status='error'>
+        <AlertIcon />
+        <AlertTitle>Your browser is outdated!</AlertTitle>
+        <AlertDescription>Your Chakra experience may be degraded.</AlertDescription>
+      </Alert>
       <Box position='relative' zIndex={10}>
         <CreateProcess />
         <Clients />

diff --git a/src/theme/colors.ts b/src/theme/colors.ts
@@ -8,7 +8,8 @@ export const colorsBase = {
   },
   gradient: 'linear-gradient(to right, #546E39, #2E441A)',
   gray: {
-    light: 'rgba(255, 255, 255, 0.24)',
+    light2: 'rgba(255, 255, 255, 0.24)',
+    light: '#CBD5E0',
     normal: '#718096',
   },
   primary: '#546E39',
@@ -161,12 +162,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,

diff --git a/src/theme/components/alert.ts b/src/theme/components/alert.ts
@@ -6,17 +6,12 @@ const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpe
 
 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 },