Update theme to dark!

coder · kylecarbs · May 16, 2022 · May 13, 2022 · May 13, 2022 · May 14, 2022
commit 83397e012b51e1712859491cbe3037eb0a8c6c63
diff --git a/site/src/components/AdminDropdown/AdminDropdown.tsx b/site/src/components/AdminDropdown/AdminDropdown.tsx
@@ -51,7 +51,7 @@ export const AdminDropdown: React.FC = () => {
     <>
       <div className={styles.link}>
         <ListItem selected={Boolean(anchorEl)} button onClick={onOpenAdminMenu}>
-          <ListItemText className="no-brace" color="primary" primary={Language.menuTitle} />
+          <ListItemText className="no-brace" primary={Language.menuTitle} />
           {anchorEl ? <CloseDropdown /> : <OpenDropdown />}
         </ListItem>
       </div>

diff --git a/site/src/components/HeaderButton/HeaderButton.tsx b/site/src/components/HeaderButton/HeaderButton.tsx
@@ -15,7 +15,6 @@ export const HeaderButton: React.FC<HeaderButtonProps> = (props) => {
     <Button
       className={styles.pageButton}
       variant="contained"
-      color="primary"
       onClick={(event: React.MouseEvent): void => {
         if (props.onClick) {
           props.onClick(event.nativeEvent)

diff --git a/site/src/components/PreferencesAccountForm/PreferencesAccountForm.tsx b/site/src/components/PreferencesAccountForm/PreferencesAccountForm.tsx
@@ -72,7 +72,7 @@ export const AccountForm: React.FC<AccountFormProps> = ({
           {error && <FormHelperText error>{error}</FormHelperText>}
 
           <div>
-            <LoadingButton color="primary" loading={isLoading} type="submit" variant="contained">
+            <LoadingButton loading={isLoading} type="submit" variant="contained">
               {isLoading ? "" : Language.updatePreferences}
             </LoadingButton>
           </div>

diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx
@@ -113,15 +113,15 @@ export const SignInForm: React.FC<SignInFormProps> = ({
         {authErrorMessage && <FormHelperText error>{Language.authErrorMessage}</FormHelperText>}
         {methodsErrorMessage && <FormHelperText error>{Language.methodsErrorMessage}</FormHelperText>}
         <div className={styles.submitBtn}>
-          <LoadingButton color="primary" loading={isLoading} fullWidth type="submit" variant="contained">
+          <LoadingButton loading={isLoading} fullWidth type="submit" variant="contained">
             {isLoading ? "" : Language.passwordSignIn}
           </LoadingButton>
         </div>
       </form>
       {authMethods?.github && (
         <div className={styles.submitBtn}>
           <Link href={`/api/v2/users/oauth2/github/callback?redirect=${encodeURIComponent(redirectTo)}`}>
-            <Button color="primary" disabled={isLoading} fullWidth type="submit" variant="contained">
+            <Button disabled={isLoading} fullWidth type="submit" variant="contained">
               {Language.githubSignIn}
             </Button>
           </Link>

diff --git a/site/src/components/WorkspacesPage/WorkspacesPage.tsx b/site/src/components/WorkspacesPage/WorkspacesPage.tsx
@@ -1,17 +1,20 @@
-import { TextField } from "@material-ui/core"
+import { Avatar, Theme } from "@material-ui/core"
 import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
+import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
 import useTheme from "@material-ui/styles/useTheme"
 import { useMachine } from "@xstate/react"
 import React from "react"
+import { Link } from "react-router-dom"
 import { WorkspaceBuild } from "../../api/typesGenerated"
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
+import { firstLetter } from "../../util/firstLetter"
 import { getTimeSince } from "../../util/time"
 import { workspacesMachine } from "../../xServices/workspaces/workspacesXService"
 
@@ -22,15 +25,13 @@ export const Language = {
 export const WorkspacesPage: React.FC = () => {
   const styles = useStyles()
   const [workspacesState] = useMachine(workspacesMachine)
-  const theme = useTheme()
+  const theme: Theme = useTheme()
 
   return (
     <Stack spacing={4}>
       <Margins>
-        <img className={styles.boxes} alt="boxes" src="/boxes.png" />
         <div className={styles.actions}>
-          <TextField placeholder="Search all workspaces" />
-          <Button color="primary">Create Workspace</Button>
+          <Button startIcon={<AddCircleOutline />}>Create Workspace</Button>
         </div>
         <Table>
           <TableHead>
@@ -46,11 +47,29 @@ export const WorkspacesPage: React.FC = () => {
             {workspacesState.context.workspaces?.map((workspace) => (
               <TableRow key={workspace.id} className={styles.workspaceRow}>
                 <TableCell>
-                  <b>{workspace.name}</b>
+                  <div className={styles.workspaceName}>
+                    <Avatar variant="square" className={styles.workspaceAvatar}>
+                      {firstLetter(workspace.name)}
+                    </Avatar>
+                    <Link to={`/workspaces/${workspace.id}`} className={styles.workspaceLink}>
+                      <b>{workspace.name}</b>
+                      <span>{workspace.owner_name}</span>
+                    </Link>
+                  </div>
                 </TableCell>
                 <TableCell>{workspace.template_name}</TableCell>
-                <TableCell>{workspace.latest_build.template_version_id}</TableCell>
-                <TableCell>{getTimeSince(new Date(workspace.latest_build.created_at))} ago</TableCell>
+                <TableCell>
+                  {workspace.outdated ? (
+                    <span style={{ color: theme.palette.error.main }}>outdated</span>
+                  ) : (
+                    <span style={{ color: theme.palette.text.secondary }}>up to date</span>
+                  )}
+                </TableCell>
+                <TableCell>
+                  <span style={{ color: theme.palette.text.secondary }}>
+                    {getTimeSince(new Date(workspace.latest_build.created_at))} ago
+                  </span>
+                </TableCell>
                 <TableCell>{getStatus(theme, workspace.latest_build)}</TableCell>
               </TableRow>
             ))}
@@ -61,7 +80,7 @@ export const WorkspacesPage: React.FC = () => {
   )
 }
 
-const getStatus = (theme: any, build: WorkspaceBuild): JSX.Element => {
+const getStatus = (theme: Theme, build: WorkspaceBuild): JSX.Element => {
   let status = ""
   let color = ""
   const inProgress = build.job.status === "running" || build.job.status === "canceling"
@@ -89,21 +108,43 @@ const getStatus = (theme: any, build: WorkspaceBuild): JSX.Element => {
 
 const useStyles = makeStyles((theme) => ({
   actions: {
-    marginTop: theme.spacing(6),
-    marginBottom: theme.spacing(4),
-  },
-  boxes: {
-    position: "absolute",
-    pointerEvents: "none",
-    top: "0%",
-    left: "50%",
-    transform: "translateX(-50%)",
-    zIndex: -1,
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(3),
+    display: "flex",
+    height: theme.spacing(6),
+
+    "& button": {
+      marginLeft: "auto",
+    },
   },
   workspaceRow: {
     "& > td": {
       paddingTop: theme.spacing(2),
       paddingBottom: theme.spacing(2),
     },
   },
+  workspaceAvatar: {
+    borderRadius: 2,
+    marginRight: theme.spacing(1),
+    width: 24,
+    height: 24,
+    fontSize: 16,
+  },
+  workspaceName: {
+    display: "flex",
+    alignItems: "center",
+  },
+  workspaceLink: {
+    display: "flex",
+    flexDirection: "column",
+    color: theme.palette.text.primary,
+    textDecoration: "none",
+    "&:hover": {
+      textDecoration: "underline",
+    },
+    "& span": {
+      fontSize: 12,
+      color: theme.palette.text.secondary,
+    },
+  },
 }))
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
@@ -9,6 +9,7 @@ export const getOverrides = (palette: PaletteOptions) => {
         width: 32,
         height: 32,
         fontSize: 24,
+        border: `1px solid ${palette.divider}`,
       },
     },
     MuiButton: {
@@ -22,6 +23,12 @@ export const getOverrides = (palette: PaletteOptions) => {
       },
       contained: {
         boxShadow: "none",
+        color: palette.text?.primary,
+        backgroundColor: "#151515",
+        "&:hover": {
+          boxShadow: "none",
+          backgroundColor: "#000000",
+        },
       },
     },
     MuiTableHead: {
@@ -57,15 +64,13 @@ export const getOverrides = (palette: PaletteOptions) => {
     },
     MuiInputBase: {
       root: {
-        background: palette.background?.paper,
         borderRadius: 2,
       },
     },
     MuiOutlinedInput: {
       root: {
-        borderColor: palette.divider,
-        "&:hover > .MuiOutlinedInput-notchedOutline": {
-          borderColor: palette.divider,
+        "& input:-webkit-autofill": {
+          WebkitBoxShadow: `0 0 0 1000px ${palette.background?.paper} inset`,
         },
       },
     },

diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts
@@ -13,10 +13,10 @@ import { PaletteOptions } from "@material-ui/core/styles/createPalette"
 export const darkPalette: PaletteOptions = {
   type: "dark",
   primary: {
-    main: "#000000",
+    main: "#409BF4",
     contrastText: "#f8f8f8",
-    light: "#1F1F1F",
-    dark: "#000000",
+    light: "#79B8FF",
+    dark: "#1976D2",
   },
   secondary: {
     main: "#008510",

diff --git a/site/src/theme/props.ts b/site/src/theme/props.ts
@@ -4,34 +4,21 @@ import { ComponentsProps } from "@material-ui/core/styles/props"
  * These are global overrides to MUI components and we may move away from using them in the future.
  */
 export const props = {
+  MuiButtonBase: {
+    disableRipple: true,
+  },
   MuiButton: {
     variant: "contained",
   },
   MuiTextField: {
     margin: "dense",
-    InputProps: {
-      labelWidth: 0,
-    },
     variant: "outlined",
     spellCheck: false,
   },
-  MuiInputLabel: {
-    shrink: true,
-  },
   MuiFormControl: {
     variant: "outlined",
     margin: "dense",
   },
-  MuiInput: {
-    spellCheck: false,
-    autoCorrect: "off",
-  },
-  MuiOutlinedInput: {
-    notched: false,
-  },
-  MuiDialogTitle: {
-    disableTypography: true,
-  },
   MuiMenu: {
     anchorOrigin: {
       vertical: "bottom",
@@ -51,7 +38,4 @@ export const props = {
     textColor: "primary",
     indicatorColor: "primary",
   },
-  MuiTab: {
-    disableTouchRipple: true,
-  },
 } as ComponentsProps
diff --git a/site/static/boxes.png b/site/static/boxes.png