From eadd6940e47f36670fc6845e339c383d6319cecc Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Thu, 10 Jul 2025 21:37:44 +0200
Subject: [PATCH] feat: font size to text panel

---
 .../properties-panel/text-properties.tsx      | 30 +++++++++++++++++++
 apps/web/src/components/ui/input.tsx          | 11 ++-----
 2 files changed, 32 insertions(+), 9 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 c28a9ed..c003f19 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -10,6 +10,8 @@ import {
 import { FONT_OPTIONS, FontFamily } from "@/constants/font-constants";
 import { TextElement } from "@/types/timeline";
 import { useTimelineStore } from "@/stores/timeline-store";
+import { Slider } from "@/components/ui/slider";
+import { Input } from "@/components/ui/input";
 
 export function TextProperties({
   element,
@@ -50,6 +52,34 @@ export function TextProperties({
           </SelectContent>
         </Select>
       </div>
+      <div className="flex flex-col gap-2">
+        <Label className="text-xs">Font size</Label>
+        <div className="flex items-center  gap-2">
+          <Slider
+            defaultValue={[element.fontSize]}
+            min={8}
+            max={200}
+            step={1}
+            onValueChange={([value]) =>
+              updateTextElement(trackId, element.id, { fontSize: value })
+            }
+            className="w-full"
+          />
+          <Input
+            type="number"
+            value={element.fontSize}
+            onChange={(e) =>
+              updateTextElement(trackId, element.id, {
+                fontSize: parseInt(e.target.value),
+              })
+            }
+            className="w-12 !text-xs h-7 rounded-sm text-center
+             [appearance:textfield]
+             [&::-webkit-outer-spin-button]:appearance-none
+             [&::-webkit-inner-spin-button]:appearance-none"
+          />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 7231404..8fc31a5 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -11,14 +11,7 @@ interface InputProps extends React.ComponentProps<"input"> {
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
-    {
-      className,
-      type,
-      showPassword,
-      onShowPasswordChange,
-      value,
-      ...props
-    },
+    { className, type, showPassword, onShowPasswordChange, value, ...props },
     ref
   ) => {
     const isPassword = type === "password";
@@ -26,7 +19,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const inputType = isPassword && showPassword ? "text" : type;
 
     return (
-      <div className="relative w-full">
+      <div className={showPassword ? "relative w-full" : ""}>
         <input
           type={inputType}
           className={cn(