change font to Inter

gatsby-browser.js

@@ -3,7 +3,7 @@ import { Provider } from "react-redux";
 import store from "./src/store/store";
 import "react-vis/dist/style.css";
 import "prismjs/themes/prism-tomorrow.css";
-import "typeface-roboto";
+import "typeface-inter";
 import { ThemeContextProvider } from "./src/context";
 
 export const wrapRootElement = ({ element }) => (

package-lock.json

@@ -38,6 +38,7 @@
         "redux": "^4.0.5",
         "redux-thunk": "^2.3.0",
         "reselect": "^4.0.0",
+        "typeface-inter": "^3.18.1",
         "typeface-roboto": "0.0.75",
         "worker-loader": "^2.0.0"
       },
@@ -24200,6 +24201,12 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typeface-inter": {
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/typeface-inter/-/typeface-inter-3.18.1.tgz",
+      "integrity": "sha512-c+TBanYFCvmg3j5vPk+zxK4ocMZbPxMEmjnwG7rPQoV87xvQ6b07VbAOC0Va0XBbbZCGw6cWNeFuLeg1YQru3Q==",
+      "license": "OFL-1.1"
+    },
     "node_modules/typeface-roboto": {
       "version": "0.0.75",
       "resolved": "https://registry.npmjs.org/typeface-roboto/-/typeface-roboto-0.0.75.tgz",

package.json

@@ -33,6 +33,7 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
+    "typeface-inter": "^3.18.1",
     "typeface-roboto": "0.0.75",
     "worker-loader": "^2.0.0"
   },
@@ -40,8 +41,8 @@
     "eslint": "^6.8.0",
     "eslint-plugin-react": "^7.23.2",
     "nodemon": "^3.1.9",
-    "serve": "^14.2.4",
-    "prettier": "^1.19.1"
+    "prettier": "^1.19.1",
+    "serve": "^14.2.4"
   },
   "keywords": [
     "gatsby"

src/components/Menu.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { makeStyles } from "@material-ui/styles";
 import { Paper, Divider } from "@material-ui/core";
 
@@ -6,7 +6,7 @@ import { MenuSolverControls } from "./MenuSolverControls";
 import { MenuMetrics } from "./MenuMetrics";
 import { OtherControls } from "./OtherControls";
 import { MemoryUsage } from "./MemoryUsage";
-
+import { useThemeContext } from "../context";
 const useStyles = makeStyles(theme => ({
   wrapper: {
     overflowY: "auto",
@@ -32,6 +32,11 @@ export const Menu = ({
 
 }) => {
   const classes = useStyles();
+  const { muiTheme, colorMode } = useThemeContext();
+  const backgroundStyle = useMemo(() =>
+    colorMode === "dark" ? "#101010" : "#ffffff",
+    [colorMode]
+  );
 
   return (
     <Paper classes={{ root: classes.wrapper }} style={{
@@ -44,6 +49,7 @@ export const Menu = ({
       padding: "15px",
       borderRadius: "8px",
       boxShadow: "2px 2px 10px rgba(0, 0, 0, 0.3)",
+      backgroundColor: backgroundStyle,
     }}>
       <MenuMetrics />
       <Divider />

src/components/MenuMetrics.jsx

@@ -28,8 +28,8 @@ export const MenuMetrics = props => {
   useEffect(() => {
     if (startedRunningAt) {
       const interval = setInterval(() => {
-        setRunningFor(Math.floor((Date.now() - startedRunningAt) / 1000));
-      }, 1000);
+        setRunningFor(Number(((Date.now() - startedRunningAt) / 1000).toFixed(3)));
+      }, 50);
       return () => clearInterval(interval);
     }
   }, [startedRunningAt]);
@@ -105,7 +105,7 @@ export const MenuMetrics = props => {
             display="inline"
             variant="button"
           >
-            {runningFor || ""}
+            {runningFor.toFixed(3) || ""}
           </Typography>
           <Typography
             classes={{ root: classes.unit }}

src/components/Navbar.jsx

@@ -8,7 +8,7 @@ export const Navbar = () => {
         justifyContent: 'space-between',
         alignItems: 'center',
         padding: '10px 20px',
-        backgroundColor: '#333',
+        backgroundColor: '#101010',
         color: 'white',
         position: 'fixed',
         top: 0,

src/context/ThemeContext.jsx

@@ -8,7 +8,7 @@ import orange from "@material-ui/core/colors/orange";
 import { COLOR_MODE_KEY } from "../constants";
 import { usePersistentState } from "../hooks";
 
-export const ThemeContext = createContext();  
+export const ThemeContext = createContext();
 
 export const ThemeContextProvider = props => {
   const { children } = props;
@@ -17,12 +17,14 @@ export const ThemeContextProvider = props => {
 
   const muiTheme = useMemo(
     () =>
-    createTheme({
+      createTheme({
         palette: {
+          type: colorMode,
           primary: blue,
           secondary: orange,
-          type: colorMode
-        }
+          // backgroundColor: colorMode === "dark" ? "#101010" : "#ffffff",
+          // background: colorMode === "dark" ? "#ffffff" : "#ffffff",
+        },
       }),
     [colorMode]
   );

src/pages/about.js

@@ -9,7 +9,7 @@ const AboutPage = () => {
         maxWidth: '900px',
         margin: '80px auto 20px',
         padding: '0 20px',
-        fontFamily: 'Arial, sans-serif',
+        fontFamily: 'Inter, sans-serif',
     };
 
     return (