Add selected color to menus

oasisprotocol · Jul 31, 2024 · 06835b8 · 06835b8
1 parent b637f16
commit 06835b8
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 27 deletions.
diff --git a/.changelog/2024.bugfix.md b/.changelog/2024.bugfix.md
@@ -0,0 +1 @@
+Change menu colors
diff --git a/src/app/components/LanguageSelect/index.tsx b/src/app/components/LanguageSelect/index.tsx
@@ -5,6 +5,7 @@ import { Text } from 'grommet/es6/components/Text'
 import { Language } from 'styles/theme/icons/language/Language'
 import { SelectWithIcon } from '../SelectWithIcon'
 import { languageLabels, LanguageKey } from '../../../locales/i18n'
+import { ButtonExtendedProps } from 'grommet/es6/components/Button'
 
 const languageOptions: { value: LanguageKey; label: string }[] = languageLabels.map(lang => ({
   value: lang[0],
@@ -38,10 +39,11 @@ export const LanguageMenu = () => {
     return null
   }
 
-  const languageOptions = languageLabels.map(lang => ({
-    value: lang[0],
-    label: lang[1],
-    onClick: () => i18n.changeLanguage(lang[0]),
+  const languageOptions: ButtonExtendedProps[] = languageLabels.map(([key, label]) => ({
+    value: key,
+    label: label,
+    onClick: () => i18n.changeLanguage(key),
+    primary: key === i18n.resolvedLanguage,
   }))
   const selectedLabel = languageOptions.find(lang => lang.value === i18n.resolvedLanguage)?.label
 

diff --git a/src/app/components/Sidebar/index.tsx b/src/app/components/Sidebar/index.tsx
@@ -214,6 +214,7 @@ const SidebarFooter = (props: SidebarFooterProps) => {
             items={languageLabels.map(([key, label]) => ({
               label: label,
               onClick: () => setLanguage(key),
+              primary: key === i18n.resolvedLanguage,
             }))}
             a11yTitle="Language"
           >

diff --git a/src/app/components/Toolbar/Features/NetworkSelector/index.tsx b/src/app/components/Toolbar/Features/NetworkSelector/index.tsx
@@ -34,30 +34,12 @@ export const NetworkSelector = memo((props: Props) => {
   }
 
   const network = networkLabels[selectedNetworkType]
-  const menuItems = [
-    {
-      label: networkLabels['mainnet'],
-      onClick: () => {
-        switchNetwork('mainnet')
-      },
-    },
-    {
-      label: networkLabels['testnet'],
-      onClick: () => {
-        switchNetwork('testnet')
-      },
-    },
+  const networks = [
+    'mainnet' as const,
+    'testnet' as const,
+    ...(process.env.REACT_APP_LOCALNET ? ['local' as const] : []),
   ]
 
-  if (process.env.REACT_APP_LOCALNET) {
-    menuItems.push({
-      label: networkLabels['local'],
-      onClick: () => {
-        switchNetwork('local')
-      },
-    })
-  }
-
   return (
     <Menu
       size="small"
@@ -66,7 +48,11 @@ export const NetworkSelector = memo((props: Props) => {
         align: { top: 'bottom', left: 'left' },
         elevation: 'xlarge',
       }}
-      items={menuItems}
+      items={networks.map(value => ({
+        label: networkLabels[value],
+        onClick: () => switchNetwork(value),
+        primary: value === selectedNetworkType,
+      }))}
       fill
       a11yTitle={t('toolbar.networks.selector', 'Select network')}
     >