Refactor: Improve Uppy component styling

src/index.css

@@ -119,3 +119,203 @@ All colors MUST be HSL.
     @apply bg-background text-foreground;
   }
 }
+
+/* Custom Uppy Photo Upload Styling */
+@layer components {
+  /* Uppy Dashboard customization to match theme */
+  .uppy-Dashboard {
+    @apply bg-card text-card-foreground border border-border rounded-lg;
+    box-shadow: var(--shadow-card);
+  }
+
+  .uppy-Dashboard-inner {
+    @apply bg-transparent;
+  }
+
+  .uppy-Dashboard-dropFilesHereHint {
+    @apply text-muted-foreground;
+  }
+
+  .uppy-Dashboard-browse {
+    @apply text-primary hover:text-primary-glow transition-colors duration-300;
+  }
+
+  .uppy-Dashboard-AddFiles {
+    @apply bg-gradient-to-r from-primary to-secondary text-primary-foreground;
+    background: var(--gradient-primary);
+    border: none;
+    border-radius: var(--radius);
+    transition: var(--transition-smooth);
+  }
+
+  .uppy-Dashboard-AddFiles:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-glow);
+  }
+
+  .uppy-Dashboard-AddFiles-info {
+    @apply text-primary-foreground;
+  }
+
+  .uppy-Dashboard-Item {
+    @apply bg-card border border-border rounded-lg;
+  }
+
+  .uppy-Dashboard-Item-preview {
+    @apply rounded-lg overflow-hidden;
+  }
+
+  .uppy-Dashboard-Item-progress {
+    @apply bg-muted;
+  }
+
+  .uppy-Dashboard-Item-progressIndicator {
+    @apply bg-primary;
+  }
+
+  .uppy-Dashboard-Item-action--remove {
+    @apply text-destructive hover:text-destructive-foreground hover:bg-destructive;
+    transition: var(--transition-smooth);
+  }
+
+  .uppy-Dashboard-Item-action--edit {
+    @apply text-accent hover:text-accent-foreground hover:bg-accent;
+    transition: var(--transition-smooth);
+  }
+
+  /* Modal overlay styling */
+  .uppy-Dashboard--modal {
+    z-index: 9999;
+  }
+
+  .uppy-Dashboard--modal .uppy-Dashboard-overlay {
+    @apply bg-background/80 backdrop-blur-sm;
+  }
+
+  .uppy-Dashboard--modal .uppy-Dashboard-inner {
+    @apply bg-card border border-border rounded-xl;
+    box-shadow: var(--shadow-intense);
+    max-width: 90vw;
+    max-height: 90vh;
+  }
+
+  /* Status bar customization */
+  .uppy-StatusBar {
+    @apply bg-muted border-t border-border;
+  }
+
+  .uppy-StatusBar-progress {
+    @apply bg-primary;
+  }
+
+  .uppy-StatusBar-actions {
+    @apply gap-2;
+  }
+
+  .uppy-StatusBar-actionBtn {
+    @apply bg-primary text-primary-foreground hover:bg-primary/90;
+    border: none;
+    border-radius: var(--radius);
+    transition: var(--transition-smooth);
+  }
+
+  .uppy-StatusBar-actionBtn:hover {
+    transform: translateY(-1px);
+  }
+
+  /* Image editor customization */
+  .uppy-ImageEditor {
+    @apply bg-card text-card-foreground;
+  }
+
+  .uppy-ImageEditor-controls {
+    @apply bg-muted border-t border-border;
+  }
+
+  .uppy-ImageEditor-controls button {
+    @apply text-foreground hover:text-primary;
+    transition: var(--transition-smooth);
+  }
+
+  /* Custom upload trigger styling */
+  .photo-upload-trigger {
+    @apply relative overflow-hidden;
+    background: var(--gradient-primary);
+    transition: var(--transition-smooth);
+  }
+
+  .photo-upload-trigger:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-glow);
+  }
+
+  .photo-upload-trigger::before {
+    content: '';
+    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent;
+    transform: translateX(-100%);
+    transition: transform 0.6s ease;
+  }
+
+  .photo-upload-trigger:hover::before {
+    transform: translateX(100%);
+  }
+
+  /* Upload preview grid */
+  .upload-preview-grid {
+    @apply grid gap-4;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
+  .upload-preview-item {
+    @apply relative aspect-square rounded-lg overflow-hidden border border-border;
+    background: var(--gradient-card);
+    transition: var(--transition-smooth);
+  }
+
+  .upload-preview-item:hover {
+    transform: scale(1.05);
+    box-shadow: var(--shadow-card);
+  }
+
+  .upload-preview-item img {
+    @apply w-full h-full object-cover;
+  }
+
+  .upload-preview-overlay {
+    @apply absolute inset-0 bg-black/40 opacity-0 hover:opacity-100 flex items-center justify-center;
+    transition: var(--transition-smooth);
+  }
+
+  /* Loading states */
+  .upload-loading {
+    @apply relative;
+  }
+
+  .upload-loading::after {
+    content: '';
+    @apply absolute inset-0 bg-primary/10 rounded-lg;
+    animation: pulse 2s infinite;
+  }
+
+  /* Mobile optimizations */
+  @media (max-width: 640px) {
+    .uppy-Dashboard--modal .uppy-Dashboard-inner {
+      @apply m-4 max-h-[80vh];
+    }
+    
+    .upload-preview-grid {
+      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+      @apply gap-2;
+    }
+  }
+
+  /* Dark mode specific adjustments */
+  .dark .uppy-Dashboard {
+    border-color: hsl(var(--border));
+  }
+
+  .dark .uppy-Dashboard-Item {
+    background-color: hsl(var(--card));
+    border-color: hsl(var(--border));
+  }
+}