chore(site): Fix chromatic errors (#6301)

.github/workflows/ci.yaml

@@ -506,7 +506,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: "16.16.0"
 
       - name: Install node_modules
         run: ./scripts/yarn_install.sh
@@ -555,7 +555,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: "16.16.0"
 
       - name: Echo Go Cache Paths
         id: go-cache-paths
@@ -609,6 +609,10 @@ jobs:
           # only get 1 commit on shallow checkout.
           fetch-depth: 0
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "16.16.0"
+
       - name: Install dependencies
         run: cd site && yarn
 

site/package.json

@@ -44,7 +44,7 @@
     "@xstate/inspect": "0.6.5",
     "@xstate/react": "3.0.1",
     "axios": "0.26.1",
-    "canvas": "^2.11.0",
+    "canvas": "2.11.0",
     "chart.js": "3.9.1",
     "chartjs-adapter-date-fns": "3.0.0",
     "color-convert": "2.0.1",
@@ -61,12 +61,12 @@
     "jest-location-mock": "1.0.9",
     "just-debounce-it": "3.1.1",
     "lodash": "4.17.21",
-    "playwright": "^1.29.2",
+    "playwright": "1.29.2",
     "react": "18.2.0",
     "react-chartjs-2": "4.3.1",
     "react-color": "2.19.3",
     "react-dom": "18.2.0",
-    "react-headless-tabs": "^6.0.3",
+    "react-headless-tabs": "6.0.3",
     "react-helmet-async": "1.3.0",
     "react-i18next": "12.1.1",
     "react-markdown": "8.0.3",
@@ -121,10 +121,10 @@
     "eslint-plugin-unicorn": "44.0.0",
     "jest": "27.5.1",
     "jest-canvas-mock": "2.4.0",
-    "jest-esm-transformer": "^1.0.0",
+    "jest-esm-transformer": "1.0.0",
     "jest-runner-eslint": "1.1.0",
     "jest-websocket-mock": "2.4.0",
-    "monaco-editor": "^0.34.1",
+    "monaco-editor": "0.34.1",
     "msw": "0.47.0",
     "prettier": "2.8.1",
     "resize-observer": "1.0.4",

site/src/components/AppLink/AppLink.tsx

@@ -130,6 +130,11 @@ const useStyles = makeStyles((theme) => ({
 
   button: {
     whiteSpace: "nowrap",
+    backgroundColor: theme.palette.background.default,
+
+    "&:hover": {
+      backgroundColor: `${theme.palette.background.default} !important`,
+    },
   },
 
   unhealthyIcon: {

site/src/components/PaginationWidget/PageButton.tsx

@@ -21,6 +21,7 @@ export const PageButton = ({
   const styles = useStyles()
   return (
     <Button
+      variant="outlined"
       className={
         activePage === page
           ? `${styles.pageButton} ${styles.activePageButton}`

site/src/components/PaginationWidget/PaginationWidget.tsx

@@ -44,6 +44,7 @@ export const PaginationWidget = ({
     <Maybe condition={showWidget}>
       <div style={containerStyle} className={styles.defaultContainerStyles}>
         <Button
+          variant="outlined"
           className={styles.prevLabelStyles}
           aria-label="Previous page"
           disabled={firstPageActive}
@@ -82,6 +83,7 @@ export const PaginationWidget = ({
           </Cond>
         </ChooseOne>
         <Button
+          variant="outlined"
           aria-label="Next page"
           disabled={lastPageActive}
           onClick={() => send({ type: "NEXT_PAGE" })}

site/src/components/PortForwardButton/PortForwardButton.tsx

@@ -149,6 +149,7 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
   return (
     <>
       <Button
+        className={styles.button}
         startIcon={<OpenInNewOutlined />}
         size="small"
         ref={anchorRef}
@@ -208,4 +209,13 @@ const useStyles = makeStyles((theme) => ({
   form: {
     margin: theme.spacing(1.5, 0, 0),
   },
+
+  button: {
+    whiteSpace: "nowrap",
+    backgroundColor: theme.palette.background.default,
+
+    "&:hover": {
+      backgroundColor: `${theme.palette.background.default} !important`,
+    },
+  },
 }))

site/src/components/SSHButton/SSHButton.tsx

@@ -34,6 +34,7 @@ export const SSHButton: React.FC<React.PropsWithChildren<SSHButtonProps>> = ({
   return (
     <>
       <Button
+        className={styles.button}
         startIcon={<CloudIcon />}
         size="small"
         ref={anchorRef}
@@ -122,4 +123,13 @@ const useStyles = makeStyles((theme) => ({
   textHelper: {
     fontWeight: 400,
   },
+
+  button: {
+    whiteSpace: "nowrap",
+    backgroundColor: theme.palette.background.default,
+
+    "&:hover": {
+      backgroundColor: `${theme.palette.background.default} !important`,
+    },
+  },
 }))

site/src/components/SignInForm/OAuthSignInForm.tsx

@@ -42,7 +42,7 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
             disabled={isLoading}
             fullWidth
             type="submit"
-            variant="contained"
+            variant="outlined"
           >
             {Language.githubSignIn}
           </Button>
@@ -71,7 +71,7 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
             disabled={isLoading}
             fullWidth
             type="submit"
-            variant="contained"
+            variant="outlined"
           >
             {authMethods.oidc.signInText || Language.oidcSignIn}
           </Button>

site/src/components/SignInForm/PasswordSignInForm.tsx

@@ -88,7 +88,7 @@ export const PasswordSignInForm: FC<PasswordSignInFormProps> = ({
             loading={isLoading}
             fullWidth
             type="submit"
-            variant="contained"
+            variant="outlined"
           >
             {isLoading ? "" : Language.passwordSignIn}
           </LoadingButton>

site/src/components/SignInForm/SignInForm.tsx

@@ -150,7 +150,7 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
         <Button
           fullWidth
           onClick={() => setShowPasswordAuth(true)}
-          variant="contained"
+          variant="outlined"
           startIcon={<EmailIcon className={styles.icon} />}
         >
           {loginPageTranslation.t("showPassword")}

site/src/components/TerminalLink/TerminalLink.tsx

@@ -51,15 +51,28 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
         )
       }}
     >
-      <Button startIcon={<ComputerIcon />} size="small">
+      <Button
+        startIcon={<ComputerIcon />}
+        size="small"
+        className={styles.button}
+      >
         {Language.linkText}
       </Button>
     </Link>
   )
 }
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   link: {
     textDecoration: "none !important",
   },
+
+  button: {
+    whiteSpace: "nowrap",
+    backgroundColor: theme.palette.background.default,
+
+    "&:hover": {
+      backgroundColor: `${theme.palette.background.default} !important`,
+    },
+  },
 }))

site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx

@@ -1,3 +1,4 @@
+import { makeStyles } from "@material-ui/core/styles"
 import Button from "@material-ui/core/Button"
 import { getApiKey } from "api/api"
 import { VSCodeIcon } from "components/Icons/VSCodeIcon"
@@ -14,12 +15,14 @@ export const VSCodeDesktopButton: FC<
   PropsWithChildren<VSCodeDesktopButtonProps>
 > = ({ userName, workspaceName, agentName, folderPath }) => {
   const [loading, setLoading] = useState(false)
+  const styles = useStyles()
 
   return (
     <Button
       startIcon={<VSCodeIcon />}
       size="small"
       disabled={loading}
+      className={styles.button}
       onClick={() => {
         setLoading(true)
         getApiKey()
@@ -51,3 +54,14 @@ export const VSCodeDesktopButton: FC<
     </Button>
   )
 }
+
+const useStyles = makeStyles((theme) => ({
+  button: {
+    whiteSpace: "nowrap",
+    backgroundColor: theme.palette.background.default,
+
+    "&:hover": {
+      backgroundColor: `${theme.palette.background.default} !important`,
+    },
+  },
+}))

site/src/pages/SetupPage/SetupPageView.tsx

@@ -121,7 +121,7 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({
           </div>
           <LoadingButton
             fullWidth
-            variant="contained"
+            variant="outlined"
             loading={isLoading}
             type="submit"
           >