Refactor: Improve Uppy component styling

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,77 +120,123 @@ 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>
-            <Input
-              id="title"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder="Give your photos a descriptive title"
-              maxLength={100}
-              required
-            />
-            <p className="text-sm text-muted-foreground mt-1">
-              {title.length}/100 characters
-            </p>
-          </div>
+        <Separator />
 
-          <div>
-            <Label htmlFor="caption">Caption</Label>
-            <Textarea
-              id="caption"
-              value={caption}
-              onChange={(e) => setCaption(e.target.value)}
-              placeholder="Add a description or story about these photos..."
-              maxLength={500}
-              rows={3}
-            />
-            <p className="text-sm text-muted-foreground mt-1">
-              {caption.length}/500 characters
-            </p>
-          </div>
+        <div className="space-y-2">
+          <Label htmlFor="title" className="text-base font-medium">
+            Title *
+          </Label>
+          <Input
+            id="title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            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">
+            {title.length}/100 characters
+          </p>
+        </div>
 
-          <div>
-            <Label>Photos</Label>
-            <UppyPhotoUpload
-              onUploadComplete={handleUploadComplete}
-              maxFiles={10}
-              maxSizeMB={25}
-              metadata={metadata}
-              variant="public"
-              className="mt-2"
-            />
+        <div className="space-y-2">
+          <Label htmlFor="caption" className="text-base font-medium">
+            Caption
+          </Label>
+          <Textarea
+            id="caption"
+            value={caption}
+            onChange={(e) => setCaption(e.target.value)}
+            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">
+            {caption.length}/500 characters
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Label className="text-base font-medium">Photos *</Label>
             {uploadedUrls.length > 0 && (
-              <p className="text-sm text-muted-foreground mt-2">
-                {uploadedUrls.length} photo(s) uploaded and ready to submit
-              </p>
+              <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"
+            showPreview={true}
+            size="default"
+          />
         </div>
 
-        <div className="flex gap-3">
-          <Button
+        <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 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>
-
-        <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>
+      </CardContent>
     </Card>
   );
 }