coder · BrunoQuaresma · Feb 22, 2023 · Feb 17, 2023 · Feb 17, 2023 · Feb 17, 2023
diff --git a/site/src/app.tsx b/site/src/app.tsx
@@ -15,6 +15,7 @@ const queryClient = new QueryClient({
     queries: {
       retry: false,
       cacheTime: 0,
+      refetchOnWindowFocus: false,
     },
   },
 })

diff --git a/site/src/components/DeploySettingsLayout/Fieldset.tsx b/site/src/components/DeploySettingsLayout/Fieldset.tsx
@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme) => ({
   },
   title: {
     ...theme.typography.h5,
-    fontWeight: "bold",
+    fontWeight: 600,
   },
   body: {
     ...theme.typography.body2,

diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
@@ -89,11 +89,16 @@ const useButtonStyles = makeStyles((theme) => ({
       backgroundColor: colors.red[10],
       borderColor: colors.red[9],
       color: theme.palette.text.primary,
-      "&:hover": {
+
+      "&:hover:not(:disabled)": {
         backgroundColor: colors.red[9],
+        borderColor: colors.red[9],
       },
+
       "&.Mui-disabled": {
-        opacity: 0.5,
+        backgroundColor: colors.red[15],
+        borderColor: colors.red[15],
+        color: colors.red[9],
       },
     },
   },

diff --git a/site/src/components/DropdownButton/ActionCtas.tsx b/site/src/components/DropdownButton/ActionCtas.tsx
@@ -26,6 +26,7 @@ export const UpdateButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
 
   return (
     <Button
+      variant="outlined"
       className={styles.actionButton}
       startIcon={<CloudQueueIcon />}
       onClick={handleAction}
@@ -43,6 +44,7 @@ export const ChangeVersionButton: FC<
 
   return (
     <Button
+      variant="outlined"
       className={styles.actionButton}
       startIcon={<UpdateOutlined />}
       onClick={handleAction}
@@ -60,6 +62,7 @@ export const BuildParametersButton: FC<
 
   return (
     <Button
+      variant="outlined"
       className={styles.actionButton}
       startIcon={<SettingsOutlined />}
       onClick={handleAction}
@@ -150,7 +153,7 @@ export const DisabledButton: FC<React.PropsWithChildren<DisabledProps>> = ({
   const styles = useStyles()
 
   return (
-    <Button disabled className={styles.actionButton}>
+    <Button variant="outlined" disabled className={styles.actionButton}>
       {label}
     </Button>
   )
@@ -167,6 +170,7 @@ export const ActionLoadingButton: FC<React.PropsWithChildren<LoadingProps>> = ({
   return (
     <LoadingButton
       loading
+      variant="outlined"
       loadingLabel={label}
       className={combineClasses([styles.loadingButton, styles.actionButton])}
     />
@@ -178,8 +182,13 @@ const useStyles = makeStyles((theme) => ({
     // Set fixed width for the action buttons so they will not change the size
     // during the transitions
     width: theme.spacing(20),
-    border: "none",
     borderRadius: `${theme.shape.borderRadius}px 0px 0px ${theme.shape.borderRadius}px`,
+    // This is used to show the hover effect
+    marginRight: -1,
+    position: "relative",
+    "&:hover": {
+      zIndex: 1,
+    },
   },
   cancelButton: {
     "&.MuiButton-root": {

diff --git a/site/src/components/DropdownButton/DropdownButton.tsx b/site/src/components/DropdownButton/DropdownButton.tsx
@@ -41,6 +41,7 @@ export const DropdownButton: FC<DropdownButtonProps> = ({
         <>
           {/* popover toggle button */}
           <Button
+            variant="outlined"
             data-testid="workspace-actions-button"
             aria-controls="workspace-actions-menu"
             aria-haspopup="true"
@@ -86,13 +87,9 @@ export const DropdownButton: FC<DropdownButtonProps> = ({
 
 const useStyles = makeStyles((theme) => ({
   buttonContainer: {
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: `${theme.shape.borderRadius}px`,
     display: "inline-flex",
   },
   dropdownButton: {
-    border: "none",
-    borderLeft: `1px solid ${theme.palette.divider}`,
     borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
     minWidth: "unset",
     width: "64px", // matching cancel button so button grouping doesn't grow in size
@@ -110,8 +107,18 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   popoverPaper: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px ${theme.spacing(
-      1,
-    )}px`,
+    padding: 0,
+    width: theme.spacing(28),
+
+    "& .MuiButton-root": {
+      padding: theme.spacing(1, 2),
+      borderRadius: 0,
+      width: "100%",
+      border: 0,
+
+      "&:hover": {
+        background: theme.palette.action.hover,
+      },
+    },
   },
 }))
diff --git a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx
@@ -23,7 +23,7 @@ export const FullPageHorizontalForm: FC<
     <Margins size="medium">
       <PageHeader
         actions={
-          <Button size="small" onClick={onCancel}>
+          <Button variant="outlined" size="small" onClick={onCancel}>
             Cancel
           </Button>
         }

diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx
@@ -93,7 +93,7 @@ const useStyles = makeStyles((theme) => ({
   link: {
     color: "inherit",
     textDecoration: "none",
-    fontWeight: "bold",
+    fontWeight: 600,
   },
   list: {
     padding: theme.spacing(1),

diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
@@ -239,7 +239,7 @@ const useStyles = makeStyles((theme) => ({
     // NavLink adds this class when the current route matches.
     "&.active": {
       color: theme.palette.text.primary,
-      fontWeight: "bold",
+      fontWeight: 500,
     },
 
     [theme.breakpoints.up("md")]: {

diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
@@ -9,15 +9,17 @@ export interface PillProps {
   text: string
   type?: PaletteIndex
   lightBorder?: boolean
+  title?: string
 }
 
 export const Pill: FC<PillProps> = (props) => {
-  const { className, icon, text = false } = props
+  const { className, icon, text = false, title } = props
   const styles = useStyles(props)
   return (
     <div
       className={combineClasses([styles.wrapper, styles.pillColor, className])}
       role="status"
+      title={title}
     >
       {icon && <div className={styles.iconWrapper}>{icon}</div>}
       {text}

diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
@@ -77,6 +77,7 @@ export const SearchBarWithFilter: React.FC<
       <Stack direction="row" spacing={0}>
         {presetFilters && presetFilters.length > 0 && (
           <Button
+            variant="outlined"
             aria-controls="filter-menu"
             aria-haspopup="true"
             onClick={handleClick}

diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.tsx
@@ -28,6 +28,7 @@ const TemplateSettingsButton: FC<{ templateName: string }> = ({
   templateName,
 }) => (
   <Button
+    variant="outlined"
     component={RouterLink}
     to={`/templates/${templateName}/settings`}
     startIcon={<SettingsOutlined />}
@@ -50,7 +51,7 @@ const CreateWorkspaceButton: FC<{
 )
 
 const DeleteTemplateButton: FC<{ onClick: () => void }> = ({ onClick }) => (
-  <Button startIcon={<DeleteOutlined />} onClick={onClick}>
+  <Button variant="outlined" startIcon={<DeleteOutlined />} onClick={onClick}>
     {Language.deleteButton}
   </Button>
 )

diff --git a/site/src/components/TemplateVersionEditor/FileTreeView.tsx b/site/src/components/TemplateVersionEditor/FileTreeView.tsx
@@ -8,6 +8,7 @@ import MenuItem from "@material-ui/core/MenuItem"
 import { FC, useState } from "react"
 import { FileTree } from "util/filetree"
 import { DockerIcon } from "components/Icons/DockerIcon"
+import { colors } from "theme/colors"
 
 const sortFileTree = (fileTree: FileTree) => (a: string, b: string) => {
   const contentA = fileTree[a]
@@ -98,7 +99,6 @@ export const FileTreeView: FC<{
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
       aria-label="Files"
-      className={styles.fileTree}
     >
       {Object.keys(fileTree)
         .sort(sortFileTree(fileTree))
@@ -156,23 +156,22 @@ export const FileTreeView: FC<{
 }
 
 const useStyles = makeStyles((theme) => ({
-  fileTree: {},
   fileTreeItem: {
     overflow: "hidden",
     userSelect: "none",
 
-    "&:focus": {
-      "& > .MuiTreeItem-content": {
-        background: "rgba(255, 255, 255, 0.1)",
-      },
+    "&:focus:not(.active) > .MuiTreeItem-content": {
+      background: theme.palette.action.hover,
+      color: theme.palette.text.primary,
     },
-    "& > .MuiTreeItem-content:hover": {
-      background: theme.palette.background.paperLight,
+
+    "&:not(:focus):not(.active) > .MuiTreeItem-content:hover": {
+      background: theme.palette.action.hover,
       color: theme.palette.text.primary,
     },
 
     "& > .MuiTreeItem-content": {
-      padding: "1px 16px",
+      padding: theme.spacing(0.25, 2),
       color: theme.palette.text.secondary,
 
       "& svg": {
@@ -182,16 +181,25 @@ const useStyles = makeStyles((theme) => ({
 
       "& > .MuiTreeItem-label": {
         marginLeft: 4,
-        fontSize: 14,
+        fontSize: 13,
         color: "inherit",
       },
     },
 
     "&.active": {
-      background: theme.palette.background.paper,
-
       "& > .MuiTreeItem-content": {
         color: theme.palette.text.primary,
+        background: colors.gray[13],
+        pointerEvents: "none",
+      },
+    },
+
+    "& .MuiTreeItem-group": {
+      marginLeft: 0,
+
+      // We need to find a better way to recursive padding here
+      "& .MuiTreeItem-content": {
+        paddingLeft: theme.spacing(5),
       },
     },
   },

diff --git a/site/src/components/TemplateVersionEditor/MonacoEditor.tsx b/site/src/components/TemplateVersionEditor/MonacoEditor.tsx
@@ -122,7 +122,7 @@ export const MonacoEditor: FC<{
           ],
           colors: {
             "editor.foreground": hslToHex(theme.palette.text.primary),
-            "editor.background": hslToHex(theme.palette.background.paper),
+            "editor.background": hslToHex(theme.palette.background.default),
           },
         })
         editor.updateOptions({