feat: add new label to swaps button [SWAP-86] (#3763)

* feat: add new label to swaps button
safe-global · May 29, 2024 · 3da9a4e · 3da9a4e
1 parent 050e58b
commit 3da9a4e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/src/components/sidebar/SidebarNavigation/config.tsx b/src/components/sidebar/SidebarNavigation/config.tsx
@@ -9,11 +9,13 @@ import AppsIcon from '@/public/images/apps/apps-icon.svg'
 import SettingsIcon from '@/public/images/sidebar/settings.svg'
 import SwapIcon from '@/public/images/common/swap.svg'
 import { SvgIcon } from '@mui/material'
+import Chip from '@mui/material/Chip'
 
 export type NavItem = {
   label: string
   icon?: ReactElement
   href: string
+  tag?: ReactElement
 }
 
 export const navItems: NavItem[] = [
@@ -31,6 +33,7 @@ export const navItems: NavItem[] = [
     label: 'Swap',
     icon: <SvgIcon component={SwapIcon} inheritViewBox />,
     href: AppRoutes.swap,
+    tag: <Chip label="New" color="success" sx={{ ml: 1 }} />,
   },
   {
     label: 'Transactions',

diff --git a/src/components/sidebar/SidebarNavigation/index.tsx b/src/components/sidebar/SidebarNavigation/index.tsx
@@ -49,13 +49,6 @@ const Navigation = (): ReactElement => {
     }
   }
 
-  const getCounter = (item: NavItem) => {
-    // Indicate qeueued txs
-    if (item.href === AppRoutes.transactions.history) {
-      return queueSize
-    }
-  }
-
   // Route Transactions to Queue if there are queued txs, otherwise to History
   const getRoute = (href: string) => {
     if (href === AppRoutes.transactions.history && queueSize) {
@@ -75,6 +68,12 @@ const Navigation = (): ReactElement => {
       {enabledNavItems.map((item) => {
         const isSelected = currentSubdirectory === getSubdirectory(item.href)
 
+        let ItemTag = item.tag ? item.tag : null
+
+        if (item.href === AppRoutes.transactions.history) {
+          ItemTag = queueSize ? <SidebarListItemCounter count={queueSize} /> : null
+        }
+
         return (
           <ListItem
             key={item.href}
@@ -91,7 +90,7 @@ const Navigation = (): ReactElement => {
               <SidebarListItemText data-testid="sidebar-list-item" bold>
                 {item.label}
 
-                <SidebarListItemCounter count={getCounter(item)} />
+                {ItemTag}
               </SidebarListItemText>
             </SidebarListItemButton>
           </ListItem>

diff --git a/src/components/theme/darkPalette.ts b/src/components/theme/darkPalette.ts
@@ -12,7 +12,7 @@ const darkPalette = {
   secondary: {
     dark: '#636669',
     main: '#FFFFFF',
-    light: '#12FF80',
+    light: '#B0FFC9',
     background: '#1B2A22',
   },
   border: {

diff --git a/src/components/theme/safeTheme.ts b/src/components/theme/safeTheme.ts
@@ -17,6 +17,7 @@ declare module '@mui/material/styles' {
     backdrop: Palette['primary']
     static: Palette['primary']
   }
+
   export interface PaletteOptions {
     border: PaletteOptions['primary']
     logo: PaletteOptions['primary']
@@ -33,6 +34,7 @@ declare module '@mui/material/styles' {
   export interface PaletteColor {
     background?: string
   }
+
   export interface SimplePaletteColorOptions {
     background?: string
   }
@@ -52,6 +54,7 @@ declare module '@mui/material/Button' {
   export interface ButtonPropsColorOverrides {
     background: true
   }
+
   export interface ButtonPropsVariantOverrides {
     danger: true
   }
@@ -279,6 +282,14 @@ const createSafeTheme = (mode: PaletteMode): Theme => {
           },
         },
       },
+      MuiChip: {
+        styleOverrides: {
+          colorSuccess: ({ theme }) => ({
+            backgroundColor: theme.palette.secondary.light,
+            height: '24px',
+          }),
+        },
+      },
       MuiAlert: {
         styleOverrides: {
           standardError: ({ theme }) => ({