style: implement new design for menu (#30)

Author: scorebreaker

.storybook/preview.js

@@ -18,4 +18,5 @@ export const parameters = {
   docs: {
     theme: storybookTheme,
   },
+  layout: 'centered',
 };

src/assets/OpenDEXLogo.png

@@ -0,0 +1,24 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { openDexLogo } from "../../utils/svgIcons";
+
+const useStyles = makeStyles(() => ({
+  logoContainer: {
+    paddingTop: "30px",
+    width: "100%",
+  },
+  logo: {
+    height: "75px",
+    width: "100%",
+  },
+}));
+
+export const OpenDexMainLogo: React.FunctionComponent = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.logoContainer}>
+      <img src={openDexLogo} alt="OpenDEX" className={classes.logo} />
+    </div>
+  );
+};

src/assets/OpenDEXLogo.svg

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Drawer from "@material-ui/core/Drawer";
-import { Grid, Typography } from "@material-ui/core";
+import { Grid } from "@material-ui/core";
 import List from "@material-ui/core/List";
 import AccountBalanceWalletOutlinedIcon from "@material-ui/icons/AccountBalanceWalletOutlined";
 import CachedIcon from "@material-ui/icons/Cached";
@@ -9,7 +9,8 @@ import RemoveRedEyeOutlinedIcon from "@material-ui/icons/RemoveRedEyeOutlined";
 import SettingsIcon from "@material-ui/icons/Settings";
 import SportsEsportsIcon from "@material-ui/icons/SportsEsports";
 import TrendingUpIcon from "@material-ui/icons/TrendingUp";
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
+import { useLocation, useRouteMatch } from "react-router-dom";
 import { Path } from "../../../router/Path";
 import MenuItem, { MenuItemProps } from "./MenuItem";
 import Overview from "../../../dashboard/overview/Overview";
@@ -20,6 +21,7 @@ import Console from "../../../dashboard/console/Console";
 import { isElectron, sendMessageToParent } from "../../utils/appUtil";
 import Button from "../input/buttons/Button";
 import Settings from "../../../settings/Settings";
