Refactor

coder · BrunoQuaresma · Oct 27, 2022 · Oct 27, 2022 · Oct 27, 2022 · Oct 27, 2022
commit 212c4efed668828de29a144dd6ab234e88959dda
@@ -1,5 +1,5 @@
-import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
+import { Stack } from "components/Stack/Stack"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { BaseIcon } from "./BaseIcon"
@@ -13,24 +13,29 @@ export const AppPreviewLink: FC<AppPreviewProps> = ({ app }) => {
   const styles = useStyles()
 
   return (
-    <Button
-      size="small"
-      startIcon={<BaseIcon app={app} />}
-      endIcon={<ShareIcon app={app} />}
-      className={styles.button}
+    <Stack
+      className={styles.appPreviewLink}
+      alignItems="center"
+      direction="row"
+      spacing={1}
     >
-      <span className={styles.appName}>{app.name}</span>
-    </Button>
+      <BaseIcon app={app} />
+      {app.name}
+      <ShareIcon app={app} />
+    </Stack>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
-  button: {
-    whiteSpace: "nowrap",
-    cursor: "default",
-  },
+  appPreviewLink: {
+    padding: theme.spacing(0.25, 1.5),
+    borderRadius: 9999,
+    border: `1px solid ${theme.palette.divider}`,
+    color: theme.palette.text.primary,
+    background: theme.palette.background.paper,
 
-  appName: {
-    marginRight: theme.spacing(1),
+    "& img, & svg": {
+      width: 14,
+    },
   },
 }))
@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { AppPreviewLink } from "components/AppLink/AppPreviewLink"
 import { FC } from "react"
+import { combineClasses } from "util/combineClasses"
 import { WorkspaceAgent } from "../../api/typesGenerated"
 import { Stack } from "../Stack/Stack"
 
@@ -23,22 +24,43 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
         <div className={styles.agentStatusWrapper}>
           <div className={styles.agentStatusPreview}></div>
         </div>
-        <Stack alignItems="baseline" direction="row">
-          <div className={styles.agentName}>{agent.name}</div>
-          <span className={styles.agentOS}>{agent.operating_system}</span>
-        </Stack>
-      </Stack>
+        <Stack
+          alignItems="baseline"
+          direction="row"
+          spacing={4}
+          className={styles.agentData}
+        >
+          <Stack direction="row" alignItems="baseline" spacing={1}>
+            <span>Agent:</span>
+            <span className={styles.agentDataValue}>{agent.name}</span>
+          </Stack>
 
-      <Stack
-        direction="row"
-        alignItems="center"
-        spacing={0.5}
-        wrap="wrap"
-        className={styles.appsColumn}
-      >
-        {agent.apps.map((app) => (
-          <AppPreviewLink key={app.name} app={app} />
-        ))}
+          <Stack direction="row" alignItems="baseline" spacing={1}>
+            <span>OS:</span>
+            <span
+              className={combineClasses([
+                styles.agentDataValue,
+                styles.agentOS,
+              ])}
+            >
+              {agent.operating_system}
+            </span>
+          </Stack>
+
+          <Stack direction="row" alignItems="baseline" spacing={1}>
+            <span>Apps:</span>
+            <Stack
+              direction="row"
+              alignItems="center"
+              spacing={0.5}
+              wrap="wrap"
+            >
+              {agent.apps.map((app) => (
+                <AppPreviewLink key={app.name} app={app} />
+              ))}
+            </Stack>
+          </Stack>
+        </Stack>
       </Stack>
     </Stack>
   )
@@ -92,7 +114,12 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.secondary,
   },
 
-  appsColumn: {
-    minWidth: "50%",
+  agentData: {
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+  },
+
+  agentDataValue: {
+    color: theme.palette.text.primary,
   },
 }))