coder · kylecarbs · May 16, 2022 · May 13, 2022 · May 13, 2022 · May 14, 2022
diff --git a/site/package.json b/site/package.json
@@ -25,7 +25,7 @@
     "typegen": "xstate typegen 'src/**/*.ts'"
   },
   "dependencies": {
-    "@fontsource/fira-code": "4.5.9",
+    "@fontsource/ibm-plex-mono": "^4.5.9",
     "@fontsource/inter": "4.5.7",
     "@material-ui/core": "4.9.4",
     "@material-ui/icons": "4.5.1",

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -18,6 +18,7 @@ import { TemplatesPage } from "./pages/TemplatesPages/TemplatesPage"
 import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
 import { UsersPage } from "./pages/UsersPage/UsersPage"
 import { WorkspacePage } from "./pages/WorkspacePage/WorkspacePage"
+import { WorkspacesPage } from "./pages/WorkspacesPage/WorkspacesPage"
 
 const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))
 
@@ -75,6 +76,14 @@ export const AppRouter: React.FC = () => (
         </Route>
 
         <Route path="workspaces">
+          <Route
+            index
+            element={
+              <AuthAndFrame>
+                <WorkspacesPage />
+              </AuthAndFrame>
+            }
+          />
           <Route
             path=":workspace"
             element={

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -114,6 +114,11 @@ export const getWorkspace = async (workspaceId: string): Promise<TypesGen.Worksp
   return response.data
 }
 
+export const getWorkspaces = async (userID = "me"): Promise<TypesGen.Workspace[]> => {
+  const response = await axios.get<TypesGen.Workspace[]>(`/api/v2/users/${userID}/workspaces`)
+  return response.data
+}
+
 export const getWorkspaceByOwnerAndName = async (
   organizationID: string,
   username = "me",

diff --git a/site/src/app.tsx b/site/src/app.tsx
@@ -5,7 +5,7 @@ import { BrowserRouter as Router } from "react-router-dom"
 import { SWRConfig } from "swr"
 import { AppRouter } from "./AppRouter"
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"
-import { light } from "./theme"
+import { dark } from "./theme"
 import "./theme/globalFonts"
 import { XServiceProvider } from "./xServices/StateContext"
 
@@ -31,7 +31,7 @@ export const App: React.FC = () => {
         }}
       >
         <XServiceProvider>
-          <ThemeProvider theme={light}>
+          <ThemeProvider theme={dark}>
             <CssBaseline />
             <AppRouter />
             <GlobalSnackbar />

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/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx
@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) => ({
   root: {
     minHeight: 156,
     background: theme.palette.background.default,
-    color: theme.palette.codeBlock.contrastText,
+    color: theme.palette.text.primary,
     fontFamily: MONOSPACE_FONT_FAMILY,
     fontSize: 13,
     wordBreak: "break-all",

diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: "space-between",
     alignItems: "center",
     background: theme.palette.background.default,
-    color: theme.palette.codeBlock.contrastText,
+    color: theme.palette.primary.contrastText,
     fontFamily: MONOSPACE_FONT_FAMILY,
     fontSize: 13,
     padding: theme.spacing(2),

diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.test.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.test.tsx
@@ -2,13 +2,13 @@ import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import { fireEvent, render } from "@testing-library/react"
 import React from "react"
 import { act } from "react-dom/test-utils"
-import { light } from "../../theme"
+import { dark } from "../../theme"
 import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog"
 
 namespace Helpers {
   export const Component: React.FC<ConfirmDialogProps> = (props: ConfirmDialogProps) => {
     return (
-      <ThemeProvider theme={light}>
+      <ThemeProvider theme={dark}>
         <ConfirmDialog {...props} />
       </ThemeProvider>
     )

diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.tsx
@@ -48,14 +48,11 @@ interface StyleProps {
 const useStyles = makeStyles((theme) => ({
   dialogWrapper: (props: StyleProps) => ({
     "& .MuiPaper-root": {
-      background:
-        props.type === "info"
-          ? theme.palette.confirmDialog.info.background
-          : theme.palette.confirmDialog.error.background,
+      background: props.type === "info" ? theme.palette.primary.main : theme.palette.error.dark,
     },
   }),
   dialogContent: (props: StyleProps) => ({
-    color: props.type === "info" ? theme.palette.confirmDialog.info.text : theme.palette.confirmDialog.error.text,
+    color: props.type === "info" ? theme.palette.primary.contrastText : theme.palette.error.contrastText,
     padding: theme.spacing(6),
     textAlign: "center",
   }),
@@ -65,15 +62,15 @@ const useStyles = makeStyles((theme) => ({
   description: (props: StyleProps) => ({
     color:
       props.type === "info"
-        ? fade(theme.palette.confirmDialog.info.text, 0.75)
-        : fade(theme.palette.confirmDialog.error.text, 0.75),
+        ? fade(theme.palette.primary.contrastText, 0.75)
+        : fade(theme.palette.error.contrastText, 0.75),
     lineHeight: "160%",
 
     "& strong": {
       color:
         props.type === "info"
-          ? fade(theme.palette.confirmDialog.info.text, 0.95)
-          : fade(theme.palette.confirmDialog.error.text, 0.95),
+          ? fade(theme.palette.primary.contrastText, 0.95)
+          : fade(theme.palette.error.contrastText, 0.95),
     },
   }),
 }))

diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -52,13 +52,13 @@ const useStyles = makeStyles((theme) => ({
   },
   copyButton: {
     borderRadius: 7,
-    background: theme.palette.codeBlock.button.main,
-    color: theme.palette.codeBlock.button.contrastText,
+    background: theme.palette.background.default,
+    color: theme.palette.primary.contrastText,
     padding: theme.spacing(0.85),
     minWidth: 32,
 
     "&:hover": {
-      background: theme.palette.codeBlock.button.hover,
+      background: theme.palette.background.paper,
     },
   },
   fileCopyIcon: {

diff --git a/site/src/components/Dialog/Dialog.tsx b/site/src/components/Dialog/Dialog.tsx
@@ -161,7 +161,7 @@ const useButtonStyles = makeStyles((theme) => ({
     },
   },
   confirmDialogCancelButton: (props: StyleProps) => {
-    const color = props.type === "info" ? theme.palette.confirmDialog.info.text : theme.palette.confirmDialog.error.text
+    const color = props.type === "info" ? theme.palette.primary.contrastText : theme.palette.error.contrastText
     return {
       background: fade(color, 0.15),
       color,

diff --git a/site/src/components/Header/Header.tsx b/site/src/components/Header/Header.tsx
@@ -68,7 +68,7 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     alignItems: "center",
     height: 126,
-    background: theme.palette.hero.main,
+    background: theme.palette.background.default,
     boxShadow: theme.shadows[3],
   },
   topInner: {

diff --git a/site/src/components/HeaderButton/HeaderButton.tsx b/site/src/components/HeaderButton/HeaderButton.tsx
@@ -1,5 +1,5 @@
 import Button from "@material-ui/core/Button"
-import { lighten, makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 
 export interface HeaderButtonProps {
@@ -28,10 +28,8 @@ export const HeaderButton: React.FC<HeaderButtonProps> = (props) => {
   )
 }
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   pageButton: {
     whiteSpace: "nowrap",
-    backgroundColor: lighten(theme.palette.hero.main, 0.1),
-    color: "#B5BFD2",
   },
 }))
diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx
@@ -8,14 +8,11 @@ const useStyles = makeStyles(() => ({
     maxWidth,
     padding: `0 ${sidePadding}`,
     flex: 1,
+    width: "100%",
   },
 }))
 
 export const Margins: React.FC = ({ children }) => {
   const styles = useStyles()
-  return (
-    <div>
-      <div className={styles.margins}>{children}</div>
-    </div>
-  )
+  return <div className={styles.margins}>{children}</div>
 }
diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
@@ -21,10 +21,15 @@ export const NavbarView: React.FC<NavbarViewProps> = ({ user, onSignOut, display
     <nav className={styles.root}>
       <List className={styles.fixed}>
         <ListItem className={styles.item}>
-          <NavLink className={styles.logo} to="/">
+          <NavLink className={styles.logo} to="/workspaces">
             <Logo fill="white" opacity={1} width={125} />
           </NavLink>
         </ListItem>
+        <ListItem button className={styles.item}>
+          <NavLink className={styles.link} to="/workspaces">
+            Workspaces
+          </NavLink>
+        </ListItem>
         <ListItem button className={styles.item}>
           <NavLink className={styles.link} to="/templates">
             Templates
@@ -47,13 +52,13 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: "center",
     alignItems: "center",
     height: navHeight,
-    background: theme.palette.navbar.main,
+    background: theme.palette.background.paper,
     marginTop: 0,
     transition: "margin 150ms ease",
     "@media (display-mode: standalone)": {
       borderTop: `1px solid ${theme.palette.divider}`,
     },
-    borderBottom: `1px solid #383838`,
+    borderBottom: `1px solid ${theme.palette.divider}`,
   },
   fixed: {
     flex: 0,
@@ -68,9 +73,9 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     height: navHeight,
     paddingLeft: theme.spacing(4),
-    paddingRight: theme.spacing(2),
+    paddingRight: theme.spacing(4),
     "& svg": {
-      width: 125,
+      width: 109,
     },
   },
   title: {
@@ -98,17 +103,16 @@ const useStyles = makeStyles((theme) => ({
     "&.active": {
       position: "relative",
       color: theme.palette.primary.contrastText,
+      fontWeight: "bold",
 
       "&::before": {
-        content: `"{"`,
-        left: 10,
-        position: "absolute",
-      },
-
-      "&::after": {
-        content: `"}"`,
+        content: `" "`,
+        bottom: 0,
+        left: theme.spacing(3),
+        background: "#C16800",
+        right: theme.spacing(3),
+        height: 2,
         position: "absolute",
-        right: 10,
       },
     },
   },

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/UserAvatar/UserAvatar.tsx b/site/src/components/UserAvatar/UserAvatar.tsx
@@ -1,4 +1,5 @@
 import Avatar from "@material-ui/core/Avatar"
+import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { firstLetter } from "../../util/firstLetter"
 
@@ -8,5 +9,17 @@ export interface UserAvatarProps {
 }
 
 export const UserAvatar: React.FC<UserAvatarProps> = ({ username, className }) => {
-  return <Avatar className={className}>{firstLetter(username)}</Avatar>
+  const styles = useStyles()
+  return (
+    <Avatar variant="square" className={`${styles.avatar} ${className || ""}`}>
+      {firstLetter(username)}
+    </Avatar>
+  )
 }
+
+const useStyles = makeStyles((theme) => ({
+  avatar: {
+    borderRadius: 2,
+    border: `1px solid ${theme.palette.divider}`,
+  },
+}))