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,11 +308,19 @@ export function DataTable<TData, TValue>({
         </TableHeader>
         <TableBody>
           {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((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={() => {
@@ -337,7 +345,8 @@ export function DataTable<TData, TValue>({
                     </TableRow>
                   </ContextMenuTrigger>
                 </ContextMenu>
-            ))
+              )
+            })
           ) : (
             <TableRow>
               <TableCell colSpan={columns.length} className="h-24 text-center">