fix: FIT-159: Storage error logs modal not optimized for dark mode (#7867)

Co-authored-by: ricardoantoniocm <[email protected]>

Author: ricardoantoniocm

web/apps/labelstudio/src/components/Card/Card.scss

@@ -12,7 +12,7 @@
     font-size: 16px;
     line-height: 18px;
     justify-content: space-between;
-    box-shadow: 0 1px 0 0 rgb(0 0 0 / 10%);
+    border-bottom: 1px solid var(--color-neutral-border);
 
     &-content {
       display: flex;

web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageCard.jsx

@@ -63,13 +63,13 @@ export const StorageCard = ({ rootClass, target, storage, onEditStorage, onDelet
         storageTypes={storageTypes}
       />
       <div className={rootClass.elem("sync")}>
-        <div>
+        <div className="mt-base">
           <Button
             look="outlined"
             waiting={syncing}
             onClick={startSync}
             disabled={notSyncedYet}
-            aria-label="Sync storage"
+            aria-label="Sync Storage"
           >
             Sync Storage
           </Button>

web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageSummary.jsx

@@ -1,9 +1,21 @@
-import { Button, Space, Tooltip } from "@humansignal/ui";
 import { format } from "date-fns/esm";
+import { Button, CodeBlock, IconFileCopy, Space, Tooltip } from "@humansignal/ui";
 import { DescriptionList } from "../../../components/DescriptionList/DescriptionList";
 import { modal } from "../../../components/Modal/Modal";
 import { Oneof } from "../../../components/Oneof/Oneof";
 import { getLastTraceback } from "../../../utils/helpers";
+import { useCopyText } from "@humansignal/core/lib/hooks/useCopyText";
+
+// Component to handle copy functionality within the modal
+const CopyButton = ({ msg }) => {
+  const [copyText, copied] = useCopyText(msg);
+
+  return (
+    <Button variant="neutral" icon={<IconFileCopy />} onClick={copyText} disabled={copied} className="w-[7rem]">
+      {copied ? "Copied!" : "Copy"}
+    </Button>
+  );
+};
 
 export const StorageSummary = ({ target, storage, className, storageTypes = [] }) => {
   const storageStatus = storage.status.replace(/_/g, " ").replace(/(^\w)/, (match) => match.toUpperCase());
@@ -36,34 +48,34 @@ export const StorageSummary = ({ target, storage, className, storageTypes = [] }
       `storage ${storage.id} in project ${storage.project} and job ${storage.last_sync_job}:\n\n` +
       `${getLastTraceback(storage.traceback)}\n\n` +
       `meta = ${JSON.stringify(storage.meta)}\n`;
-    const targetType = target === "export" ? "Target" : "Source";
-
-    modal({
-      title: "Storage error logs",
-      body: (
-        <>
-          <pre className="bg-neutral-surface-inset text-neutral-content-subtler p-base mb-base rounded-md text-body-smaller overflow-scroll">
-            {msg}
-          </pre>
-          <Space spread>
-            <Button
-              size="small"
-              look="outlined"
-              onClick={() => {
-                navigator.clipboard.writeText(msg);
-              }}
-            >
-              Copy
+
+    const currentModal = modal({
+      title: "Storage Sync Error Log",
+      body: <CodeBlock code={msg} variant="negative" className="max-h-[50vh] overflow-y-auto" />,
+      footer: (
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          {!window.APP_SETTINGS?.whitelabel_is_active && (
+            <div>
+              <>
+                <a
+                  href="https://labelstud.io/guide/storage.html#Troubleshooting"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  aria-label="Learn more about cloud storage troubleshooting"
+                >
+                  See docs
+                </a>{" "}
+                for troubleshooting tips on cloud storage connections.
+              </>
+            </div>
+          )}
+          <Space>
+            <CopyButton msg={msg} />
+            <Button variant="primary" className="w-[7rem]" onClick={() => currentModal.close()}>
+              Close
             </Button>
-            <a
-              target="_blank"
-              rel="noreferrer"
-              href={`https://labelstud.io/guide/storage.html#${targetType}-storage-permissions`}
-            >
-              Check {targetType} Storage documentation
-            </a>
           </Space>
-        </>
+        </div>
       ),
       style: { width: "700px" },
       optimize: false,
@@ -97,8 +109,11 @@ export const StorageSummary = ({ target, storage, className, storageTypes = [] }
           ].join("\n")}
         >
           {storageStatus === "Failed" ? (
-            <span style={{ cursor: "pointer", borderBottom: "1px dashed gray" }} onClick={handleButtonClick}>
-              Failed
+            <span
+              className="cursor-pointer border-b border-dashed border-negative-border-subtle text-negative-content"
+              onClick={handleButtonClick}
+            >
+              Failed (View Logs)
             </span>
           ) : (
             storageStatus

web/libs/ui/src/lib/Card/Card.module.scss

@@ -1,7 +1,7 @@
 .card {
   border-radius: 5px;
   background-color: var(--color-neutral-background);
-  border: 1px solid var(--sand_300);
+  border: 1px solid var(--color-neutral-border);
 
 
   &:not(:first-child) {
@@ -24,7 +24,7 @@
   line-height: 18px;
   align-items: center;
   justify-content: space-between;
-  box-shadow: 0 1px 0 0 rgb(0 0 0 / 10%);
+  border-bottom: 1px solid var(--color-neutral-border);
 }
 
 .header.headerNoUnderline {

web/libs/ui/src/lib/code-block/code-block.tsx

@@ -1,15 +1,31 @@
+import { cnm } from "@humansignal/ui";
+
 export function CodeBlock({
   code,
   className,
+  variant = "default",
 }: {
   title?: string;
   description?: string;
   code: string;
   className?: string;
+  variant?: "default" | "warning" | "negative";
 }) {
+  const variantStyles = {
+    default: "bg-neutral-surface border-neutral-border",
+    warning: "bg-warning-background border-warning-border-subtle",
+    negative: "bg-negative-background border-negative-border-subtle",
+  };
+
   return (
-    <div className={`whitespace-pre-wrap font-mono mt-2 p-3 bg-neutral-surface rounded-md ${className || ""}`}>
-      {code.trim()}
+    <div
+      className={cnm(
+        "p-3 rounded-small border scrollbar-thin scrollbar-thumb-neutral-border-bold scrollbar-track-transparent",
+        variantStyles[variant],
+        className,
+      )}
+    >
+      <pre className="whitespace-pre-wrap">{code.trim()}</pre>
     </div>
   );
 }