From ebe1b38bdf572b5aa787e21218022f209720b17a Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 27 Aug 2025 11:26:28 +0200
Subject: [PATCH] style: properties panel

---
 .../properties-panel/text-properties.tsx      | 162 +++++++++---------
 apps/web/src/components/ui/font-picker.tsx    |   2 +-
 apps/web/src/components/ui/textarea.tsx       |   4 +-
 3 files changed, 85 insertions(+), 83 deletions(-)

diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx
index 139c7005..5f0e3706 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -129,14 +129,14 @@ export function TextProperties({
               <Textarea
                 placeholder="Name"
                 defaultValue={element.content}
-                className="min-h-18 resize-none bg-background/50"
+                className="min-h-18 resize-none bg-panel-accent"
                 onChange={(e) =>
                   updateTextElement(trackId, element.id, {
                     content: e.target.value,
                   })
                 }
               />
-              <PropertyItem direction="row">
+              <PropertyItem direction="column">
                 <PropertyItemLabel>Font</PropertyItemLabel>
                 <PropertyItemValue>
                   <FontPicker
@@ -150,83 +150,83 @@ export function TextProperties({
                 </PropertyItemValue>
               </PropertyItem>
               <PropertyItem direction="column">
-                <PropertyItem direction="row">
-                  <PropertyItemLabel>Style</PropertyItemLabel>
-                  <PropertyItemValue>
-                    <div className="flex items-center gap-2">
-                      <Button
-                        variant={
-                          element.fontWeight === "bold" ? "default" : "outline"
-                        }
-                        size="sm"
-                        onClick={() =>
-                          updateTextElement(trackId, element.id, {
-                            fontWeight:
-                              element.fontWeight === "bold" ? "normal" : "bold",
-                          })
-                        }
-                        className="h-8 px-3 font-bold"
-                      >
-                        B
-                      </Button>
-                      <Button
-                        variant={
-                          element.fontStyle === "italic" ? "default" : "outline"
-                        }
-                        size="sm"
-                        onClick={() =>
-                          updateTextElement(trackId, element.id, {
-                            fontStyle:
-                              element.fontStyle === "italic"
-                                ? "normal"
-                                : "italic",
-                          })
-                        }
-                        className="h-8 px-3 italic"
-                      >
-                        I
-                      </Button>
-                      <Button
-                        variant={
-                          element.textDecoration === "underline"
-                            ? "default"
-                            : "outline"
-                        }
-                        size="sm"
-                        onClick={() =>
-                          updateTextElement(trackId, element.id, {
-                            textDecoration:
-                              element.textDecoration === "underline"
-                                ? "none"
-                                : "underline",
-                          })
-                        }
-                        className="h-8 px-3 underline"
-                      >
-                        U
-                      </Button>
-                      <Button
-                        variant={
-                          element.textDecoration === "line-through"
-                            ? "default"
-                            : "outline"
-                        }
-                        size="sm"
-                        onClick={() =>
-                          updateTextElement(trackId, element.id, {
-                            textDecoration:
-                              element.textDecoration === "line-through"
-                                ? "none"
-                                : "line-through",
-                          })
-                        }
-                        className="h-8 px-3 line-through"
-                      >
-                        S
-                      </Button>
-                    </div>
-                  </PropertyItemValue>
-                </PropertyItem>
+                <PropertyItemLabel>Style</PropertyItemLabel>
+                <PropertyItemValue>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant={
+                        element.fontWeight === "bold" ? "default" : "outline"
+                      }
+                      size="sm"
+                      onClick={() =>
+                        updateTextElement(trackId, element.id, {
+                          fontWeight:
+                            element.fontWeight === "bold" ? "normal" : "bold",
+                        })
+                      }
+                      className="h-8 px-3 font-bold"
+                    >
+                      B
+                    </Button>
+                    <Button
+                      variant={
+                        element.fontStyle === "italic" ? "default" : "outline"
+                      }
+                      size="sm"
+                      onClick={() =>
+                        updateTextElement(trackId, element.id, {
+                          fontStyle:
+                            element.fontStyle === "italic"
+                              ? "normal"
+                              : "italic",
+                        })
+                      }
+                      className="h-8 px-3 italic"
+                    >
+                      I
+                    </Button>
+                    <Button
+                      variant={
+                        element.textDecoration === "underline"
+                          ? "default"
+                          : "outline"
+                      }
+                      size="sm"
+                      onClick={() =>
+                        updateTextElement(trackId, element.id, {
+                          textDecoration:
+                            element.textDecoration === "underline"
+                              ? "none"
+                              : "underline",
+                        })
+                      }
+                      className="h-8 px-3 underline"
+                    >
+                      U
+                    </Button>
+                    <Button
+                      variant={
+                        element.textDecoration === "line-through"
+                          ? "default"
+                          : "outline"
+                      }
+                      size="sm"
+                      onClick={() =>
+                        updateTextElement(trackId, element.id, {
+                          textDecoration:
+                            element.textDecoration === "line-through"
+                              ? "none"
+                              : "line-through",
+                        })
+                      }
+                      className="h-8 px-3 line-through"
+                    >
+                      S
+                    </Button>
+                  </div>
+                </PropertyItemValue>
+              </PropertyItem>
+              <PropertyItem direction="column">
                 <PropertyItemLabel>Font size</PropertyItemLabel>
                 <PropertyItemValue>
                   <div className="flex items-center gap-2">
@@ -250,7 +250,7 @@ export function TextProperties({
                       max={300}
                       onChange={(e) => handleFontSizeChange(e.target.value)}
                       onBlur={handleFontSizeBlur}
-                      className="w-12 !text-xs h-7 rounded-sm text-center
+                      className="w-12 px-2 !text-xs h-7 rounded-sm text-center
                [appearance:textfield]
                [&::-webkit-outer-spin-button]:appearance-none
                [&::-webkit-inner-spin-button]:appearance-none"
@@ -258,7 +258,7 @@ export function TextProperties({
                   </div>
                 </PropertyItemValue>
               </PropertyItem>
-              <PropertyItem direction="row">
+              <PropertyItem direction="column">
                 <PropertyItemLabel>Color</PropertyItemLabel>
                 <PropertyItemValue>
                   <Input
diff --git a/apps/web/src/components/ui/font-picker.tsx b/apps/web/src/components/ui/font-picker.tsx
index 479a5f0c..7bb11274 100644
--- a/apps/web/src/components/ui/font-picker.tsx
+++ b/apps/web/src/components/ui/font-picker.tsx
@@ -20,7 +20,7 @@ export function FontPicker({
 }: FontPickerProps) {
   return (
     <Select defaultValue={defaultValue} onValueChange={onValueChange}>
-      <SelectTrigger className={`w-full text-xs ${className || ""}`}>
+      <SelectTrigger className={`w-full bg-panel-accent h-8 text-xs ${className || ""}`}>
         <SelectValue placeholder="Select a font" />
       </SelectTrigger>
       <SelectContent>
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index b9004a34..d9ae9ea6 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -9,7 +9,9 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-base shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-xs",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-h-[60px] w-full rounded-md border bg-accent/50 px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}
       ref={ref}