Ui improvements

.vscode/settings.json

@@ -30,12 +30,14 @@
     "Toggler",
     "Unmount",
     "Waypoint",
+    "ZINDEX",
     "borderless",
     "browserslist",
     "bundlewatch",
     "centered",
     "codeql",
     "coord",
+    "declutter",
     "firefox",
     "hdms",
     "jspdf",

package.json

@@ -98,6 +98,7 @@
   "devDependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@reduxjs/toolkit": "^1.4.0",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.0",

src/components/ControlButtons/ControlButton/ControlButton.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef, memo } from 'react';
 import Tooltip from '@material-ui/core/Tooltip';
 import { PopperPlacementType } from '@material-ui/core/Popper';
 import Button, { ButtonProps } from '@material-ui/core/Button';
+import { useTooltipStyles } from './ControlButtonStyles';
 
 export type ControlButtonProps = ButtonProps & {
   label?: string;
@@ -11,14 +12,21 @@ export type ControlButtonProps = ButtonProps & {
 export const ControlButton: React.FunctionComponent<ControlButtonProps> = memo(
   forwardRef(
     ({ children, label, tooltipPlacement = 'bottom', ...rest }, ref) => {
+      const classes = useTooltipStyles();
+
       const button = (
         <Button {...rest} aria-label={label} ref={ref}>
           {children}
         </Button>
       );
 
       return label ? (
-        <Tooltip title={label} placement={tooltipPlacement} arrow>
+        <Tooltip
+          title={label}
+          placement={tooltipPlacement}
+          arrow
+          classes={classes}
+        >
           {button}
         </Tooltip>
       ) : (

src/components/ControlButtons/ControlButton/ControlButtonStyles.ts

@@ -0,0 +1,11 @@
+import { makeStyles, Theme } from '@material-ui/core/styles';
+
+export const useTooltipStyles = makeStyles((theme: Theme) => ({
+  arrow: {
+    // color: theme.palette.common.black,
+  },
+  tooltip: {
+    // backgroundColor: theme.palette.common.black,
+    ...theme.typography.body2,
+  },
+}));