Refactor: Improve Uppy component styling

2025-12-20 10:31:13 -05:00 · 2025-09-29 17:04:13 +00:00
parent 730f4c4457
commit be42c019c9
4 changed files with 442 additions and 99 deletions
--- a/index.html
+++ b/index.html
@@ -15,6 +15,9 @@
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@lovable_dev" />
    <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+    
+    <!-- Uppy CSS for photo upload functionality -->
+    <link href="https://releases.transloadit.com/uppy/v3.25.3/uppy.min.css" rel="stylesheet">
  </head>

  <body>
--- a/src/components/upload/UppyPhotoSubmissionUpload.tsx
+++ b/src/components/upload/UppyPhotoSubmissionUpload.tsx
@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
-import { Card } from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
 import { UppyPhotoUpload } from './UppyPhotoUpload';
 import { supabase } from '@/integrations/supabase/client';
 import { useAuth } from '@/hooks/useAuth';
 import { useToast } from '@/hooks/use-toast';
-import { Camera } from 'lucide-react';
+import { Camera, CheckCircle, AlertCircle, Info } from 'lucide-react';

 interface UppyPhotoSubmissionUploadProps {
  onSubmissionComplete?: () => void;
@@ -118,16 +120,43 @@ export function UppyPhotoSubmissionUpload({
  };

  return (
-    <Card className="p-6">
-      <div className="space-y-6">
-        <div className="flex items-center gap-2">
-          <Camera className="h-5 w-5 text-primary" />
-          <h3 className="text-lg font-semibold">Submit Photos</h3>
+    <Card className="w-full max-w-2xl mx-auto shadow-lg">
+      <CardHeader className="text-center space-y-4">
+        <div className="mx-auto w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center">
+          <Camera className="w-8 h-8 text-primary-foreground" />
+        </div>
+        <div>
+          <CardTitle className="text-2xl bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+            Submit Photos
+          </CardTitle>
+          <CardDescription className="text-base mt-2">
+            Share your photos with the community. All submissions will be reviewed before being published.
+          </CardDescription>
+        </div>
+      </CardHeader>
+      
+      <CardContent className="space-y-6">
+        <div className="bg-muted/50 rounded-lg p-4 border border-border">
+          <div className="flex items-start gap-3">
+            <Info className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
+            <div className="space-y-2 text-sm">
+              <p className="font-medium">Submission Guidelines:</p>
+              <ul className="space-y-1 text-muted-foreground">
+                <li>• Photos should be clear and well-lit</li>
+                <li>• Maximum 10 images per submission</li>
+                <li>• Each image up to 25MB in size</li>
+                <li>• Review process takes 24-48 hours</li>
+              </ul>
+            </div>
+          </div>
        </div>

-        <div className="space-y-4">
-          <div>
-            <Label htmlFor="title">Title *</Label>
+        <Separator />
+
+        <div className="space-y-2">
+          <Label htmlFor="title" className="text-base font-medium">
+            Title *
+          </Label>
          <Input
            id="title"
            value={title}
@@ -135,14 +164,17 @@ export function UppyPhotoSubmissionUpload({
            placeholder="Give your photos a descriptive title"
            maxLength={100}
            required
+            className="transition-all duration-200 focus:ring-2 focus:ring-primary/20"
          />
-            <p className="text-sm text-muted-foreground mt-1">
+          <p className="text-sm text-muted-foreground">
            {title.length}/100 characters
          </p>
        </div>

-          <div>
-            <Label htmlFor="caption">Caption</Label>
+        <div className="space-y-2">
+          <Label htmlFor="caption" className="text-base font-medium">
+            Caption
+          </Label>
          <Textarea
            id="caption"
            value={caption}
@@ -150,45 +182,61 @@ export function UppyPhotoSubmissionUpload({
            placeholder="Add a description or story about these photos..."
            maxLength={500}
            rows={3}
+            className="transition-all duration-200 focus:ring-2 focus:ring-primary/20 resize-none"
          />
-            <p className="text-sm text-muted-foreground mt-1">
+          <p className="text-sm text-muted-foreground">
            {caption.length}/500 characters
          </p>
        </div>

-          <div>
-            <Label>Photos</Label>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Label className="text-base font-medium">Photos *</Label>
+            {uploadedUrls.length > 0 && (
+              <Badge variant="secondary" className="text-xs">
+                {uploadedUrls.length} photo{uploadedUrls.length !== 1 ? 's' : ''} selected
+              </Badge>
+            )}
+          </div>
          <UppyPhotoUpload
            onUploadComplete={handleUploadComplete}
            maxFiles={10}
            maxSizeMB={25}
            metadata={metadata}
            variant="public"
-              className="mt-2"
+            showPreview={true}
+            size="default"
          />
-            {uploadedUrls.length > 0 && (
-              <p className="text-sm text-muted-foreground mt-2">
-                {uploadedUrls.length} photo(s) uploaded and ready to submit
-              </p>
-            )}
-          </div>
        </div>

-        <div className="flex gap-3">
+        <Separator />
+
+        <div className="space-y-4">
          <Button 
            onClick={handleSubmit}
-            disabled={isSubmitting || uploadedUrls.length === 0 || !title.trim()}
-            className="flex-1"
+            disabled={isSubmitting || !title.trim() || uploadedUrls.length === 0}
+            className="w-full h-12 text-base font-medium photo-upload-trigger"
+            size="lg"
          >
-            {isSubmitting ? 'Submitting...' : 'Submit Photos'}
+            {isSubmitting ? (
+              <div className="flex items-center gap-2">
+                <div className="w-4 h-4 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
+                Submitting Photos...
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <CheckCircle className="w-5 h-5" />
+                Submit {uploadedUrls.length} Photo{uploadedUrls.length !== 1 ? 's' : ''}
+              </div>
+            )}
          </Button>
-        </div>
          
-        <p className="text-sm text-muted-foreground">
-          All photo submissions are reviewed before being published. Please ensure your photos
-          follow our community guidelines and are appropriate for all audiences.
-        </p>
+          <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
+            <AlertCircle className="w-4 h-4" />
+            <span>Your submission will be reviewed and published within 24-48 hours</span>
          </div>
+        </div>
+      </CardContent>
    </Card>
  );
 }
--- a/src/components/upload/UppyPhotoUpload.tsx
+++ b/src/components/upload/UppyPhotoUpload.tsx
@@ -7,9 +7,9 @@ import { DashboardModal } from '@uppy/react';
 import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
 import { Button } from '@/components/ui/button';
-import { Upload, Image as ImageIcon } from 'lucide-react';
-
-// CSS imports removed to avoid build issues - using custom styling instead
+import { Badge } from '@/components/ui/badge';
+import { Upload, X, Eye, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';

 interface UppyPhotoUploadProps {
  onUploadComplete?: (urls: string[]) => void;
@@ -23,6 +23,8 @@ interface UppyPhotoUploadProps {
  className?: string;
  children?: React.ReactNode;
  disabled?: boolean;
+  showPreview?: boolean;
+  size?: 'default' | 'compact' | 'large';
 }

 interface CloudflareResponse {
@@ -55,9 +57,13 @@ export function UppyPhotoUpload({
  className = '',
  children,
  disabled = false,
+  showPreview = true,
+  size = 'default',
 }: UppyPhotoUploadProps) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [uploadedImages, setUploadedImages] = useState<string[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
  const uppyRef = useRef<Uppy | null>(null);
  const { toast } = useToast();

@@ -81,11 +87,18 @@ export function UppyPhotoUpload({
      showRemoveButtonAfterComplete: true,
      showSelectedFiles: true,
      note: `Images up to ${maxSizeMB}MB, max ${maxFiles} files`,
+      theme: 'auto',
+      closeAfterFinish: true,
    });

    // Add Image Editor plugin
    uppy.use(ImageEditor, {
      quality: 0.8,
+      cropperOptions: {
+        viewMode: 1,
+        background: false,
+        autoCropArea: 1,
+      },
    });

    // Add XHR Upload plugin (configured per file in beforeUpload)
@@ -103,6 +116,8 @@ export function UppyPhotoUpload({
        return;
      }

+      setIsUploading(true);
+      setUploadProgress(0);
      onUploadStart?.();

      // Process each file to get upload URL
@@ -144,6 +159,11 @@ export function UppyPhotoUpload({
      }
    });

+    // Handle upload progress
+    uppy.on('progress', (progress) => {
+      setUploadProgress(Math.round(progress));
+    });
+
    // Handle upload success
    uppy.on('upload-success', async (file, response) => {
      try {
@@ -187,6 +207,7 @@ export function UppyPhotoUpload({
    // Handle upload error
    uppy.on('upload-error', (file, error, response) => {
      console.error('Upload error:', error);
+      setIsUploading(false);
      
      // Check if it's an expired URL error and retry
      if (error.message?.includes('expired') || response?.status === 400) {
@@ -219,6 +240,9 @@ export function UppyPhotoUpload({

    // Handle upload complete
    uppy.on('complete', (result) => {
+      setIsUploading(false);
+      setUploadProgress(0);
+      
      if (result.successful.length > 0) {
        onUploadComplete?.(uploadedImages);
        toast({
@@ -234,7 +258,15 @@ export function UppyPhotoUpload({
    return () => {
      uppy.destroy();
    };
-  }, [maxFiles, maxSizeMB, allowedFileTypes, metadata, variant, disabled, onUploadStart, onUploadComplete, onUploadError, toast, uploadedImages]);
+  }, [maxFiles, maxSizeMB, allowedFileTypes, metadata, variant, disabled, onUploadStart, onUploadComplete, onUploadError, toast, uploadedImages, size]);
+
+  const removeImage = (index: number) => {
+    const newUrls = uploadedImages.filter((_, i) => i !== index);
+    setUploadedImages(newUrls);
+    if (onUploadComplete) {
+      onUploadComplete(newUrls);
+    }
+  };

  const handleOpenModal = () => {
    if (!disabled) {
@@ -242,25 +274,100 @@ export function UppyPhotoUpload({
    }
  };

+  const getSizeClasses = () => {
+    switch (size) {
+      case 'compact':
+        return 'px-4 py-2 text-sm';
+      case 'large':
+        return 'px-8 py-4 text-lg';
+      default:
+        return 'px-6 py-3';
+    }
+  };
+
+  const renderUploadTrigger = () => {
+    if (children) {
      return (
-    <>
-      <div className={className}>
-        {children ? (
        <div onClick={handleOpenModal} className="cursor-pointer">
          {children}
        </div>
-        ) : (
+      );
+    }
+
+    const baseClasses = "photo-upload-trigger transition-all duration-300 flex items-center justify-center gap-2";
+    const sizeClasses = getSizeClasses();
+    const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:scale-105';
+    
+    return (
      <Button
        onClick={handleOpenModal}
-            disabled={disabled}
-            variant="outline"
-            className="w-full"
+        disabled={disabled || isUploading}
+        className={cn(baseClasses, sizeClasses, disabledClasses)}
+        size={size === 'compact' ? 'sm' : size === 'large' ? 'lg' : 'default'}
      >
-            <Upload className="mr-2 h-4 w-4" />
-            Upload Photos
-          </Button>
+        {isUploading ? (
+          <>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            Uploading... {uploadProgress}%
+          </>
+        ) : (
+          <>
+            <Upload className="w-4 h-4" />
+            {size === 'compact' ? 'Upload' : 'Upload Photos'}
+          </>
        )}
+      </Button>
+    );
+  };
+
+  const renderPreview = () => {
+    if (!showPreview || uploadedImages.length === 0) return null;
+
+    return (
+      <div className="mt-4">
+        <div className="flex items-center justify-between mb-3">
+          <span className="text-sm font-medium text-muted-foreground">
+            Uploaded Photos ({uploadedImages.length})
+          </span>
+          <Badge variant="secondary" className="text-xs">
+            {uploadedImages.length}/{maxFiles}
+          </Badge>
        </div>
+        <div className="upload-preview-grid">
+          {uploadedImages.map((url, index) => (
+            <div key={index} className="upload-preview-item group">
+              <img
+                src={url}
+                alt={`Uploaded ${index + 1}`}
+                className="w-full h-full object-cover"
+              />
+              <div className="upload-preview-overlay">
+                <button
+                  onClick={() => removeImage(index)}
+                  className="p-1 bg-destructive text-destructive-foreground rounded-full hover:bg-destructive/90 transition-colors mr-2"
+                  title="Remove image"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+                <button
+                  onClick={() => window.open(url, '_blank')}
+                  className="p-1 bg-primary text-primary-foreground rounded-full hover:bg-primary/90 transition-colors"
+                  title="View full size"
+                >
+                  <Eye className="w-3 h-3" />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {renderUploadTrigger()}
+      {renderPreview()}
      
      {uppyRef.current && (
        <DashboardModal
@@ -272,21 +379,6 @@ export function UppyPhotoUpload({
          browserBackButtonClose
        />
      )}
-
-      {uploadedImages.length > 0 && (
-        <div className="mt-4 grid grid-cols-2 sm:grid-cols-3 gap-2">
-          {uploadedImages.map((url, index) => (
-            <div key={index} className="relative aspect-square rounded-lg overflow-hidden bg-muted">
-              <img
-                src={url}
-                alt={`Uploaded ${index + 1}`}
-                className="w-full h-full object-cover"
-              />
-              <div className="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors" />
    </div>
-          ))}
-        </div>
-      )}
-    </>
  );
 }
--- a/src/index.css
+++ b/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));
+  }
+}