coder · kylecarbs · May 16, 2022 · May 13, 2022 · May 13, 2022 · May 14, 2022
@@ -1,21 +1,16 @@
 import CssBaseline from "@material-ui/core/CssBaseline"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
-import { withThemes } from "@react-theming/storybook-addon"
 import { createMemoryHistory } from "history"
 import { addDecorator } from "node_modules/@storybook/react"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
-import { dark, light } from "../src/theme"
+import { dark } from "../src/theme"
 import "../src/theme/globalFonts"
 
-const providerFn = ({ children, theme }) => (
-  <ThemeProvider theme={theme}>
-    <CssBaseline />
-    {children}
-  </ThemeProvider>
+addDecorator((story) =>
+  <ThemeProvider theme={dark}>
+    <CssBaseline />{story()}</ThemeProvider>
 )
 
-addDecorator(withThemes(null, [light, dark], { providerFn }))
-
 const history = createMemoryHistory()
 
 const routerDecorator = (Story) => {

@@ -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",
@@ -35,6 +35,7 @@
     "@xstate/react": "3.0.0",
     "axios": "0.26.1",
     "cronstrue": "2.4.0",
+    "dayjs": "^1.11.2",
     "formik": "2.2.9",
     "history": "5.3.0",
     "react": "17.0.2",

@@ -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={

@@ -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",

@@ -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}>
             <Cs
97AE
sBaseline />
             <AppRouter />
             <GlobalSnackbar />

@@ -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>

@@ -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",

@@ -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),

@@ -1,16 +1,15 @@
-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 { WrapperComponent } from "../../testHelpers/renderHelpers"
 import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog"
 
 namespace Helpers {
   export const Component: React.FC<ConfirmDialogProps> = (props: ConfirmDialogProps) => {
     return (
-      <ThemeProvider theme={light}>
+      <WrapperComponent>
         <ConfirmDialog {...props} />
-      </ThemeProvider>
+      </WrapperComponent>
     )
   }
 }

@@ -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),
     },
   }),
 }))

@@ -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: {

@@ -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,

@@ -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: {

@@ -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",
   },
 }))
@@ -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>
 }
@@ -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>

@@ -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>

@@ -1,5 +1,7 @@
 import Avatar from "@material-ui/core/Avatar"
+import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
+import { combineClasses } from "../../util/combineClasses"
 import { firstLetter } from "../../util/firstLetter"
 
 export interface UserAvatarProps {
@@ -8,5 +10,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={combineClasses([styles.avatar, className])}>
+      {firstLetter(username)}
+    </Avatar>
+  )
 }
+
+const useStyles = makeStyles((theme) => ({
+  avatar: {
+    borderRadius: 2,
+    border: `1px solid ${theme.palette.divider}`,
+  },
+}))
@@ -0,0 +1,21 @@
+import { useMachine } from "@xstate/react"
+import dayjs from "dayjs"
+import relativeTime from "dayjs/plugin/relativeTime"
+import React from "react"
+import { workspacesMachine } from "../../xServices/workspaces/workspacesXService"
+import { WorkspacesPageView } from "./WorkspacesPageView"
+
+dayjs.extend(relativeTime)
+
+export const WorkspacesPage: React.FC = () => {
+  const [workspacesState] = useMachine(workspacesMachine)
+
+  return (
+    <>
+      <WorkspacesPageView
+        workspaces={workspacesState.context.workspaces}
+        error={workspacesState.context.getWorkspacesError}
+      />
+    </>
+  )
+}