fix: update styles for unavailable logs

coder · Parkreiner · Jul 3, 2024 · Jul 1, 2024 · Jul 1, 2024 · Jul 1, 2024
commit fa06515a869c20f05f4790eac37008c110bbc140
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/DownloadLogsDialog.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/DownloadLogsDialog.tsx
@@ -1,9 +1,10 @@
 import { useTheme, type Interpolation, type Theme } from "@emotion/react";
 import Skeleton from "@mui/material/Skeleton";
+import ErrorIcon from "@mui/icons-material/ErrorOutline";
 import { saveAs } from "file-saver";
 import JSZip from "jszip";
 import { type FC, useMemo, useState, useRef, useEffect } from "react";
 import { UseQueryOptions, useQueries, useQuery } from "react-query";
 import { agentLogs, buildLogs } from "api/queries/workspaces";
 import type {
  Workspace,
@@ -16,7 +17,7 @@
 } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Stack } from "components/Stack/Stack";
 import { ErrorAlert } from "components/Alert/ErrorAlert";

 const BLOB_SIZE_UNITS = ["B", "KB", "MB", "GB", "TB"] as const;

@@ -194,6 +195,7 @@
 }>;
 
 const DownloadingItem: FC<DownloadingItemProps> = ({ file, giveUpTimeMs }) => {
+  const theme = useTheme();
   const [isWaiting, setIsWaiting] = useState(true);
   useEffect(() => {
     if (giveUpTimeMs === undefined || file.blob !== undefined) {
@@ -211,14 +213,28 @@
 
   return (
     <li css={styles.listItem}>
-      <span css={styles.listItemPrimary}>{file.name}</span>
+      <span
+        css={[
+          styles.listItemPrimary,
+          !isWaiting && { color: theme.palette.text.disabled },
+        ]}
+      >
+        {file.name}
+      </span>
+
       <span css={styles.listItemSecondary}>
         {file.blob ? (
           humanBlobSize(file.blob.size)
         ) : isWaiting ? (
           <Skeleton variant="text" width={48} height={12} />
         ) : (
-          <p css={styles.notAvailableText}>N/A</p>
+          <div css={styles.notAvailableText}>
+            <span aria-hidden>
+              <ErrorIcon fontSize={"inherit"} />
+            </span>
+
+            <p>N/A</p>
+          </div>
         )}
       </span>
     </li>
@@ -261,6 +277,20 @@
   },
 
   notAvailableText: (theme) => ({
-    color: theme.palette.error.main,
+    display: "flex",
+    flexFlow: "row nowrap",
+    alignItems: "center",
+    columnGap: "4px",
+
+    "& > span": {
+      maxHeight: "fit-content",
+      display: "flex",
+      alignItems: "center",
+      color: theme.palette.error.light,
+    },
+
+    "& > p": {
+      opacity: "80%",
+    },
   }),
 } satisfies Record<string, Interpolation<Theme>>;