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,9 +64,61 @@ export function SettingsDialog() {
           </DialogDescription>
         </DialogHeader>
         <div className={"space-y-6"}>
+          <div
+            className={
+              "space-y-2 flex flex-row items-center justify-between rounded-lg border p-4"
+            }
+          >
+            <div className={"space-y-0.5"}>
+              <Label htmlFor={"format-dates"}>Automatically format dates</Label>
+              <p className={"text-sm text-muted-foreground"}>
+                When turned on, will show timestamp cells in tables in a human
+                readable format
+              </p>
+            </div>
+            <Switch
+              id={"format-dates"}
+              checked={formatDates}
+              onCheckedChange={setFormatDates}
+              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 htmlFor={"show-images-preview"}>
+                Show previews for images
+              </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>
-            <h2>Pagination options</h2>
-            <p>Add or remove options for the amount of rows per page</p>
               <Table className={"w-auto"}>
                 <TableBody>
                   {paginationOptions.map((option) => (
@@ -90,35 +143,9 @@ export function SettingsDialog() {
               </Table>
               <form className={"mt-4 flex gap-4"} onSubmit={handleSubmit}>
                 <Input name={"option"} type={"number"} className={"max-w-28"} />
-              <Button>Add</Button>
+                <Button variant={"outline"}>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
-              checked={formatDates}
-              onCheckedChange={setFormatDates}
-              className={"mt-4"}
-            />
-          </div>
-          <div>
-            <h2>Show previews for images</h2>
-            <p>
-              When turned on, will automatically detect image URL's in tables
-              and add a preview alongside.
-            </p>
-            <p>
-              Might significantly increase load on you CDN, use with caution.
-            </p>
-            <Switch
-              checked={showImagesPreview}
-              onCheckedChange={setShowImagesPreview}
-              className={"mt-4"}
-            />
           </div>
         </div>
         <DialogFooter>

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 }