From 2a19d616bffece9c1164b636c924374a00606650 Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Thu, 24 Dec 2020 16:22:00 -0800
Subject: [PATCH] Update ListItemLink selected style

---
 ui/src/components/ListItemLink.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/ListItemLink.tsx b/ui/src/components/ListItemLink.tsx
index a90c0cf..ab4aad4 100644
--- a/ui/src/components/ListItemLink.tsx
+++ b/ui/src/components/ListItemLink.tsx
@@ -10,18 +10,22 @@ import {
   LinkProps as RouterLinkProps,
 } from "react-router-dom";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   listItem: {
     borderTopRightRadius: "24px",
     borderBottomRightRadius: "24px",
   },
   selected: {
-    backgroundColor: "rgba(0, 0, 0, 0.07)",
+    backgroundColor: `${theme.palette.primary.main}30`,
   },
-  boldText: {
+  selectedText: {
     fontWeight: 600,
+    color: theme.palette.primary.main,
   },
-});
+  selectedIcon: {
+    color: theme.palette.primary.main,
+  },
+}));
 
 interface Props {
   to: string;
@@ -53,11 +57,15 @@ function ListItemLink(props: Props): ReactElement {
         component={renderLink}
         className={clsx(classes.listItem, isMatch && classes.selected)}
       >
-        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+        {icon && (
+          <ListItemIcon className={clsx(isMatch && classes.selectedIcon)}>
+            {icon}
+          </ListItemIcon>
+        )}
         <ListItemText
           primary={primary}
           classes={{
-            primary: isMatch ? classes.boldText : undefined,
+            primary: isMatch ? classes.selectedText : undefined,
           }}
         />
       </ListItem>