Refactor asset uploader layout and improve UI components

Updated the layout to use a responsive grid for displaying assets and separated CardHeader for better organization. Simplified the asset input and image uploader components while improving responsiveness and styling consistency. Removed redundant code and added enhancements for a cleaner and more user-friendly UI.

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

@@ -7,7 +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";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
 interface AssetImage {
   key: string;
@@ -93,52 +93,49 @@ export function EventThemeAssetsUploader({
         </Button>
       </div>
 
-      <div className="space-y-3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         {assets.map((asset, index) => (
           <Card
             key={index}
             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">
+            <CardHeader className="px-4 py-3 flex flex-row items-center justify-between">
-              <div>
+              {/*<Label className="text-sm font-medium text-gray-700">*/}
-                <Label
+              {/*  Asset Name*/}
-                  htmlFor={`asset-key-${index}`}
+              {/*</Label>*/}
-                  className="mb-2 block text-sm font-medium text-gray-700"
+              <Button
-                >
+                type="button"
-                  Asset Key
+                variant="ghost"
-                </Label>
+                size="sm"
-                <Input
+                onClick={() => handleRemoveAsset(index)}
-                  id={`asset-key-${index}`}
+                className="h-8 px-2 text-destructive hover:bg-destructive/10"
-                  value={asset.key}
+                disabled={assets.length <= 0}
-                  onChange={(e) => handleKeyChange(index, e.target.value)}
+              >
-                  placeholder="E.g., 'animal1', 'balloon', etc."
+                <Trash2 className="h-4 w-4" />
-                  className="focus:ring-2 focus:ring-primary/20"
+                <span className="sr-only">Remove</span>
-                />
+              </Button>
-              </div>
+            </CardHeader>
 
-              <ImageUploader
+            <CardContent className="space-y-4 px-4 pt-0 pb-4">
-                id={`asset-url-${index}`}
+              <Input
-                label="Asset Image"
+                id={`asset-key-${index}`}
-                imageUrl={asset.url}
+                value={asset.key}
-                purpose="theme-asset"
+                onChange={(e) => handleKeyChange(index, e.target.value)}
-                onChange={(url) => handleUrlChange(index, url)}
+                placeholder="E.g., 'animal1', 'balloon', etc."
-                aspectRatio="square"
+                className="focus:ring-2 focus:ring-primary/20"
-                maxWidth={400}
-                maxHeight={400}
               />
 
-              <div className="flex items-end h-full pb-2">
+              <div className="mx-auto max-w-[600px]">
-                <Button
+                <ImageUploader
-                  type="button"
+                  id={`asset-url-${index}`}
-                  variant="destructive"
+                  imageUrl={asset.url}
-                  size="icon"
+                  purpose="theme-asset"
-                  onClick={() => handleRemoveAsset(index)}
+                  onChange={(url) => handleUrlChange(index, url)}
-                  disabled={assets.length === 1}
+                  aspectRatio="square"
-                  title="Remove Asset"
+                  maxWidth={300}
-                  className="hover:bg-red-600/90 transition-colors"
+                  maxHeight={300}
-                >
+                  className="w-full"
-                  <Trash2 className="h-4 w-4" />
+                />
-                </Button>
               </div>
             </CardContent>
           </Card>