Update workspace header

coder · BrunoQuaresma · May 10, 2023 · May 5, 2023 · May 5, 2023 · May 5, 2023
commit a1cbc123b25b700ddebb9c53deb5a921fb7af42a
diff --git a/site/src/components/Stats/Stats.tsx b/site/src/components/Stats/Stats.tsx
@@ -33,6 +33,7 @@ export const StatsItem: FC<
 
 const useStyles = makeStyles((theme) => ({
   stats: {
+    ...theme.typography.body2,
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
     borderRadius: theme.shape.borderRadius,

diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.tsx
@@ -1,5 +1,5 @@
 import Button from "@mui/material/Button"
-import AddCircleOutline from "@mui/icons-material/AddCircleOutline"
+import AddIcon from "@mui/icons-material/AddOutlined"
 import {
   AuthorizationResponse,
   Template,
@@ -25,6 +25,7 @@ import SettingsOutlined from "@mui/icons-material/SettingsOutlined"
 import DeleteOutlined from "@mui/icons-material/DeleteOutlined"
 import EditOutlined from "@mui/icons-material/EditOutlined"
 import FileCopyOutlined from "@mui/icons-material/FileCopyOutlined"
+import IconButton from "@mui/material/IconButton"
 
 const TemplateMenu: FC<{
   templateName: string
@@ -44,14 +45,15 @@ const TemplateMenu: FC<{
 
   return (
     <div>
-      <Button
+      <IconButton
         aria-controls="template-options"
         aria-haspopup="true"
         onClick={() => setIsMenuOpen(true)}
         ref={menuTriggerRef}
+        arial-label="More options"
       >
         <MoreVertOutlined />
-      </Button>
+      </IconButton>
 
       <Menu
         id="template-options"
@@ -99,7 +101,8 @@ const CreateWorkspaceButton: FC<{
   className?: string
 }> = ({ templateName }) => (
   <Button
-    startIcon={<AddCircleOutline />}
+    variant="contained"
+    startIcon={<AddIcon />}
     component={RouterLink}
     to={`/templates/${templateName}/workspace`}
   >

diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -153,7 +153,12 @@ export const TemplatesPageView: FC<
             <Button component={RouterLink} to="/starter-templates">
               Starter templates
             </Button>
-            <Button startIcon={<AddIcon />} component={RouterLink} to="new">
+            <Button
+              startIcon={<AddIcon />}
+              component={RouterLink}
+              to="new"
+              variant="contained"
+            >
               Add template
             </Button>
           </Maybe>

diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
@@ -136,6 +136,13 @@ dark = createTheme(dark, {
         outlinedNeutral: {
           borderColor: colors.gray[12],
         },
+        containedNeutral: {
+          borderColor: colors.gray[12],
+          backgroundColor: colors.gray[13],
+          "&:hover": {
+            backgroundColor: colors.gray[12],
+          },
+        },
         iconSizeMedium: {
           "& > .MuiSvgIcon-root": {
             fontSize: 18,
@@ -148,16 +155,6 @@ dark = createTheme(dark, {
         },
       },
     },
-    MuiIconButton: {
-      styleOverrides: {
-        sizeSmall: {
-          "& .MuiSvgIcon-root": {
-            width: 20,
-            height: 20,
-          },
-        },
-      },
-    },
     MuiTableContainer: {
       styleOverrides: {
         root: {
@@ -270,7 +267,7 @@ dark = createTheme(dark, {
           marginTop: 8,
           borderRadius: 4,
           padding: "4px 0",
-          minWidth: 120,
+          minWidth: 160,
         },
       },
     },