coder · kylecarbs · May 16, 2022 · May 13, 2022 · May 13, 2022 · May 14, 2022
diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js
@@ -1,20 +1,17 @@
 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}>
+addDecorator((story) => (
+  <ThemeProvider theme={dark}>
     <CssBaseline />
-    {children}
+    {story()}
   </ThemeProvider>
-)
-
-addDecorator(withThemes(null, [light, dark], { providerFn }))
+))
 
 const history = createMemoryHistory()
 

diff --git a/site/e2e/pom/TemplatesPage.ts → site/e2e/pom/WorkspacesPage.ts b/site/e2e/pom/TemplatesPage.ts → site/e2e/pom/WorkspacesPage.ts
@@ -1,8 +1,8 @@
 import { Page } from "@playwright/test"
 import { BasePom } from "./BasePom"
 
-export class TemplatesPage extends BasePom {
+export class WorkspacesPage extends BasePom {
   constructor(baseURL: string | undefined, page: Page) {
-    super(baseURL, "/templates", page)
+    super(baseURL, "/workspaces", page)
   }
 }
diff --git a/site/e2e/pom/index.ts b/site/e2e/pom/index.ts
@@ -1,2 +1,2 @@
 export * from "./SignInPage"
-export * from "./TemplatesPage"
+export * from "./WorkspacesPage"
diff --git a/site/e2e/tests/login.spec.ts b/site/e2e/tests/login.spec.ts
@@ -1,17 +1,17 @@
 import { test } from "@playwright/test"
 import { email, password } from "../constants"
-import { SignInPage, TemplatesPage } from "../pom"
+import { SignInPage, WorkspacesPage } from "../pom"
 import { waitForClientSideNavigation } from "./../util"
 
-test("Login takes user to /templates", async ({ baseURL, page }) => {
+test("Login takes user to /workspaces", async ({ baseURL, page }) => {
   await page.goto(baseURL + "/", { waitUntil: "networkidle" })
 
   // Log-in with the default credentials we set up in the development server
   const signInPage = new SignInPage(baseURL, page)
   await signInPage.submitBuiltInAuthentication(email, password)
 
-  const templatesPage = new TemplatesPage(baseURL, page)
-  await waitForClientSideNavigation(page, { to: templatesPage.url })
+  const workspacesPage = new WorkspacesPage(baseURL, page)
+  await waitForClientSideNavigation(page, { to: workspacesPage.url })
 
-  await page.waitForSelector("text=Templates")
+  await page.waitForSelector("text=Workspaces")
 })
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",
@@ -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",
@@ -53,7 +54,6 @@
   "devDependencies": {
     "@playwright/test": "1.21.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
-    "@react-theming/storybook-addon": "1.1.5",
     "@storybook/addon-actions": "6.4.22",
     "@storybook/addon-essentials": "6.4.22",
     "@storybook/addon-links": "6.4.22",

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -12,15 +12,13 @@ import { OrgsPage } from "./pages/OrgsPage/OrgsPage"
 import { SettingsPage } from "./pages/SettingsPage/SettingsPage"
 import { AccountPage } from "./pages/SettingsPages/AccountPage/AccountPage"
 import { SSHKeysPage } from "./pages/SettingsPages/SSHKeysPage/SSHKeysPage"
-import { CreateWorkspacePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/CreateWorkspacePage"
-import { TemplatePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage"
-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 { WorkspaceSettingsPage } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"
 
 const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))
+const WorkspacesPage = React.lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"))
 
 export const AppRouter: React.FC = () => (
   <React.Suspense fallback={<></>}>
@@ -46,36 +44,15 @@ export const AppRouter: React.FC = () => (
           }
         />
 
-        <Route path="templates">
+        <Route path="workspaces">
           <Route
             index
             element={
               <AuthAndFrame>
-                <TemplatesPage />
+                <WorkspacesPage />
               </AuthAndFrame>
             }
           />
-          <Route path=":organization/:template">
-            <Route
-              index
-              element={
-                <AuthAndFrame>
-                  <TemplatePage />
-                </AuthAndFrame>
-              }
-            />
-            <Route
-              path="create"
-              element={
-                <RequireAuth>
-                  <CreateWorkspacePage />
-                </RequireAuth>
-              }
-            />
-          </Route>
-        </Route>
-
-        <Route path="workspaces">
           <Route path=":workspace">
             <Route
               index

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -115,6 +115,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
@@ -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>
     )
   }
 }

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.stories.tsx b/site/src/components/Margins/Margins.stories.tsx
@@ -9,7 +9,7 @@ export default {
 
 const Template: Story = (args) => (
   <Margins {...args}>
-    <div style={{ width: "100%", background: "lightgrey" }}>Here is some content that will not get too wide!</div>
+    <div style={{ width: "100%", background: "black" }}>Here is some content that will not get too wide!</div>
   </Margins>
 )
 

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