style settings a bit

frontend/package.json

@@ -14,6 +14,7 @@
     "@it-incubator/prettier-config": "^0.1.2",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",

frontend/src/components/settings-dialog.tsx

@@ -9,6 +9,7 @@ import {
   DialogTitle,
   DialogTrigger,
   Input,
+  Label,
   Switch,
   Table,
   TableBody,
@@ -63,63 +64,89 @@ export function SettingsDialog() {
           </DialogDescription>
         </DialogHeader>
         <div className={"space-y-6"}>
-          <div>
+          <div
-            <h2>Pagination options</h2>
+            className={
-            <p>Add or remove options for the amount of rows per page</p>
+              "space-y-2 flex flex-row items-center justify-between rounded-lg border p-4"
-            <Table className={"w-auto"}>
+            }
-              <TableBody>
+          >
-                {paginationOptions.map((option) => (
+            <div className={"space-y-0.5"}>
-                  <TableRow key={option} className={"border-none"}>
+              <Label htmlFor={"format-dates"}>Automatically format dates</Label>
-                    <TableCell className={"px-2 py-1 text-end"}>
+              <p className={"text-sm text-muted-foreground"}>
-                      {option}
+                When turned on, will show timestamp cells in tables in a human
-                    </TableCell>
+                readable format
-                    <TableCell className={"px-2 py-1"}>
+              </p>
-                      <Button
+            </div>
-                        variant={"ghost"}
-                        size={"iconSm"}
-                        onClick={() => removePaginationOption(option)}
-                        title={"Delete option"}
-                      >
-                        <Trash className={"size-4"} />
-                        <span className={"sr-only"}>Delete option</span>
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-            <form className={"mt-4 flex gap-4"} onSubmit={handleSubmit}>
-              <Input name={"option"} type={"number"} className={"max-w-28"} />
-              <Button>Add</Button>
-            </form>
-          </div>
-          <div>
-            <h2>Automatically format dates</h2>
-            <p>
-              When turned on, will show timestamp cells in tables in a human
-              readable format
-            </p>
             <Switch
+              id={"format-dates"}
               checked={formatDates}
               onCheckedChange={setFormatDates}
               className={"mt-4"}
             />
           </div>
-          <div>
+          <div
-            <h2>Show previews for images</h2>
+            className={
-            <p>
+              "space-y-2 flex flex-row items-center justify-between rounded-lg border p-4"
-              When turned on, will automatically detect image URL's in tables
+            }
-              and add a preview alongside.
+          >
-            </p>
+            <div className={"space-y-0.5"}>
-            <p>
+              <Label htmlFor={"show-images-preview"}>
-              Might significantly increase load on you CDN, use with caution.
+                Show previews for images
-            </p>
+              </Label>
+              <p className={"text-sm text-muted-foreground"}>
+                When turned on, will automatically detect image URL's in tables
+                and add a preview alongside.
+              </p>
+              <p className={"text-sm text-muted-foreground"}>
+                Might significantly increase load on you CDN, use with caution.
+              </p>
+            </div>
             <Switch
+              id={"show-images-preview"}
               checked={showImagesPreview}
               onCheckedChange={setShowImagesPreview}
               className={"mt-4"}
             />
           </div>
+          <div
+            className={
+              "space-y-2 flex flex-row items-center justify-between rounded-lg border p-4"
+            }
+          >
+            <div className={"space-y-0.5"}>
+              <Label>Pagination options</Label>
+              <p className={"text-sm text-muted-foreground"}>
+                Add or remove options for the amount of rows per page
+              </p>
+            </div>
+            <div>
+              <Table className={"w-auto"}>
+                <TableBody>
+                  {paginationOptions.map((option) => (
+                    <TableRow key={option} className={"border-none"}>
+                      <TableCell className={"px-2 py-1 text-end"}>
+                        {option}
+                      </TableCell>
+                      <TableCell className={"px-2 py-1"}>
+                        <Button
+                          variant={"ghost"}
+                          size={"iconSm"}
+                          onClick={() => removePaginationOption(option)}
+                          title={"Delete option"}
+                        >
+                          <Trash className={"size-4"} />
+                          <span className={"sr-only"}>Delete option</span>
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+              <form className={"mt-4 flex gap-4"} onSubmit={handleSubmit}>
+                <Input name={"option"} type={"number"} className={"max-w-28"} />
+                <Button variant={"outline"}>Add</Button>
+              </form>
+            </div>
+          </div>
         </div>
         <DialogFooter>
           <DialogClose asChild>

frontend/src/components/ui/index.ts

@@ -3,6 +3,7 @@ export * from "./data-table-pagination";
 export * from "./dialog";
 export * from "./dropdown-menu";
 export * from "./input";
+export * from "./label";
 export * from "./mode-toggle";
 export * from "./select";
 export * from "./switch";

frontend/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }