From 1d72f34b65f86772d4853af0504cb865ab9d4da2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 26 Feb 2026 17:52:41 +0100
Subject: [PATCH] style: streamline media app upload component with favicon app
 styling

---
 components/media/FileConverter.tsx | 10 +++---
 components/media/FileUpload.tsx    | 55 ++++++++++++++++--------------
 2 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/components/media/FileConverter.tsx b/components/media/FileConverter.tsx
index 4253a13..34187b2 100644
--- a/components/media/FileConverter.tsx
+++ b/components/media/FileConverter.tsx
@@ -369,8 +369,8 @@ export function FileConverter() {
       {/* Left Column: Upload and Conversion Options */}
       <div className="space-y-6">
         {/* Upload Card */}
-        <Card>
-          <CardContent>
+        <Card className="glass">
+          <CardContent className="p-6">
             {/* File upload */}
             <FileUpload
               onFileSelect={handleFileSelect}
@@ -385,7 +385,7 @@ export function FileConverter() {
 
         {/* Conversion Options Card */}
         {inputFormat && compatibleFormats.length > 0 && (
-          <Card>
+          <Card className="glass">
             <CardHeader>
               <CardTitle>Conversion Options</CardTitle>
             </CardHeader>
@@ -671,8 +671,8 @@ export function FileConverter() {
       <div className="space-y-6">
         {/* Download All Button */}
         {completedCount > 0 && (
-          <Card>
-            <CardContent>
+          <Card className="glass">
+            <CardContent className="p-6">
               <Button
                 onClick={handleDownloadAll}
                 className="w-full"
diff --git a/components/media/FileUpload.tsx b/components/media/FileUpload.tsx
index 23213e7..891119b 100644
--- a/components/media/FileUpload.tsx
+++ b/components/media/FileUpload.tsx
@@ -241,58 +241,60 @@ export function FileUpload({
       />
 
       {selectedFiles.length > 0 ? (
-        <div className="space-y-2">
+        <div className="space-y-3">
           {selectedFiles.map((file, index) => {
             const metadata = fileMetadata[index];
             return (
-              <div key={`${file.name}-${index}`} className="border border-border rounded-lg p-4 bg-card">
-                <div className="flex items-start gap-3">
-                  <div className="mt-0.5">{getCategoryIcon()}</div>
+              <div key={`${file.name}-${index}`} className="border border-border rounded-xl p-4 bg-card/50 backdrop-blur-sm">
+                <div className="flex items-start gap-4">
+                  <div className="p-2 bg-primary/10 rounded-lg shrink-0">
+                    {getCategoryIcon()}
+                  </div>
                   <div className="flex-1 min-w-0">
                     <div className="flex items-start justify-between gap-2">
-                      <p className="text-sm font-medium text-foreground truncate" title={file.name}>
+                      <p className="text-sm font-semibold text-foreground truncate" title={file.name}>
                         {file.name}
                       </p>
                       <Button
                         variant="ghost"
-                        size="icon"
+                        size="icon-xs"
                         onClick={handleRemove(index)}
                         disabled={disabled}
-                        className="ml-2 flex-shrink-0"
+                        className="rounded-full hover:bg-destructive/10 hover:text-destructive shrink-0"
                       >
-                        <X className="h-4 w-4" />
+                        <X className="h-3.5 w-3.5" />
                         <span className="sr-only">Remove file</span>
                       </Button>
                     </div>
                     {metadata && (
-                      <div className="mt-2 grid grid-cols-2 gap-2 text-xs">
+                      <div className="mt-2 flex flex-wrap gap-4 text-[10px] text-muted-foreground uppercase tracking-wider font-bold">
                         {/* File Size */}
-                        <div className="flex items-center gap-2 text-muted-foreground">
-                          <HardDrive className="h-3.5 w-3.5" />
+                        <div className="flex items-center gap-1.5">
+                          <HardDrive className="h-3 w-3" />
                           <span>{metadata.size}</span>
                         </div>
 
                         {/* Type */}
-                        <div className="flex items-center gap-2 text-muted-foreground">
-                          <File className="h-3.5 w-3.5" />
+                        <div className="flex items-center gap-1.5">
+                          <File className="h-3 w-3" />
                           <span>{metadata.type}</span>
                         </div>
 
                         {/* Duration (for video/audio) */}
                         {metadata.duration && (
-                          <div className="flex items-center gap-2 text-muted-foreground">
-                            <Clock className="h-3.5 w-3.5" />
+                          <div className="flex items-center gap-1.5">
+                            <Clock className="h-3 w-3" />
                             <span>{metadata.duration}</span>
                           </div>
                         )}
 
                         {/* Dimensions */}
                         {metadata.dimensions && (
-                          <div className="flex items-center gap-2 text-muted-foreground">
+                          <div className="flex items-center gap-1.5">
                             {inputFormat?.category === 'video' ? (
-                              <Film className="h-3.5 w-3.5" />
+                              <Film className="h-3 w-3" />
                             ) : (
-                              <FileImage className="h-3.5 w-3.5" />
+                              <FileImage className="h-3 w-3" />
                             )}
                             <span>{metadata.dimensions}</span>
                           </div>
@@ -310,7 +312,8 @@ export function FileUpload({
             variant="outline"
             onClick={handleClick}
             disabled={disabled}
-            className="w-full"
+            className="w-full rounded-xl"
+            size="lg"
           >
             <Upload className="h-4 w-4 mr-2" />
             Add More Files
@@ -324,17 +327,19 @@ export function FileUpload({
           onDragLeave={handleDragLeave}
           onDrop={handleDrop}
           className={cn(
-            'border-2 border-dashed rounded-lg p-12 text-center cursor-pointer transition-colors',
-            'hover:border-primary hover:bg-primary/5',
+            'border-2 border-dashed rounded-xl p-10 text-center cursor-pointer transition-all duration-300',
+            'hover:border-primary/50 hover:bg-primary/5',
             {
-              'border-primary bg-primary/10': isDragging,
-              'border-border bg-input': !isDragging,
+              'border-primary bg-primary/10 scale-[0.98]': isDragging,
+              'border-border bg-muted/30': !isDragging,
               'opacity-50 cursor-not-allowed': disabled,
             }
           )}
         >
-          <Upload className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
-          <p className="text-sm font-medium text-foreground mb-1">
+          <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+            <Upload className="h-8 w-8 text-primary" />
+          </div>
+          <p className="text-sm font-semibold text-foreground mb-1">
             Drop your files here or click to browse
           </p>
           <p className="text-xs text-muted-foreground">