NEOS-534: updated activity sub table styling (#925)

nucleuscloud · Dec 19, 2023 · c64b673 · c64b673
1 parent 79665b1
commit c64b673
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 23 deletions.
diff --git a/frontend/apps/web/app/[account]/jobs/[id]/components/NextRuns.tsx b/frontend/apps/web/app/[account]/jobs/[id]/components/NextRuns.tsx
@@ -39,18 +39,20 @@ export default function JobNextRuns({ jobId, status }: Props): ReactElement {
         </Alert>
       ) : (
         <div>
-          <Table className="pt-5">
+          <Table>
             <TableHeader className="bg-gray-100 dark:bg-gray-800">
               <TableRow>
-                <TableHead>Upcoming Runs</TableHead>
+                <TableHead className="pl-4">Upcoming Runs</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {(status && status == JobStatus.PAUSED) ||
               data?.nextRuns?.nextRunTimes.length == 0 ? (
-                <TableRow>
+                <TableRow className="hover:bg-background">
                   <TableCell>
-                    <span className="font-medium">No upcoming runs</span>
+                    <span className="font-medium justify-center flex pt-20">
+                      No upcoming runs
+                    </span>
                   </TableCell>
                 </TableRow>
               ) : (

diff --git a/frontend/apps/web/app/[account]/jobs/[id]/components/RecentRuns.tsx b/frontend/apps/web/app/[account]/jobs/[id]/components/RecentRuns.tsx
@@ -75,7 +75,7 @@ export default function JobRecentRuns({ jobId }: Props): ReactElement {
       ) : (
         <div>
           <div className="flex flex-row items-center px-2">
-            <CardTitle className="py-6">Recent Job Runs</CardTitle>
+            <CardTitle className="py-6 pl-4">Recent Job Runs</CardTitle>
             <Button
               className={
                 isValidating || jobRunsValidating ? 'animate-spin' : ''
@@ -89,9 +89,9 @@ export default function JobRecentRuns({ jobId }: Props): ReactElement {
             </Button>
           </div>
           <Table className="pt-5">
-            <TableHeader className="bg-gray-100 dark:bg-gray-800">
+            <TableHeader className="bg-gray-100 dark:bg-gray-800 ">
               <TableRow>
-                <TableHead>Run Id</TableHead>
+                <TableHead className="pl-6">Run Id</TableHead>
                 <TableHead>Start At</TableHead>
                 <TableHead>Completed At</TableHead>
                 <TableHead>Status</TableHead>
@@ -103,7 +103,7 @@ export default function JobRecentRuns({ jobId }: Props): ReactElement {
                 const jobRun = jobRunsIdMap[r.jobRunId];
                 return (
                   <TableRow key={r.jobRunId}>
-                    <TableCell>
+                    <TableCell className="pl-6">
                       {jobRun ? (
                         <Link
                           className="hover:underline"

diff --git a/frontend/apps/web/app/[account]/jobs/[id]/components/ScheduleCard.tsx b/frontend/apps/web/app/[account]/jobs/[id]/components/ScheduleCard.tsx
@@ -108,8 +108,8 @@ export default function JobScheduleCard({ job, mutate }: Props): ReactElement {
               )}
             />
           </CardContent>
-          <CardFooter className="bg-muted">
-            <div className="flex flex-row items-center justify-between w-full mt-4">
+          <CardFooter className="bg-muted flex py-2 justify-center">
+            <div className="flex flex-row items-center justify-between w-full">
               <p className="text-muted-foreground text-sm">{msg}</p>
               <Button type="submit" disabled={!form.formState.isDirty}>
                 Save

diff --git a/frontend/apps/web/app/[account]/jobs/[id]/page.tsx b/frontend/apps/web/app/[account]/jobs/[id]/page.tsx
@@ -38,11 +38,11 @@ export default function Page({ params }: PageProps): ReactElement {
   return (
     <div className="job-details-container">
       <div className="flex flex-col gap-5">
-        <div className="flex flex-row gap-4">
-          <div className="flex-grow basis-3/4 h-60">
+        <div className="flex flex-row gap-5">
+          <div className="flex-grow basis-3/4">
             <JobScheduleCard job={data?.job} mutate={mutate} />
           </div>
-          <div className="flex-grow basis-1/4 overflow-y-auto h-60 rounded-xl border border-gray-300 dark:border-gray-700">
+          <div className="flex-grow basis-1/4 overflow-y-auto rounded-xl border border-card-border">
             <JobNextRuns jobId={id} status={jobStatus?.status} />
           </div>
         </div>

diff --git a/frontend/apps/web/app/[account]/runs/[id]/components/JobRunActivityTable/data-table.tsx b/frontend/apps/web/app/[account]/runs/[id]/components/JobRunActivityTable/data-table.tsx
@@ -73,8 +73,8 @@ export function DataTable({ columns, data, isError }: DataTableProps) {
   });
 
   return (
-    <div className="space-y-4">
-      <div className="rounded-md border">
+    <div className="space-y-4 rounded-md border overflow-hidden dark:border-gray-700 ">
+      <div className="rounded-md border overflow-hidden dark:border-gray-700 ">
         <Table>
           <TableHeader className="bg-gray-100 dark:bg-gray-800">
             {table.getHeaderGroups().map((headerGroup) => (
@@ -144,9 +144,9 @@ function renderSubComponent(row: Row<JobRunEvent>): React.ReactElement {
   const isError = row.original.tasks.some((t) => t.error);
   return (
     <div className="p-5">
-      <div className="rounded-md border">
+      <div className="rounded-md border overflow-hidden dark:border-gray-700 ">
         <Table>
-          <TableHeader className="border-b bg-gray-100">
+          <TableHeader className="border-b dark:border-b-gray-700 bg-gray-100 dark:bg-gray-800">
             <TableRow>
               <TableHead>Id</TableHead>
               <TableHead>Type</TableHead>

diff --git a/frontend/apps/web/components/MainNav.tsx b/frontend/apps/web/components/MainNav.tsx
@@ -41,7 +41,7 @@ export function MainNav({
         <Link
           href={`/${account?.name}/jobs`}
           className={cn(
-            'text-sm font-medium text-muted-foreground transition-colors hover:text-primary',
+            'text-sm font-medium text-muted-foreground transition-colors hover:text-white',
             highlightPathName('/jobs')
               ? 'text-foreground'
               : 'text-foreground/60'
@@ -52,7 +52,7 @@ export function MainNav({
         <Link
           href={`/${account?.name}/runs`}
           className={cn(
-            'text-sm font-medium text-muted-foreground transition-colors hover:text-primary',
+            'text-sm font-medium text-muted-foreground transition-colors hover:text-white',
             highlightPathName('/run') ? 'text-foreground' : 'text-foreground/60'
           )}
         >
@@ -61,7 +61,7 @@ export function MainNav({
         <Link
           href={`/${account?.name}/transformers`}
           className={cn(
-            'text-sm font-medium text-muted-foreground transition-colors hover:text-primary',
+            'text-sm font-medium text-muted-foreground transition-colors hover:text-white',
             highlightPathName('/transformer')
               ? 'text-foreground'
               : 'text-foreground/60'
@@ -72,7 +72,7 @@ export function MainNav({
         <Link
           href={`/${account?.name}/connections`}
           className={cn(
-            'text-sm font-medium text-muted-foreground transition-colors hover:text-primary',
+            'text-sm font-medium text-muted-foreground transition-colors hover:text-white',
             highlightPathName('connection')
               ? 'text-foreground'
               : 'text-foreground/60'
@@ -84,7 +84,7 @@ export function MainNav({
         <Link
           href={`/${account?.name}/settings`}
           className={cn(
-            'text-sm font-medium text-muted-foreground transition-colors hover:text-primary',
+            'text-sm font-medium text-muted-foreground transition-colors hover:text-white',
             highlightPathName('/settings')
               ? 'text-foreground'
               : 'text-foreground/60'

diff --git a/frontend/apps/web/components/SiteHeader.tsx b/frontend/apps/web/components/SiteHeader.tsx
@@ -19,7 +19,7 @@ export default function SiteHeader() {
     'p-0 px-2'
   );
   return (
-    <header className="supports-backdrop-blur:bg-background/60 sticky top-0 z-50 w-full border-b dark:border-b-gray-700 bg-background backdrop-blur">
+    <header className="supports-backdrop-blur:bg-background/60 sticky top-0 z-50 w-full border-b dark:border-b-gray-700 bg-background dark:hover:text-white backdrop-blur">
       <div className="container flex h-14 items-center">
         <MainNav />
         <MobileNav />