refactor(site): make cosmetic changes on agent logs (#11601)

BrunoQuaresma · web-flow · commit 8181c9f34960 · 2024-01-12T17:09:36.000-03:00
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
@@ -318,20 +318,22 @@ export const AgentRow: FC<AgentRowProps> = ({
                         <img
                           src={logSource.icon}
                           alt=""
-                          width={16}
-                          height={16}
+                          width={14}
+                          height={14}
                           css={{
                             marginRight: 8,
+                            flexShrink: 0,
                           }}
                         />
                       );
                     } else {
                       icon = (
                         <div
                           css={{
-                            width: 16,
-                            height: 16,
+                            width: 14,
+                            height: 14,
                             marginRight: 8,
+                            flexShrink: 0,
                             background: determineScriptDisplayColor(
                               logSource.display_name,
                             ),
@@ -361,34 +363,36 @@ export const AgentRow: FC<AgentRowProps> = ({
                       icon = (
                         <div
                           css={{
-                            minWidth: 16,
-                            width: 16,
-                            height: 16,
+                            width: 14,
+                            height: 14,
                             marginRight: 8,
                             display: "flex",
                             justifyContent: "center",
                             position: "relative",
+                            flexShrink: 0,
                           }}
                         >
                           <div
-                            css={{
+                            className="dashed-line"
+                            css={(theme) => ({
                               height: nextChangesSource ? "50%" : "100%",
-                              width: 4,
-                              background: "hsl(222, 31%, 25%)",
+                              width: 2,
+                              background: theme.experimental.l1.outline,
                               borderRadius: 2,
-                            }}
+                            })}
                           />
                           {nextChangesSource && (
                             <div
-                              css={{
-                                height: 4,
+                              className="dashed-line"
+                              css={(theme) => ({
+                                height: 2,
                                 width: "50%",
                                 top: "calc(50% - 2px)",
                                 left: "calc(50% - 1px)",
-                                background: "hsl(222, 31%, 25%)",
+                                background: theme.experimental.l1.outline,
                                 borderRadius: 2,
                                 position: "absolute",
-                              }}
+                              })}
                             />
                           )}
                         </div>
diff --git a/site/src/components/WorkspaceBuildLogs/Logs.tsx b/site/src/components/WorkspaceBuildLogs/Logs.tsx
@@ -121,7 +121,7 @@ const styles = {
     wordBreak: "break-all",
     display: "flex",
     alignItems: "center",
-    fontSize: 14,
+    fontSize: 13,
     color: theme.palette.text.primary,
     fontFamily: MONOSPACE_FONT_FAMILY,
     height: "auto",
@@ -131,14 +131,29 @@ const styles = {
 
     "&.error": {
       backgroundColor: theme.experimental.roles.error.background,
+      color: theme.experimental.roles.error.text,
+
+      "& .dashed-line": {
+        backgroundColor: theme.experimental.roles.error.outline,
+      },
     },
 
     "&.debug": {
       backgroundColor: theme.experimental.roles.info.background,
+      color: theme.experimental.roles.info.text,
+
+      "& .dashed-line": {
+        backgroundColor: theme.experimental.roles.info.outline,
+      },
     },
 
     "&.warn": {
       backgroundColor: theme.experimental.roles.warning.background,
+      color: theme.experimental.roles.warning.text,
+
+      "& .dashed-line": {
+        backgroundColor: theme.experimental.roles.warning.outline,
+      },
     },
   }),
   space: {
@@ -153,8 +168,10 @@ const styles = {
     display: "inline-block",
     color: theme.palette.text.secondary,
   }),
-  number: {
+  number: (theme) => ({
     width: 32,
     textAlign: "right",
-  },
+    flexShrink: 0,
+    color: theme.palette.text.disabled,
+  }),
 } satisfies Record<string, Interpolation<Theme>>;
