refactor: Refactor resources colors and avatars (#4751)

site/src/components/BuildsTable/BuildAvatar.tsx

@@ -27,13 +27,13 @@ const StyledBadge = withStyles((theme) => ({
 
 const StyledAvatar = withStyles((theme) => ({
   root: {
-    background: theme.palette.background.paperLight,
+    background: theme.palette.divider,
     color: theme.palette.text.primary,
     border: `2px solid ${theme.palette.divider}`,
 
     "& svg": {
-      width: 24,
-      height: 24,
+      width: 18,
+      height: 18,
     },
   },
 }))(Avatar)

site/src/components/Resources/AgentStatus.tsx

@@ -75,6 +75,7 @@ const useStyles = makeStyles((theme) => ({
 
   connected: {
     backgroundColor: theme.palette.success.light,
+    boxShadow: `0 0 12px 0 ${theme.palette.success.light}`,
   },
 
   disconnected: {

site/src/components/Resources/ResourceAvatar.tsx

@@ -42,12 +42,11 @@ export const ResourceAvatar: React.FC<ResourceAvatarProps> = ({ resource }) => {
 
 const useStyles = makeStyles((theme) => ({
   resourceAvatar: {
-    color: theme.palette.info.contrastText,
-    backgroundColor: theme.palette.info.main,
+    backgroundColor: theme.palette.divider,
 
     "& img": {
-      width: 20,
-      height: 20,
+      width: 18,
+      height: 18,
     },
   },
 }))

site/src/components/Resources/ResourceCard.tsx

@@ -124,7 +124,9 @@ export const ResourceCard: FC<ResourceCardProps> = ({
                 className={styles.agentRow}
               >
                 <Stack direction="row" alignItems="baseline">
-                  <AgentStatus agent={agent} />
+                  <div className={styles.agentStatusWrapper}>
+                    <AgentStatus agent={agent} />
+                  </div>
                   <div>
                     <div className={styles.agentName}>{agent.name}</div>
                     <Stack
@@ -158,26 +160,6 @@ export const ResourceCard: FC<ResourceCardProps> = ({
                 >
                   {showApps && agent.status === "connected" && (
                     <>
-                      {applicationsHost !== undefined && (
-                        <PortForwardButton
-                          host={applicationsHost}
-                          workspaceName={workspace.name}
-                          agentId={agent.id}
-                          agentName={agent.name}
-                          username={workspace.owner_name}
-                        />
-                      )}
-                      {!hideSSHButton && (
-                        <SSHButton
-                          workspaceName={workspace.name}
-                          agentName={agent.name}
-                        />
-                      )}
-                      <TerminalLink
-                        workspaceName={workspace.name}
-                        agentName={agent.name}
-                        userName={workspace.owner_name}
-                      />
                       {agent.apps.map((app) => (
                         <AppLink
                           key={app.name}
@@ -193,6 +175,27 @@ export const ResourceCard: FC<ResourceCardProps> = ({
                           appSharingLevel={app.sharing_level}
                         />
                       ))}
+
+                      <TerminalLink
+                        workspaceName={workspace.name}
+                        agentName={agent.name}
+                        userName={workspace.owner_name}
+                      />
+                      {!hideSSHButton && (
+                        <SSHButton
+                          workspaceName={workspace.name}
+                          agentName={agent.name}
+                        />
+                      )}
+                      {applicationsHost !== undefined && (
+                        <PortForwardButton
+                          host={applicationsHost}
+                          workspaceName={workspace.name}
+                          agentId={agent.id}
+                          agentName={agent.name}
+                          username={workspace.owner_name}
+                        />
+                      )}
                     </>
                   )}
                   {showApps && agent.status === "connecting" && (
@@ -278,6 +281,12 @@ const useStyles = makeStyles((theme) => ({
     },
   },
 
+  agentStatusWrapper: {
+    width: theme.spacing(4.5),
+    display: "flex",
+    justifyContent: "center",
+  },
+
   agentName: {
     fontWeight: 600,
   },

site/src/theme/overrides.ts

@@ -58,15 +58,21 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         },
       },
       sizeSmall: {
-        padding: `0 12px`,
+        padding: `0 16px`,
         fontSize: 14,
         minHeight: 36,
+        borderRadius: 6,
       },
       iconSizeSmall: {
-        width: 16,
-        height: 16,
+        width: 14,
+        height: 14,
         marginLeft: "0 !important",
-        marginRight: 12,
+        marginRight: 8,
+
+        "& svg": {
+          width: 14,
+          height: 14,
+        },
       },
       outlined: {
         border: `1px solid ${palette.divider}`,