updated some extra items

shapeshift · Aug 11, 2023 · dc681d4 · dc681d4
1 parent 2f0b506
commit dc681d4
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/src/components/Divider/Divider.theme.ts b/src/components/Divider/Divider.theme.ts
@@ -1,7 +1,7 @@
 export const DividerStyle = {
   // Styles for the base style
   baseStyle: () => ({
-    borderColor: 'border.subtlest',
+    borderColor: 'border.base',
   }),
   // Styles for the size variations
   sizes: {},

diff --git a/src/components/Layout/Header/NavBar/MainNavLink.tsx b/src/components/Layout/Header/NavBar/MainNavLink.tsx
@@ -1,5 +1,5 @@
 import type { ButtonProps } from '@chakra-ui/react'
-import { Box, Button, Tag, Tooltip, useColorModeValue, useMediaQuery } from '@chakra-ui/react'
+import { Box, Button, Tag, Tooltip, useMediaQuery } from '@chakra-ui/react'
 import { memo, useCallback } from 'react'
 import { useTranslate } from 'react-polyglot'
 import type { NavLinkProps } from 'react-router-dom'
@@ -39,10 +39,10 @@ export const MainNavLink = memo(
           iconSpacing={isLargerThan2xl ? 4 : isCompact ? 0 : 4}
           _active={{
             bg: 'transparent',
-            color: useColorModeValue('black', 'white'),
+            color: 'text.base',
             fontWeight: 'bold',
           }}
-          _hover={{ bg: useColorModeValue('blackAlpha.100', 'whiteAlpha.100') }}
+          _hover={{ bg: 'background.button.secondary.base' }}
           {...rest}
         >
           <Box display={{ base: isCompact ? 'none' : 'flex', '2xl': 'block' }}>{label}</Box>

diff --git a/src/components/Modals/Settings/SettingsListItem.tsx b/src/components/Modals/Settings/SettingsListItem.tsx
@@ -1,5 +1,5 @@
 import type { ButtonProps } from '@chakra-ui/react'
-import { Box, Button, Flex, Icon, Tooltip, useColorModeValue } from '@chakra-ui/react'
+import { Box, Button, Flex, Icon, Tooltip } from '@chakra-ui/react'
 import { FaInfoCircle } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
 import { Text } from 'components/Text/Text'
@@ -21,20 +21,19 @@ export const SettingsListItem = ({
   ...restProps
 }: SettingListItemProps) => {
   const translate = useTranslate()
-  const itemHover = useColorModeValue('gray.100', 'gray.750')
   return (
     <Button
       variant='none'
       width='full'
       justifyContent='space-between'
       alignItems='center'
       onClick={onClick}
-      _hover={onClick ? { bg: itemHover } : {}}
+      _hover={onClick ? { bg: 'background.button.secondary.base' } : {}}
       {...restProps}
     >
       <Flex alignItems='center'>
         {icon}
-        <Text ml={2} translation={label} color={useColorModeValue('black.900', 'white.900')} />
+        <Text ml={2} translation={label} />
         {tooltipText && (
           <Tooltip label={translate(tooltipText)}>
             <Box ml={1}>

diff --git a/src/theme/semanticTokens.ts b/src/theme/semanticTokens.ts
@@ -126,6 +126,10 @@ export const semanticTokens = {
         default: 'gray.400',
         _dark: 'darkNeutralAlpha.500',
       },
+      info: {
+        default: 'blue.500',
+        _dark: 'blue.200',
+      },
       success: {
         default: 'green.500',
         _dark: 'green.200',
@@ -134,6 +138,10 @@ export const semanticTokens = {
         default: 'red.500',
         _dark: 'red.300',
       },
+      warning: {
+        default: 'orange.500',
+        _dark: 'orange.200',
+      },
     },
     blanket: {
       default: '#10121499',