refactor: Make the applications more notable in the resources table (coder#2774)

BrunoQuaresma · web-flow · commit 9776e66ff967 · 2022-07-01T10:48:48.000-03:00
diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
@@ -1,9 +1,9 @@
+import Button from "@material-ui/core/Button"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import ComputerIcon from "@material-ui/icons/Computer"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
-import { combineClasses } from "../../util/combineClasses"
 
 export interface AppLinkProps {
   userName: TypesGen.User["username"]
@@ -26,36 +26,18 @@ export const AppLink: FC<AppLinkProps> = ({ userName, workspaceName, appName, ap
         window.open(href, appName, "width=900,height=600")
       }}
     >
-      {appIcon ? (
-        <img
-          className={combineClasses([styles.icon, appIcon === "" ? "empty" : ""])}
-          alt={`${appName} Icon`}
-          src={appIcon || ""}
-        />
-      ) : (
-        <ComputerIcon className={styles.icon} />
-      )}
-      {appName}
+      <Button
+        size="small"
+        startIcon={appIcon ? <img alt={`${appName} Icon`} src={appIcon} /> : <ComputerIcon />}
+      >
+        {appName}
+      </Button>
     </Link>
   )
 }
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   link: {
-    color: theme.palette.text.secondary,
-    display: "flex",
-    alignItems: "center",
-  },
-
-  icon: {
-    width: 16,
-    height: 16,
-    marginRight: theme.spacing(1.5),
-
-    // If no icon is provided we still want the padding on the left
-    // to occur.
-    "&.empty": {
-      opacity: 0,
-    },
+    textDecoration: "none !important",
   },
 }))
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -102,15 +102,16 @@ export const Resources: FC<ResourcesProps> = ({
 
                     <TableCell className={styles.agentColumn}>
                       {agent.name}
-                      <span className={styles.operatingSystem}>{agent.operating_system}</span>
-                      <span style={{ color: agentStatus.color }}>{agentStatus.status}</span>
+                      <div className={styles.agentInfo}>
+                        <span className={styles.operatingSystem}>{agent.operating_system}</span>
+                        <span style={{ color: agentStatus.color }}>{agentStatus.status}</span>
+                      </div>
                     </TableCell>
                     {canUpdateWorkspace && (
                       <TableCell>
-                        <Stack>
+                        <div className={styles.accessLinks}>
                           {agent.status === "connected" && (
                             <TerminalLink
-                              className={styles.accessLink}
                               workspaceName={workspace.name}
                               agentName={agent.name}
                               userName={workspace.owner_name}
@@ -126,7 +127,7 @@ export const Resources: FC<ResourcesProps> = ({
                                 workspaceName={workspace.name}
                               />
                             ))}
-                        </Stack>
+                        </div>
                       </TableCell>
                     )}
                   </TableRow>
@@ -165,23 +166,22 @@ const useStyles = makeStyles((theme) => ({
     paddingLeft: `${theme.spacing(2)}px !important`,
   },
 
-  accessLink: {
-    color: theme.palette.text.secondary,
+  agentInfo: {
     display: "flex",
-    alignItems: "center",
-
-    "& svg": {
-      width: 16,
-      height: 16,
-      marginRight: theme.spacing(1.5),
-    },
-  },
-
-  operatingSystem: {
+    gap: theme.spacing(1.5),
     fontSize: 14,
     color: theme.palette.text.secondary,
     marginTop: theme.spacing(0.5),
+  },
+
+  operatingSystem: {
     display: "block",
     textTransform: "capitalize",
   },
+
+  accessLinks: {
+    display: "flex",
+    gap: theme.spacing(0.5),
+    flexWrap: "wrap",
+  },
 }))
diff --git a/site/src/components/TerminalLink/TerminalLink.tsx b/site/src/components/TerminalLink/TerminalLink.tsx
@@ -1,3 +1,4 @@
+import Button from "@material-ui/core/Button"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import ComputerIcon from "@material-ui/icons/Computer"
@@ -44,25 +45,15 @@ export const TerminalLink: FC<TerminalLinkProps> = ({
         window.open(href, Language.terminalTitle(generateRandomString(12)), "width=900,height=600")
       }}
     >
-      <ComputerIcon className={styles.icon} />
-      {Language.linkText}
+      <Button startIcon={<ComputerIcon />} size="small">
+        {Language.linkText}
+      </Button>
     </Link>
   )
 }
 
-// Replicating these from accessLink style from Resources component until we
-// define if we want these styles coming from the parent or having a
-// ResourceLink component for that
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   link: {
-    color: theme.palette.text.secondary,
-    display: "flex",
-    alignItems: "center",
-  },
-
-  icon: {
-    width: 16,
-    height: 16,
-    marginRight: theme.spacing(1.5),
+    textDecoration: "none !important",
   },
 }))
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
@@ -32,6 +32,17 @@ export const getOverrides = (palette: PaletteOptions) => {
           backgroundColor: "#000000",
         },
       },
+      sizeSmall: {
+        padding: `0 12px`,
+        fontSize: 14,
+        minHeight: 36,
+      },
+      iconSizeSmall: {
+        width: 16,
+        height: 16,
+        marginLeft: "0 !important",
+        marginRight: 12,
+      },
     },
     MuiTableHead: {
       root: {
