fix: nav tab color

a51finance · Oct 19, 2023 · c86ce1f · c86ce1f
1 parent 35fe060
commit c86ce1f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
 
-    <title>Dex51 Finance</title>
+    <title>DEX51 Finance</title>
 
     <!--
       %PUBLIC_URL% will be replaced with the URL of the `public` folder during build.

diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
@@ -24,12 +24,12 @@ const Nav = styled.nav`
   height: ${({ theme }) => theme.navHeight}px;
   z-index: 2;
 `
-const NavAnaltics = styled.a`
-  color: rgba(255, 255, 255, 0.65);
+const NavAnalytics = styled.a`
+  color: ${({ theme }) => theme.neutral2};
   padding: 6px 10px;
   text-decoration: none;
   &:hover {
-    background-color: rgba(255, 255, 255, 0.05);
+    background-color: ${({ theme }) => theme.lightGrayOverlay};
     border-radius: 10px;
   }
 `
@@ -95,9 +95,9 @@ export const PageTabs = () => {
       <MenuItem href={`/tokens/${chainName.toLowerCase()}`} isActive={pathname.startsWith('/tokens')}>
         <Trans>Tokens</Trans>
       </MenuItem>
-      <NavAnaltics href="https://info.uniswap.org/#/" target="_blank" rel="noreferrer">
+      <NavAnalytics href="https://info.uniswap.org/#/" target="_blank" rel="noreferrer">
         <Trans>Analytics</Trans>
-      </NavAnaltics>
+      </NavAnalytics>
       {/* <Box marginY="4">
         <MenuDropdown />
       </Box> */}

diff --git a/src/theme/colors.ts b/src/theme/colors.ts
@@ -163,6 +163,8 @@ export const darkTheme = {
   neutral2: colors.neutral2_dark,
   neutral3: colors.neutral3_dark,
 
+  lightGrayOverlay: '#99A1BD14',
+
   surface1: colors.surface1_dark,
   surface2: colors.surface2_dark,
   surface3: colors.surface3_dark,
@@ -185,6 +187,8 @@ export const lightTheme: Theme = {
   neutral2: colors.neutral2_light,
   neutral3: colors.neutral3_light,
 
+  lightGrayOverlay: '#99A1BD14',
+
   surface1: colors.surface1_light,
   surface2: colors.surface2_light,
   surface3: colors.surface3_light,