Add peridotDarkTheme and switch to it by default

base/ts/mui/theme.tsx

@@ -16,7 +16,10 @@
 
 import React from 'react';
 import { createTheme, ThemeOptions } from '@mui/material/styles';
-import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from 'react-router-dom';
 import { LinkProps } from '@mui/material/Link';
 
 const LinkBehavior = React.forwardRef<
@@ -52,3 +55,9 @@ export const peridotThemeOptions: ThemeOptions = {
 };
 
 export const peridotTheme = createTheme(peridotThemeOptions);
+export const peridotDarkTheme = createTheme({
+  ...peridotThemeOptions,
+  palette: {
+    mode: 'dark',
+  },
+});

tools/mothership/admin/ui/App.tsx

@@ -37,7 +37,7 @@ export const App = () => {
   return (
     <Box sx={{ display: 'flex' }}>
       <AppBar
-        elevation={0}
+        elevation={5}
         position="fixed"
         sx={{ zIndex: (theme: Theme) => theme.zIndex.drawer + 1 }}
       >

tools/mothership/admin/ui/Workers.tsx

@@ -29,9 +29,9 @@ import {
 
 export const Workers = () => {
   return (
-    <Box sx={{p: 1.5, width: '100%'}}>
+    <Box sx={{p: 1.5, px: 3, width: '100%'}}>
       <Box sx={{ mb: 2, ml: 'auto', textAlign: 'right' }}>
-        <Button href="/workers/create" variant="contained" size="small">
+        <Button href="/workers/create" variant="outlined" size="small">
           Create a new worker
         </Button>
       </Box>

tools/mothership/ui/App.tsx

@@ -33,7 +33,7 @@ export const App = () => {
   return (
     <Box sx={{ display: 'flex' }}>
       <AppBar
-        elevation={0}
+        elevation={5}
         position="fixed"
         sx={{ zIndex: (theme: Theme) => theme.zIndex.drawer + 1 }}
       >