Refactor forms and uploader components UI with Card layout

Updated color, font, and asset forms to use Card and CardContent for improved structure and consistency. Enhanced input styles and hover effects for better user experience. Adjusted the image uploader background for a more cohesive design.

frontend/src/components/event-themes/event-theme-assets-uploader.tsx

@@ -1,4 +1,4 @@
-// src/components/themes/event-theme-assets-uploader.tsx
+// src/components/event-themes/event-theme-assets-uploader.tsx
 "use client";
 
 import React, { useState } from "react";
@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { ImageUploader } from "@/components/ui/image-uploader";
+import { Card, CardContent } from "@/components/ui/card";
 
 interface AssetImage {
   key: string;
@@ -76,27 +77,34 @@ export function EventThemeAssetsUploader({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between mb-3">
-        <Label className="text-base">Theme Assets</Label>
+        <Label className="text-base font-semibold text-gray-900">
+          Theme Assets
+        </Label>
         <Button
           type="button"
           variant="outline"
           size="sm"
+          className="flex items-center gap-1.5 text-sm font-medium"
           onClick={handleAddAsset}
         >
-          <PlusCircle className="h-4 w-4 mr-2" />
+          <PlusCircle className="h-4 w-4" />
           Add Asset
         </Button>
       </div>
 
-      <div className="space-y-4">
+      <div className="space-y-3">
         {assets.map((asset, index) => (
-          <div
+          <Card
             key={index}
-            className="grid grid-cols-1 md:grid-cols-[1fr,2fr,auto] gap-4 items-start p-4 border rounded-md bg-gray-50"
+            className="overflow-hidden hover:shadow-md transition-shadow"
           >
+            <CardContent className="grid grid-cols-1 md:grid-cols-[1fr,2fr,auto] gap-4 items-start p-4 pt-4">
               <div>
-              <Label htmlFor={`asset-key-${index}`} className="mb-2 block">
+                <Label
+                  htmlFor={`asset-key-${index}`}
+                  className="mb-2 block text-sm font-medium text-gray-700"
+                >
                   Asset Key
                 </Label>
                 <Input
@@ -104,6 +112,7 @@ export function EventThemeAssetsUploader({
                   value={asset.key}
                   onChange={(e) => handleKeyChange(index, e.target.value)}
                   placeholder="E.g., 'animal1', 'balloon', etc."
+                  className="focus:ring-2 focus:ring-primary/20"
                 />
               </div>
 
@@ -126,19 +135,15 @@ export function EventThemeAssetsUploader({
                   onClick={() => handleRemoveAsset(index)}
                   disabled={assets.length === 1}
                   title="Remove Asset"
+                  className="hover:bg-red-600/90 transition-colors"
                 >
                   <Trash2 className="h-4 w-4" />
                 </Button>
               </div>
-          </div>
+            </CardContent>
+          </Card>
         ))}
       </div>
-
-      {assets.length === 0 && (
-        <p className="text-sm text-gray-500 italic">
-          No assets added. Click &quot;Add Asset&quot; to add theme assets.
-        </p>
-      )}
     </div>
   );
 }

frontend/src/components/event-themes/event-theme-form.tsx

@@ -327,12 +327,13 @@ export function EventThemeForm({ theme, mode }: ThemeFormProps) {
 
             <div className="grid grid-cols-1 gap-4">
               {colorInputs.map((input, index) => (
-                <div
+                <Card key={index} className="p-0 border overflow-hidden">
-                  key={index}
+                  <CardContent className="flex items-center space-x-4 p-3">
-                  className="flex items-center space-x-4 p-3 border rounded-md bg-gray-50"
-                >
                     <div className="flex-1">
-                    <Label htmlFor={`color-name-${index}`} className="sr-only">
+                      <Label
+                        htmlFor={`color-name-${index}`}
+                        className="sr-only"
+                      >
                         Color Name
                       </Label>
                       <Input
@@ -346,6 +347,7 @@ export function EventThemeForm({ theme, mode }: ThemeFormProps) {
                     </div>
 
                     <div className="flex-1 flex items-center space-x-2">
+                      <div className="relative w-16 h-10 overflow-hidden rounded-md border border-input">
                         <Input
                           type="color"
                           id={`color-value-${index}`}
@@ -353,8 +355,13 @@ export function EventThemeForm({ theme, mode }: ThemeFormProps) {
                           onChange={(e) =>
                             updateColorInput(index, "value", e.target.value)
                           }
-                      className="w-16 h-10 p-1"
+                          className="absolute inset-0 opacity-0 w-full h-full cursor-pointer"
                         />
+                        <div
+                          className="w-full h-full"
+                          style={{ backgroundColor: input.value }}
+                        />
+                      </div>
                       <Input
                         type="text"
                         value={input.value}
@@ -376,7 +383,8 @@ export function EventThemeForm({ theme, mode }: ThemeFormProps) {
                     >
                       <Trash2 className="h-4 w-4" />
                     </Button>
-                </div>
+                  </CardContent>
+                </Card>
               ))}
             </div>
           </div>
@@ -398,10 +406,8 @@ export function EventThemeForm({ theme, mode }: ThemeFormProps) {
 
             <div className="grid grid-cols-1 gap-4">
               {fontInputs.map((input, index) => (
-                <div
+                <Card key={index} className="p-0 border overflow-hidden">
-                  key={index}
+                  <CardContent className="flex items-center space-x-4 p-3">
-                  className="flex items-center space-x-4 p-3 border rounded-md bg-gray-50"
-                >
                     <div className="flex-1">
                       <Label htmlFor={`font-name-${index}`} className="sr-only">
                         Font Purpose
@@ -417,7 +423,10 @@ export function EventThemeForm({ theme, mode }: ThemeFormProps) {
                     </div>
 
                     <div className="flex-1">
-                    <Label htmlFor={`font-value-${index}`} className="sr-only">
+                      <Label
+                        htmlFor={`font-value-${index}`}
+                        className="sr-only"
+                      >
                         Font Name
                       </Label>
                       <Input
@@ -440,7 +449,8 @@ export function EventThemeForm({ theme, mode }: ThemeFormProps) {
                     >
                       <Trash2 className="h-4 w-4" />
                     </Button>
-                </div>
+                  </CardContent>
+                </Card>
               ))}
             </div>
           </div>

frontend/src/components/ui/image-uploader.tsx

@@ -123,7 +123,8 @@ export function ImageUploader({
       )}
 
       <div
-        className={`relative border-2 border-dashed border-gray-300 rounded-md ${getAspectRatioClass()} overflow-hidden bg-gray-50 hover:bg-gray-100 transition-colors`}
+        className={`relative border-2 border-dashed border-border rounded-md ${getAspectRatioClass()} 
+                    overflow-hidden bg-muted/30 hover:bg-muted/50 transition-colors`}
       >
         {/* Hidden file input */}
         <input