mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 11:31:11 -05:00
Refactor: Improve Uppy component styling
This commit is contained in:
gpt-engineer-app[bot]
@@ -15,6 +15,9 @@
|
|||||||
<meta name="twitter:card" content="summary_large_image" />
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:site" content="@lovable_dev" />
|
<meta name="twitter:site" content="@lovable_dev" />
|
||||||
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -1,14 +1,16 @@
|
|||||||
import React, { useState } from 'react';
|
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 { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { Textarea } from '@/components/ui/textarea';
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Separator } from '@/components/ui/separator';
|
||||||
import { UppyPhotoUpload } from './UppyPhotoUpload';
|
import { UppyPhotoUpload } from './UppyPhotoUpload';
|
||||||
import { supabase } from '@/integrations/supabase/client';
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
import { useAuth } from '@/hooks/useAuth';
|
import { useAuth } from '@/hooks/useAuth';
|
||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import { Camera } from 'lucide-react';
|
import { Camera, CheckCircle, AlertCircle, Info } from 'lucide-react';
|
||||||
|
|
||||||
interface UppyPhotoSubmissionUploadProps {
|
interface UppyPhotoSubmissionUploadProps {
|
||||||
onSubmissionComplete?: () => void;
|
onSubmissionComplete?: () => void;
|
||||||
@@ -118,77 +120,123 @@ export function UppyPhotoSubmissionUpload({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="p-6">
|
<Card className="w-full max-w-2xl mx-auto shadow-lg">
|
||||||
<div className="space-y-6">
|
<CardHeader className="text-center space-y-4">
|
||||||
<div className="flex items-center gap-2">
|
<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="h-5 w-5 text-primary" />
|
<Camera className="w-8 h-8 text-primary-foreground" />
|
||||||
<h3 className="text-lg font-semibold">Submit Photos</h3>
|
</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>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<Separator />
|
||||||
<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>
|
|
||||||
|
|
||||||
<div>
|
<div className="space-y-2">
|
||||||
<Label htmlFor="caption">Caption</Label>
|
<Label htmlFor="title" className="text-base font-medium">
|
||||||
<Textarea
|
Title *
|
||||||
id="caption"
|
</Label>
|
||||||
value={caption}
|
<Input
|
||||||
onChange={(e) => setCaption(e.target.value)}
|
id="title"
|
||||||
placeholder="Add a description or story about these photos..."
|
value={title}
|
||||||
maxLength={500}
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
rows={3}
|
placeholder="Give your photos a descriptive title"
|
||||||
/>
|
maxLength={100}
|
||||||
<p className="text-sm text-muted-foreground mt-1">
|
required
|
||||||
{caption.length}/500 characters
|
className="transition-all duration-200 focus:ring-2 focus:ring-primary/20"
|
||||||
</p>
|
/>
|
||||||
</div>
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{title.length}/100 characters
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div className="space-y-2">
|
||||||
<Label>Photos</Label>
|
<Label htmlFor="caption" className="text-base font-medium">
|
||||||
<UppyPhotoUpload
|
Caption
|
||||||
onUploadComplete={handleUploadComplete}
|
</Label>
|
||||||
maxFiles={10}
|
<Textarea
|
||||||
maxSizeMB={25}
|
id="caption"
|
||||||
metadata={metadata}
|
value={caption}
|
||||||
variant="public"
|
onChange={(e) => setCaption(e.target.value)}
|
||||||
className="mt-2"
|
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 && (
|
{uploadedUrls.length > 0 && (
|
||||||
<p className="text-sm text-muted-foreground mt-2">
|
<Badge variant="secondary" className="text-xs">
|
||||||
{uploadedUrls.length} photo(s) uploaded and ready to submit
|
{uploadedUrls.length} photo{uploadedUrls.length !== 1 ? 's' : ''} selected
|
||||||
</p>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<UppyPhotoUpload
|
||||||
|
onUploadComplete={handleUploadComplete}
|
||||||
|
maxFiles={10}
|
||||||
|
maxSizeMB={25}
|
||||||
|
metadata={metadata}
|
||||||
|
variant="public"
|
||||||
|
showPreview={true}
|
||||||
|
size="default"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex gap-3">
|
<Separator />
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
<Button
|
<Button
|
||||||
onClick={handleSubmit}
|
onClick={handleSubmit}
|
||||||
disabled={isSubmitting || uploadedUrls.length === 0 || !title.trim()}
|
disabled={isSubmitting || !title.trim() || uploadedUrls.length === 0}
|
||||||
className="flex-1"
|
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>
|
</Button>
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-sm text-muted-foreground">
|
<div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
|
||||||
All photo submissions are reviewed before being published. Please ensure your photos
|
<AlertCircle className="w-4 h-4" />
|
||||||
follow our community guidelines and are appropriate for all audiences.
|
<span>Your submission will be reviewed and published within 24-48 hours</span>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -7,9 +7,9 @@ import { DashboardModal } from '@uppy/react';
|
|||||||
import { supabase } from '@/integrations/supabase/client';
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Upload, Image as ImageIcon } from 'lucide-react';
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Upload, X, Eye, Loader2 } from 'lucide-react';
|
||||||
// CSS imports removed to avoid build issues - using custom styling instead
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
interface UppyPhotoUploadProps {
|
interface UppyPhotoUploadProps {
|
||||||
onUploadComplete?: (urls: string[]) => void;
|
onUploadComplete?: (urls: string[]) => void;
|
||||||
@@ -23,6 +23,8 @@ interface UppyPhotoUploadProps {
|
|||||||
className?: string;
|
className?: string;
|
||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
showPreview?: boolean;
|
||||||
|
size?: 'default' | 'compact' | 'large';
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CloudflareResponse {
|
interface CloudflareResponse {
|
||||||
@@ -55,9 +57,13 @@ export function UppyPhotoUpload({
|
|||||||
className = '',
|
className = '',
|
||||||
children,
|
children,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
|
showPreview = true,
|
||||||
|
size = 'default',
|
||||||
}: UppyPhotoUploadProps) {
|
}: UppyPhotoUploadProps) {
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
const [uploadedImages, setUploadedImages] = useState<string[]>([]);
|
const [uploadedImages, setUploadedImages] = useState<string[]>([]);
|
||||||
|
const [isUploading, setIsUploading] = useState(false);
|
||||||
|
const [uploadProgress, setUploadProgress] = useState(0);
|
||||||
const uppyRef = useRef<Uppy | null>(null);
|
const uppyRef = useRef<Uppy | null>(null);
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
|
|
||||||
@@ -81,11 +87,18 @@ export function UppyPhotoUpload({
|
|||||||
showRemoveButtonAfterComplete: true,
|
showRemoveButtonAfterComplete: true,
|
||||||
showSelectedFiles: true,
|
showSelectedFiles: true,
|
||||||
note: `Images up to ${maxSizeMB}MB, max ${maxFiles} files`,
|
note: `Images up to ${maxSizeMB}MB, max ${maxFiles} files`,
|
||||||
|
theme: 'auto',
|
||||||
|
closeAfterFinish: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add Image Editor plugin
|
// Add Image Editor plugin
|
||||||
uppy.use(ImageEditor, {
|
uppy.use(ImageEditor, {
|
||||||
quality: 0.8,
|
quality: 0.8,
|
||||||
|
cropperOptions: {
|
||||||
|
viewMode: 1,
|
||||||
|
background: false,
|
||||||
|
autoCropArea: 1,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add XHR Upload plugin (configured per file in beforeUpload)
|
// Add XHR Upload plugin (configured per file in beforeUpload)
|
||||||
@@ -103,6 +116,8 @@ export function UppyPhotoUpload({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setIsUploading(true);
|
||||||
|
setUploadProgress(0);
|
||||||
onUploadStart?.();
|
onUploadStart?.();
|
||||||
|
|
||||||
// Process each file to get upload URL
|
// 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
|
// Handle upload success
|
||||||
uppy.on('upload-success', async (file, response) => {
|
uppy.on('upload-success', async (file, response) => {
|
||||||
try {
|
try {
|
||||||
@@ -187,6 +207,7 @@ export function UppyPhotoUpload({
|
|||||||
// Handle upload error
|
// Handle upload error
|
||||||
uppy.on('upload-error', (file, error, response) => {
|
uppy.on('upload-error', (file, error, response) => {
|
||||||
console.error('Upload error:', error);
|
console.error('Upload error:', error);
|
||||||
|
setIsUploading(false);
|
||||||
|
|
||||||
// Check if it's an expired URL error and retry
|
// Check if it's an expired URL error and retry
|
||||||
if (error.message?.includes('expired') || response?.status === 400) {
|
if (error.message?.includes('expired') || response?.status === 400) {
|
||||||
@@ -219,6 +240,9 @@ export function UppyPhotoUpload({
|
|||||||
|
|
||||||
// Handle upload complete
|
// Handle upload complete
|
||||||
uppy.on('complete', (result) => {
|
uppy.on('complete', (result) => {
|
||||||
|
setIsUploading(false);
|
||||||
|
setUploadProgress(0);
|
||||||
|
|
||||||
if (result.successful.length > 0) {
|
if (result.successful.length > 0) {
|
||||||
onUploadComplete?.(uploadedImages);
|
onUploadComplete?.(uploadedImages);
|
||||||
toast({
|
toast({
|
||||||
@@ -234,7 +258,15 @@ export function UppyPhotoUpload({
|
|||||||
return () => {
|
return () => {
|
||||||
uppy.destroy();
|
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 = () => {
|
const handleOpenModal = () => {
|
||||||
if (!disabled) {
|
if (!disabled) {
|
||||||
@@ -242,25 +274,100 @@ export function UppyPhotoUpload({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
const getSizeClasses = () => {
|
||||||
<>
|
switch (size) {
|
||||||
<div className={className}>
|
case 'compact':
|
||||||
{children ? (
|
return 'px-4 py-2 text-sm';
|
||||||
<div onClick={handleOpenModal} className="cursor-pointer">
|
case 'large':
|
||||||
{children}
|
return 'px-8 py-4 text-lg';
|
||||||
</div>
|
default:
|
||||||
|
return 'px-6 py-3';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderUploadTrigger = () => {
|
||||||
|
if (children) {
|
||||||
|
return (
|
||||||
|
<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 || isUploading}
|
||||||
|
className={cn(baseClasses, sizeClasses, disabledClasses)}
|
||||||
|
size={size === 'compact' ? 'sm' : size === 'large' ? 'lg' : 'default'}
|
||||||
|
>
|
||||||
|
{isUploading ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
Uploading... {uploadProgress}%
|
||||||
|
</>
|
||||||
) : (
|
) : (
|
||||||
<Button
|
<>
|
||||||
onClick={handleOpenModal}
|
<Upload className="w-4 h-4" />
|
||||||
disabled={disabled}
|
{size === 'compact' ? 'Upload' : 'Upload Photos'}
|
||||||
variant="outline"
|
</>
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<Upload className="mr-2 h-4 w-4" />
|
|
||||||
Upload Photos
|
|
||||||
</Button>
|
|
||||||
)}
|
)}
|
||||||
|
</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>
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn("space-y-4", className)}>
|
||||||
|
{renderUploadTrigger()}
|
||||||
|
{renderPreview()}
|
||||||
|
|
||||||
{uppyRef.current && (
|
{uppyRef.current && (
|
||||||
<DashboardModal
|
<DashboardModal
|
||||||
@@ -272,21 +379,6 @@ export function UppyPhotoUpload({
|
|||||||
browserBackButtonClose
|
browserBackButtonClose
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
{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>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
200
src/index.css
200
src/index.css
@@ -119,3 +119,203 @@ All colors MUST be HSL.
|
|||||||
@apply bg-background text-foreground;
|
@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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user