From e4f53f0e30354e52ab6718418d4f59c62098b757 Mon Sep 17 00:00:00 2001
From: Nicholas Chew <52598569+niccheww@users.noreply.github.com>
Date: Wed, 14 Oct 2020 18:42:19 +0800
Subject: [PATCH] customisation design for navbar (#2873)

Co-authored-by: nicholas.chew <nicholas.chew@grabtaxi.com>
---
 packages/core/src/layout/Sidebar/Items.tsx | 4 ++--
 packages/theme/src/themes.ts               | 4 ++++
 packages/theme/src/types.ts                | 2 ++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/layout/Sidebar/Items.tsx b/packages/core/src/layout/Sidebar/Items.tsx
index 5a476e2209..2eca89f873 100644
--- a/packages/core/src/layout/Sidebar/Items.tsx
+++ b/packages/core/src/layout/Sidebar/Items.tsx
@@ -40,7 +40,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => {
 
   return {
     root: {
-      color: '#b5b5b5',
+      color: theme.palette.navigation.color,
       display: 'flex',
       flexFlow: 'row nowrap',
       alignItems: 'center',
@@ -96,7 +96,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => {
     selected: {
       '&$root': {
         borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
-        color: '#ffffff',
+        color: theme.palette.navigation.selectedColor,
       },
       '&$closed': {
         width: drawerWidthClosed - selectedIndicatorWidth,
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index 0ec3304ac5..82076aec3c 100644
--- a/packages/theme/src/themes.ts
+++ b/packages/theme/src/themes.ts
@@ -64,6 +64,8 @@ export const lightTheme = createTheme({
     navigation: {
       background: '#171717',
       indicator: '#9BF0E1',
+      color: '#b5b5b5',
+      selectedColor: '#FFF',
     },
     pinSidebarButton: {
       icon: '#181818',
@@ -122,6 +124,8 @@ export const darkTheme = createTheme({
     navigation: {
       background: '#424242',
       indicator: '#9BF0E1',
+      color: '#b5b5b5',
+      selectedColor: '#FFF',
     },
     pinSidebarButton: {
       icon: '#404040',
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
index 1d244f8cd4..8eeeddd17d 100644
--- a/packages/theme/src/types.ts
+++ b/packages/theme/src/types.ts
@@ -46,6 +46,8 @@ type PaletteAdditions = {
   navigation: {
     background: string;
     indicator: string;
+    color: string;
+    selectedColor: string;
   };
   tabbar: {
     indicator: string;