conditonal row styling

src/app/login/page.tsx

@@ -44,7 +44,7 @@ export default function LoginForm() {
 
 
 	return (
-		<>
+		<main className="flex flex-col items-center justify-around h-60 w-26">
 			{submitted ? <div className="flex flex-col items-center justify-around h-30 w-26">
 				<h1>Logging in...</h1>
 				<Button asChild>
@@ -52,7 +52,7 @@ export default function LoginForm() {
 				</Button>
 			</div> :
 				<Form {...form}>
-					<form onSubmit={onSubmit} className="mt-20 flex flex-col items-center space-y-6">
+					<form onSubmit={onSubmit} className="flex flex-col items-center space-y-6">
 						<FormField
 							control={form.control}
 							name="email"
@@ -83,7 +83,7 @@ export default function LoginForm() {
 					</form>
 				</Form>
 			}
-		</>
+		</main>
 
 	)
 }

src/app/submission/columns.tsx

@@ -5,7 +5,6 @@ import { Button } from "@/components/ui/button"
 import { SubComplete } from "./page"
 import { selectCol } from "app/ui/tables/selectColumn"
 import TitleContainer from "app/ui/titleContainer"
-import { CalendarArrowUp } from "lucide"
 
 
 

src/app/tailwind.css

@@ -745,6 +745,10 @@ body {
   margin-bottom: auto;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -781,10 +785,6 @@ body {
   margin-top: 1.5rem;
 }
 
-.mb-6 {
-  margin-bottom: 1.5rem;
-}
-
 .block {
   display: block;
 }
@@ -854,6 +854,10 @@ body {
   height: 1.25rem;
 }
 
+.h-60 {
+  height: 15rem;
+}
+
 .h-7 {
   height: 1.75rem;
 }
@@ -887,10 +891,6 @@ body {
   height: 100vh;
 }
 
-.h-60 {
-  height: 15rem;
-}
-
 .max-h-96 {
   max-height: 24rem;
 }
@@ -976,14 +976,6 @@ body {
   width: 100vw;
 }
 
-.w-14 {
-  width: 3.5rem;
-}
-
-.w-20 {
-  width: 5rem;
-}
-
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -1141,10 +1133,6 @@ body {
   justify-content: space-around;
 }
 
-.justify-items-center {
-  justify-items: center;
-}
-
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1376,6 +1364,11 @@ body {
   background-color: transparent;
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .fill-current {
   fill: currentColor;
 }
@@ -1632,10 +1625,6 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.underline {
-  text-decoration-line: underline;
-}
-
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -1686,6 +1675,10 @@ body {
   outline-style: solid;
 }
 
+.ring-primary {
+  --tw-ring-color: hsl(var(--primary));
+}
+
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }

src/app/ui/tables/data-table.tsx

@@ -308,36 +308,45 @@ export function DataTable<TData, TValue>({
         </TableHeader>
         <TableBody>
           {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <ContextMenu key={row.id + "contextMenu"}>
-                <ContextMenuTrigger asChild>
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                    tabIndex={0}
-                    onDoubleClick={() => {
-                      if (tableName === "sub") {
-                        openEditDialog(row)
+            table.getRowModel().rows.map((row) => {
+              const classes = () => {
+                const classes = []
+                if (row.getValue('response') === "Pending") classes.push("bg-accent")
+                if (row.getValue('response') === "Acceptance") classes.push("bg-primary")
+                return classes.join(" ")
+              }
+              return (
+                <ContextMenu key={row.id + "contextMenu"}>
+                  <ContextMenuTrigger asChild>
+                    <TableRow
+                      key={row.id}
+                      className={classes()}
+                      data-state={row.getIsSelected() && "selected"}
+                      tabIndex={0}
+                      onDoubleClick={() => {
+                        if (tableName === "sub") {
+                          openEditDialog(row)
+                        }
                       }
-                    }
-                    }
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </TableCell>
-                    ))}
-                    <FormContextMenu
-                      key={"formContextMenu" + row.id}
-                      row={row}
-                      table={table}
-                      openEditDialog={openEditDialog}
-                      openDeleteDialog={openDeleteDialog}
-                    />
-                  </TableRow>
-                </ContextMenuTrigger>
-              </ContextMenu>
-            ))
+                      }
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </TableCell>
+                      ))}
+                      <FormContextMenu
+                        key={"formContextMenu" + row.id}
+                        row={row}
+                        table={table}
+                        openEditDialog={openEditDialog}
+                        openDeleteDialog={openDeleteDialog}
+                      />
+                    </TableRow>
+                  </ContextMenuTrigger>
+                </ContextMenu>
+              )
+            })
           ) : (
             <TableRow>
               <TableCell colSpan={columns.length} className="h-24 text-center">