From be42c019c96e92b079480040a8c05d0c532c0001 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Mon, 29 Sep 2025 17:04:13 +0000 Subject: [PATCH] Refactor: Improve Uppy component styling --- index.html | 3 + .../upload/UppyPhotoSubmissionUpload.tsx | 168 +++++++++------ src/components/upload/UppyPhotoUpload.tsx | 170 +++++++++++---- src/index.css | 200 ++++++++++++++++++ 4 files changed, 442 insertions(+), 99 deletions(-) diff --git a/index.html b/index.html index fd7febda..c9ddd12d 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,9 @@ + + + diff --git a/src/components/upload/UppyPhotoSubmissionUpload.tsx b/src/components/upload/UppyPhotoSubmissionUpload.tsx index 1f641908..ccbc0671 100644 --- 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,77 +120,123 @@ export function UppyPhotoSubmissionUpload({ }; return ( - -
-
- -

Submit Photos

+ + +
+ +
+
+ + Submit Photos + + + Share your photos with the community. All submissions will be reviewed before being published. + +
+ + + +
+
+ +
+

Submission Guidelines:

+
    +
  • • Photos should be clear and well-lit
    • +
  • • Maximum 10 images per submission
    • +
  • • Each image up to 25MB in size
    • +
  • • Review process takes 24-48 hours
    • +
+
+
-
-
- - setTitle(e.target.value)} - placeholder="Give your photos a descriptive title" - maxLength={100} - required - /> -

- {title.length}/100 characters -

-
+ -
- -