update dark themes & set back settings

fluentlabs-xyz · Nov 8, 2024 · 6854499 · 6854499
1 parent 1244a0d
commit 6854499
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 11 deletions.
diff --git a/theme/foundations/colors.ts b/theme/foundations/colors.ts
@@ -9,6 +9,7 @@ const colors = {
     '80': '#7C63F2',
     '60': '#A392F5',
     '40': '#C9BFF9',
+    '30': '#DBD3FB',
     '20': '#ECE9FD',
   },
   green: {
@@ -29,7 +30,6 @@ const colors = {
     '800': '#372c7a',
     '900': '#2a215d',
   },
-
   red: {
     '100': '#d19f9f',
     '500': '#b63b3b',

diff --git a/theme/foundations/semanticTokens.ts b/theme/foundations/semanticTokens.ts
@@ -14,10 +14,11 @@ const semanticTokens = {
     },
     link: {
       'default': 'purple.90',
-      _dark: 'blue.300',
+      _dark: 'purple.30',
     },
     link_hovered: {
-      'default': 'purple.80',
+      'default': 'purple.300',
+      _dark: 'purple.60',
     },
     icon_link_external: {
       'default': 'gray.300',

diff --git a/ui/snippets/navigation/useColors.ts b/ui/snippets/navigation/useColors.ts
@@ -3,8 +3,8 @@ import { useColorModeValue } from '@chakra-ui/react';
 export default function useColors() {
   return {
     text: {
-      'default': useColorModeValue('gray.600', 'gray.400'),
-      active: useColorModeValue('purple.100', 'gray.50'),
+      'default': useColorModeValue('gray.600', 'gray.300'),
+      active: useColorModeValue('purple.100', 'purple.40'),
       hover: 'link_hovered',
     },
     bg: {
@@ -13,7 +13,7 @@ export default function useColors() {
     },
     border: {
       'default': 'divider',
-      active: useColorModeValue('blue.50', 'gray.800'),
+      active: useColorModeValue('blue.50', 'purple.40'),
     },
   };
 }
diff --git a/ui/snippets/navigation/vertical/NavigationDesktop.tsx b/ui/snippets/navigation/vertical/NavigationDesktop.tsx
@@ -37,7 +37,6 @@ const NavigationDesktop = () => {
         alignItems="center"
         flexDirection="row"
         w="100%"
-        pl={{ lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 }}
         pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
         h={ 10 }
         transitionProperty="padding"

diff --git a/ui/snippets/topBar/TopBar.tsx b/ui/snippets/topBar/TopBar.tsx
@@ -6,6 +6,7 @@ import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
 
 import DeFiDropdown from './DeFiDropdown';
 import NetworkMenu from './NetworkMenu';
+import Settings from './settings/Settings';
 import TopBarStats from './TopBarStats';
 
 const TopBar = () => {
@@ -15,12 +16,14 @@ const TopBar = () => {
     <Box bgColor={ bgColor }>
       <Flex
         py={ 2 }
-        px={{ base: 3, lg: 6 }}
+        px={ 12 }
         maxW={ `${ CONTENT_MAX_WIDTH }px` }
         m="0 auto"
+        mb={ 2 }
         justifyContent="space-between"
         alignItems="center"
       >
+        <TopBarStats/>
         <Flex alignItems="center" px={ 12 }>
           { config.features.deFiDropdown.isEnabled && (
             <>
@@ -35,7 +38,7 @@ const TopBar = () => {
             </Box>
           ) }
         </Flex>
-        <TopBarStats/>
+        <Settings/>
       </Flex>
     </Box>
   );

diff --git a/ui/snippets/topBar/settings/Settings.tsx b/ui/snippets/topBar/settings/Settings.tsx
@@ -16,7 +16,7 @@ const Settings = () => {
       <PopoverTrigger>
         <IconButton
           variant="simple"
-          colorScheme="blue"
+          colorScheme="white"
           aria-label="User settings"
           icon={ <IconSvg name="gear_slim" boxSize={ 5 }/> }
           p="1px"

diff --git a/ui/txs/TxsTableItem.tsx b/ui/txs/TxsTableItem.tsx
@@ -51,7 +51,6 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
           <TxEntity
             hash={ tx.hash }
             isLoading={ isLoading }
-            fontWeight={ 700 }
             noIcon
             maxW="100%"
             truncation="constant_long"