change: widen the modal and improve visibility (#628)

Increase the log sheet modal width and also improve the visibility of the log that's being shown by using a darker color to highlight the table row and by decreasing the opacity of the sheet overlay. Closes #595
kernelci · Nov 29, 2024 · 3943e16 · 3943e16
1 parent 4a06d38
commit 3943e16
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 6 deletions.
diff --git a/dashboard/src/components/BootsTable/BootsTable.tsx b/dashboard/src/components/BootsTable/BootsTable.tsx
@@ -156,7 +156,7 @@ const TableRowComponent = ({
   getRowLink: (testId: TestHistory['id']) => LinkProps;
   openLogSheet: (index: number) => void;
 }): JSX.Element => {
-  const className = index === currentLog ? 'bg-lightBlue' : undefined;
+  const className = index === currentLog ? 'bg-sky-200' : undefined;
 
   return (
     <TableRow

diff --git a/dashboard/src/components/BuildsTable/BuildsTable.tsx b/dashboard/src/components/BuildsTable/BuildsTable.tsx
@@ -121,7 +121,7 @@ const TableRowComponent = ({
   onClickShowBuild: IAccordionItems['onClickShowBuild'];
   isExpanded: boolean;
 }): JSX.Element => {
-  const className = index === currentLog ? 'bg-lightBlue' : undefined;
+  const className = index === currentLog ? 'bg-sky-200' : undefined;
 
   return (
     <Fragment key={row.id}>

diff --git a/dashboard/src/components/Filter/CodeBlock.tsx b/dashboard/src/components/Filter/CodeBlock.tsx
@@ -72,7 +72,7 @@ const Code = ({
     <>
       <pre
         className={cn(
-          'w-full max-w-[calc(100vw_-_398px)] overflow-x-auto rounded-md bg-[#DDDDDD] p-4 font-mono text-[#767676]',
+          'w-full max-w-[100vw] overflow-x-auto rounded-md bg-[#DDDDDD] p-4 font-mono text-sm leading-4 text-[#767676]',
           className,
         )}
       >

diff --git a/dashboard/src/components/TestsTable/IndividualTestsTable.tsx b/dashboard/src/components/TestsTable/IndividualTestsTable.tsx
@@ -69,7 +69,7 @@ const TableRowComponent = ({
   currentLog?: number;
   openLogSheet: (index: number) => void;
 }): JSX.Element => {
-  const className = index === currentLog ? 'bg-lightBlue' : undefined;
+  const className = index === currentLog ? 'bg-sky-200' : undefined;
 
   const linkProps: LinkProps = useMemo(() => {
     return getRowLink(row.original.id);

diff --git a/dashboard/src/components/ui/sheet.tsx b/dashboard/src/components/ui/sheet.tsx
@@ -19,7 +19,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/60  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}

diff --git a/dashboard/src/pages/TreeDetails/Tabs/LogSheet.tsx b/dashboard/src/pages/TreeDetails/Tabs/LogSheet.tsx
@@ -122,7 +122,7 @@ export const LogSheet = ({
     { enabled: !!logUrl },
   );
   return (
-    <SheetContent className="flex w-[25rem] flex-col sm:w-full sm:max-w-[44rem]">
+    <SheetContent className="flex flex-col sm:w-full sm:max-w-[clamp(650px,75vw,1300px)]">
       <SheetHeader className="mb-3">
         <SheetTitle className="text-[1.75rem]">
           <FormattedMessage id="logSheet.title" />