+import { OpenDexMainLogo } from "../icons/OpenDexMainLogo";
 
 export const menuItems: MenuItemProps[] = [
   {
@@ -53,27 +55,44 @@ export const menuItems: MenuItemProps[] = [
     component: Console,
     icon: SportsEsportsIcon,
   },
+  {
+    path: Path.SETTINGS,
+    text: "Settings",
+    component: <Settings />,
+    icon: SettingsIcon,
+  },
 ];
 
-export const drawerWidth = 200;
+export const drawerWidth = 250;
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    drawerPaper: {
-      width: drawerWidth,
-      justifyContent: "space-between",
-    },
-    menuContainer: {
-      width: "100%",
-    },
-    header: {
-      padding: "16px",
-    },
-    drawerButton: {
-      margin: theme.spacing(2),
-    },
-  })
-);
+const useStyles = makeStyles((theme) => ({
+  drawerPaper: {
+    width: drawerWidth,
+    justifyContent: "space-between",
+    background: "linear-gradient(#101013, #1c2027, #1a1112, #171011)",
+    border: "none",
+  },
+  menuContainer: {
+    width: "100%",
+    paddingLeft: "10px",
+  },
+  drawerButton: {
+    margin: theme.spacing(2),
+  },
+  borderRadiusContainer: {
+    height: "25px",
+  },
+  borderRadiusOfTopContainer: {
+    borderRadius: "0px 0px 25px 0px",
+    boxShadow: "25px 0px 0px #0c0c0c",
+    transition: "box-shadow 0.1s ease",
+  },
+  borderRadiusOfBottomContainer: {
+    borderRadius: "0px 25px 0px 0px",
+    boxShadow: "25px 0px 0px #0c0c0c",
+    transition: "box-shadow 0.1s ease",
+  },
+}));
 
 export interface MenuProps {
   syncInProgress: boolean;
@@ -82,6 +101,22 @@ export interface MenuProps {
 
 export const Menu: React.FunctionComponent<MenuProps> = (props) => {
   const classes = useStyles();
+  const { url } = useRouteMatch();
+  const { pathname } = useLocation();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const handleSetSelectedIndex = () => {
+    const activeItem = menuItems.findIndex(
+      (item) =>
+        pathname === `${url}${item.path}` ||
+        pathname.startsWith(`${url}${item.path}/`)
+    );
+    setSelectedIndex(activeItem);
+  };
+
+  useEffect(() => {
+    handleSetSelectedIndex();
+  });
 
   const disconnect = (): void => {
     sendMessageToParent("disconnect");
@@ -96,17 +131,21 @@ export const Menu: React.FunctionComponent<MenuProps> = (props) => {
       anchor="left"
     >
       <Grid container item>
-        <Typography
-          className={classes.header}
-          variant="overline"
-          component="p"
-          color="textSecondary"
-        >
-          OpenDEX
-        </Typography>
+        <OpenDexMainLogo />
         <List className={classes.menuContainer}>
-          {menuItems.map((item) => (
+          <div
+            className={
+              selectedIndex === 0
+                ? `${classes.borderRadiusOfTopContainer} ${classes.borderRadiusContainer}`
+                : classes.borderRadiusContainer
+            }
+          ></div>
+
+          {menuItems.map((item, i) => (
             <MenuItem
+              isBeforeSelected={i + 1 === selectedIndex && selectedIndex !== -1}
+              isAfterSelected={i - 1 === selectedIndex && selectedIndex !== -1}
+              selected={i === selectedIndex}
               path={item.path}
               text={item.text}
               component={item.component}
@@ -117,17 +156,16 @@ export const Menu: React.FunctionComponent<MenuProps> = (props) => {
               tooltipTextRows={props.menuItemTooltipMsg}
             />
           ))}
+          <div
+            className={
+              selectedIndex === menuItems.length - 1
+                ? `${classes.borderRadiusOfBottomContainer} ${classes.borderRadiusContainer}`
+                : classes.borderRadiusContainer
+            }
+          ></div>
         </List>
       </Grid>
       <Grid container item direction="column" justify="flex-end">
-        <Grid item container>
-          <MenuItem
-            path={Path.SETTINGS}
-            text={"Settings"}
-            component={Settings}
-            icon={SettingsIcon}
-          />
-        </Grid>
         {isElectron() && (
           <Grid item container justify="center">
             <Button

src/common/components/icons/OpenDexMainLogo.tsx

@@ -1,43 +1,81 @@
-import {
-  ListItemIcon,
-  Tooltip,
-  Theme,
-  createStyles,
-  makeStyles,
-} from "@material-ui/core";
+import { ListItemIcon, Tooltip, makeStyles, Theme } from "@material-ui/core";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import React, { ComponentClass, ElementType, ReactElement } from "react";
-import { NavLink, useLocation, useRouteMatch } from "react-router-dom";
+import { NavLink, useRouteMatch } from "react-router-dom";
 import { Path } from "../../../router/Path";
 
 export type MenuItemProps = {
   path: Path;
   text: string;
-  component: ComponentClass<any> | (() => ReactElement);
+  component:
+    | ComponentClass<any>
+    | (() => ReactElement)
+    | React.ReactElement<any>;
   icon: ElementType;
   isFallback?: boolean;
   isDisabled?: boolean;
   tooltipTextRows?: string[];
+  isBeforeSelected?: boolean;
+  isAfterSelected?: boolean;
+  selected?: boolean;
 };
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    disabled: {
-      color: theme.palette.text.disabled,
-    },
-  })
-);
+const getListItemColor = (theme: Theme, props: MenuItemProps) => {
+  if (props.isDisabled) {
+    return theme.palette.text.disabled;
+  } else if (props.selected) {
+    return "#d7d9e2";
+  } else {
+    return "#9a9ca4";
+  }
+};
+
+const getListItemBorderRadius = (props: MenuItemProps) => {
+  if (props.isBeforeSelected) {
+    return "25px 0px 25px 25px";
+  } else if (props.isAfterSelected) {
+    return "25px 25px 0px 25px";
+  } else {
+    return "25px 0px 0px 25px";
+  }
+};
+
+const getListItemBoxShadow = (props: MenuItemProps) => {
+  if (props.isBeforeSelected) {
+    return "30px 0px 0px #0c0c0c";
+  } else if (props.isAfterSelected) {
+    return "25px 0px 0px #0c0c0c";
+  } else {
+    return "";
+  }
+};
+
+const getMuiListItemHoverFocusProperties = (props: MenuItemProps) => ({
+  color: !props.isDisabled ? "#d7d9e2" : "",
+  backgroundColor: !props.selected ? "transparent" : "#0c0c0c",
+});
+
+const useStyles = makeStyles((theme) => ({
+  listItem: (props: MenuItemProps) => ({
+    height: "50px",
+    color: getListItemColor(theme, props),
+    borderRadius: getListItemBorderRadius(props),
+    boxShadow: getListItemBoxShadow(props),
+    backgroundColor: props.selected ? "#0c0c0c" : "transparent",
+    "&.MuiListItem-root:hover": getMuiListItemHoverFocusProperties(props),
+    "&.Mui-focusVisible": getMuiListItemHoverFocusProperties(props),
+  }),
+  listIcon: {
+    color: "inherit",
+  },
+}));
 
 function MenuItem(props: MenuItemProps): ReactElement {
   const { url } = useRouteMatch();
-  const { pathname } = useLocation();
-  const classes = useStyles();
+  const classes = useStyles(props);
   const navigateTo = `${url}${props.path}`;
-
-  const isCurrentLocation = (): boolean => {
-    return navigateTo === pathname || (!!props.isFallback && url === pathname);
-  };
+  const buttonProps = props.isDisabled ? {} : { disableRipple: true };
 
   return (
     <Tooltip
@@ -49,14 +87,14 @@ function MenuItem(props: MenuItemProps): ReactElement {
       }
     >
       <ListItem
-        className={props.isDisabled ? classes.disabled : ""}
+        className={classes.listItem}
         button={!props.isDisabled as any}
         component={props.isDisabled ? "div" : NavLink}
         to={navigateTo}
-        selected={isCurrentLocation()}
+        {...buttonProps}
       >
-        <ListItemIcon>
-          <props.icon color={props.isDisabled ? "disabled" : "inherit"} />
+        <ListItemIcon className={classes.listIcon}>
+          <props.icon />
         </ListItemIcon>
         <ListItemText primary={props.text} />
       </ListItem>

src/common/components/navigation/Menu.tsx

@@ -0,0 +1,3 @@
+import openDexLogo from "../../assets/OpenDEXLogo.svg";
+
+export { openDexLogo };

src/common/components/navigation/MenuItem.tsx

@@ -29,14 +29,16 @@ import SetupWarning from "./SetupWarning";
 import { isOpendexdReady } from "../common/utils/serviceUtil";
 import { ServiceStore, SERVICE_STORE } from "../stores/serviceStore";
 import { inject, observer } from "mobx-react";
-import { Menu, menuItems } from "../common/components/navigation/Menu";
+import {
+  Menu,
+  menuItems,
+  drawerWidth,
+} from "../common/components/navigation/Menu";
 
 type DashboardProps = {
   serviceStore?: ServiceStore;
 };
 
-export const drawerWidth = 200;
-
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     content: {