3 files changed, 21 insertions, 27 deletions
diff --git a/webui/package-lock.json b/webui/package-lock.json
index 00ffedaa..cfdebe07 100644
--- a/webui/package-lock.json
+++ b/webui/package-lock.json
@@ -15221,9 +15221,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",
@@ -21701,9 +21701,9 @@
       "integrity": "sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg=="
     },
     "ua-parser-js": {
-      "version": "0.7.21",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
-      "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==",
+      "version": "0.7.28",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
+      "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==",
       "dev": true
     },
     "unc-path-regex": {
@@ -21989,9 +21989,9 @@
       }
     },
     "url-parse": {
-      "version": "1.4.7",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz",
-      "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
+      "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
       "requires": {
         "querystringify": "^2.1.1",
         "requires-port": "^1.0.0"
diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 56b35968..866e52db 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -6,7 +6,7 @@ import Tab, { TabProps } from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import Toolbar from '@material-ui/core/Toolbar';
 import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import { makeStyles } from '@material-ui/core/styles';
+import { fade, makeStyles } from '@material-ui/core/styles';
 
 import CurrentIdentity from '../Identity/CurrentIdentity';
 import { LightSwitch } from '../Themer';
@@ -30,7 +30,8 @@ const useStyles = makeStyles((theme) => ({
     alignItems: 'center',
   },
   lightSwitch: {
-    padding: '0 20px',
+    marginRight: '20px',
+    color: fade(theme.palette.primary.contrastText, 0.5),
   },
   logo: {
     height: '42px',
@@ -85,9 +86,7 @@ function Header() {
             git-bug
           </Link>
           <div className={classes.filler} />
-          <div className={classes.lightSwitch}>
-            <LightSwitch />
-          </div>
+          <LightSwitch className={classes.lightSwitch} />
           <CurrentIdentity />
         </Toolbar>
       </AppBar>
diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx
index b4877974..edf1f352 100644
--- a/webui/src/components/Themer.tsx
+++ b/webui/src/components/Themer.tsx
@@ -1,35 +1,30 @@
 import React, { createContext, useContext, useState } from 'react';
 
-import { fade, ThemeProvider } from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton/IconButton';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
+import { ThemeProvider } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
 import { Theme } from '@material-ui/core/styles';
 import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/styles';
 
 const ThemeContext = createContext({
   toggleMode: () => {},
   mode: '',
 });
 
-const useStyles = makeStyles((theme: Theme) => ({
-  iconButton: {
-    color: fade(theme.palette.primary.contrastText, 0.5),
-  },
-}));
-
-const LightSwitch = () => {
+type LightSwitchProps = {
+  className?: string;
+};
+const LightSwitch = ({ className }: LightSwitchProps) => {
   const { mode, toggleMode } = useContext(ThemeContext);
   const nextMode = mode === 'light' ? 'dark' : 'light';
   const description = `Switch to ${nextMode} theme`;
-  const classes = useStyles();
 
   return (
     <Tooltip title={description}>
       <IconButton
         onClick={toggleMode}
         aria-label={description}
-        className={classes.iconButton}
+        className={className}
       >
         {mode === 'light' ? <WbSunnyRounded /> : <NightsStayRounded />}
       </IconButton>