src/components/Sidebar.js

@@ -2,45 +2,51 @@
 // Copyright 2020 DXOS.org
 //
 
-import clsx from 'clsx';
-import React from 'react';
-import { useHistory, useParams } from 'react-router';
+import clsx from "clsx";
+import React from "react";
+import { useHistory, useParams } from "react-router";
 // import { useQuery } from '@apollo/react-hooks';
 
-import { makeStyles } from '@material-ui/core';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import LinkIcon from '@material-ui/icons/ExitToApp';
-import ListItemText from '@material-ui/core/ListItemText';
+import { makeStyles } from "@material-ui/core";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import LinkIcon from "@material-ui/icons/ExitToApp";
+import ListItemText from "@material-ui/core/ListItemText";
 
 // import EXTENSIONS from '../gql/extensions.graphql';
 // import { useQueryStatusReducer } from '../hooks';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
-    display: 'flex',
+    display: "flex",
     flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'space-between'
+    flexDirection: "column",
+    justifyContent: "space-between",
   },
 
   list: {
-    padding: 0
+    padding: 0,
+  },
+
+  listItem: {
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: theme.palette.background.secondary,
   },
 
   icon: {
     minWidth: 40,
-    color: theme.palette.grey[500]
+    color: theme.palette.grey[500],
   },
 
   selected: {
-    color: theme.palette.primary.main
+    color: theme.palette.primary.main,
   },
 
   expand: {
-    flex: 1
-  }
+    flex: 1,
+  },
 }));
 
 const Sidebar = ({ modules: { services, settings } }) => {
@@ -52,38 +58,55 @@ const Sidebar = ({ modules: { services, settings } }) => {
   // const extensions = extensionsData ? JSON.parse(extensionsData.extensions.json) : [];
   const extensions = [];
 
-  const isSelected = path => path === `/${module}`;
+  const isSelected = (path) => path === `/${module}`;
 
   const Modules = ({ modules }) => (
-    <List aria-label='items' className={classes.list}>
+    <List aria-label="items" className={classes.list}>
       {modules.map(({ path, title, icon: Icon }) => (
-        <ListItem button selected={isSelected(path)} key={path} onClick={() => history.push(path)}>
+        <ListItem
+          button
+          selected={isSelected(path)}
+          key={path}
+          onClick={() => history.push(path)}
+          className={classes.listItem}
+        >
           <ListItemIcon classes={{ root: classes.icon }}>
-            <Icon className={clsx(classes.icon, isSelected(path) && classes.selected)} />
+            <Icon
+              className={clsx(
+                classes.icon,
+                isSelected(path) && classes.selected,
+              )}
+            />
           </ListItemIcon>
-          <ListItemText primary={title} />
+          <ListItemText primary={title.toUpperCase()} />
         </ListItem>
       ))}
     </List>
   );
 
   const Extensions = ({ extensions }) => (
-    <List aria-label='items' className={classes.list}>
+    <List aria-label="items" className={classes.list}>
       {extensions.map(({ url, title }) => {
         url = url
-          .replace('%HOST%', window.location.host)
-          .replace('%PORT%', window.location.port)
-          .replace('%PROTOCOL%', window.location.protocol);
+          .replace("%HOST%", window.location.host)
+          .replace("%PORT%", window.location.port)
+          .replace("%PROTOCOL%", window.location.protocol);
         return (
-          <ListItem button key={url} onClick={() => { window.location = url; return true; }}>
+          <ListItem
+            button
+            key={url}
+            onClick={() => {
+              window.location = url;
+              return true;
+            }}
+          >
             <ListItemIcon classes={{ root: classes.icon }}>
               <LinkIcon className={clsx(classes.icon)} />
             </ListItemIcon>
             <ListItemText primary={title} />
           </ListItem>
         );
-      }
-      )}
+      })}
     </List>
   );
 

src/theme.js

@@ -68,6 +68,10 @@ export const createTheme = (theme) =>
               secondary: "#18181A",
               paper: "#18181A",
             },
+            text: {
+              primary: "#FBFBFB",
+              secondary: "#BDBCC3",
+            },
           }
         : {
             primary: teal,