santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign upload section

Browse Source
This commit is contained in:
santasri.pachhal
2026-03-10 16:08:10 +05:30
parent 9bdbd058e7
commit 1a14596779
6 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/create-location/page.tsx
View File

@@ -591,7 +591,7 @@ export default function CreateLocationPage() {
<Button <Button
type="submit" type="submit"
disabled={isSubmitting || !isFormComplete} disabled={isSubmitting || !isFormComplete}
className="flex-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-600 hover:from-blue-600 hover:via-indigo-600 hover:to-blue-700 text-white" className="flex-1 btn-blue-gradient"
> >
{isSubmitting ? ( {isSubmitting ? (
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">

2
app/create-package/page.tsx
View File

@@ -373,7 +373,7 @@ export default function CreatePackagePage() {
<Button <Button
type="submit" type="submit"
disabled={isSubmitting || !name.trim() || !selectedProjectId} disabled={isSubmitting || !name.trim() || !selectedProjectId}
className="flex-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-600 hover:from-blue-600 hover:via-indigo-600 hover:to-blue-700 text-white" className="flex-1 btn-blue-gradient text-white"
> >
{isSubmitting ? ( {isSubmitting ? (
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">

2
app/upload/[videoId]/page.tsx
View File

@@ -143,7 +143,7 @@ export default function VideoProcessingPage() {
{session && ( {session && (
<div className="mb-4"> <div className="mb-4">
<div className="rounded-xl px-4 py-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50"> <div className="rounded-md px-4 py-3 bg-white/60 backdrop-blur-sm">
<div className="flex items-center gap-12"> <div className="flex items-center gap-12">
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Project</span> <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Project</span>

14
app/upload/page.tsx
View File

@@ -161,7 +161,7 @@ export default function UploadPage() {
{/* Compact Session Info Bar */} {/* Compact Session Info Bar */}
{session && ( {session && (
<div className="mb-4"> <div className="mb-4">
<div className="rounded-xl px-4 py-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50"> <div className="rounded-md px-4 py-3 bg-white/60 backdrop-blur-sm ">
<div className="flex items-center justify-between gap-4"> <div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-12"> <div className="flex items-center gap-12">
<div className="flex flex-col"> <div className="flex flex-col">
@@ -186,7 +186,7 @@ export default function UploadPage() {
<Button <Button
size="sm" size="sm"
onClick={handleBackToSelection} onClick={handleBackToSelection}
className="bg-blue-600 hover:bg-blue-700 text-white text-xs" className="btn-blue-gradient"
> >
Change Selection Change Selection
</Button> </Button>
@@ -197,10 +197,10 @@ export default function UploadPage() {
)} )}
{/* Upload Card */} {/* Upload Card */}
<Card className="rounded-xl overflow-hidden flex-1"> <Card className="bg-white/60 backdrop-blur-md rounded-xl overflow-hidden flex-1">
<CardHeader className="pb-4 border-b border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-900"> <CardHeader className="pb-4 ">
<CardTitle className="text-xl font-bold"> <CardTitle className="text-xl font-bold">
<span className="bg-gradient-to-r from-blue-600 via-blue-500 to-blue-600 dark:from-blue-400 dark:via-blue-300 dark:to-blue-400 bg-clip-text text-transparent"> <span className="heading-gradient">
Upload Video Upload Video
</span> </span>
</CardTitle> </CardTitle>
@@ -338,8 +338,8 @@ export default function UploadPage() {
<Button <Button
onClick={handleUpload} onClick={handleUpload}
disabled={!file || uploading} disabled={!file || uploading}
className={`w-full h-12 text-sm font-semibold transition-all rounded-xl ${file && !uploading className={`w-full h-12 text-sm font-semibold transition-all rounded-full ${file && !uploading
? 'bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white shadow-lg shadow-blue-500/25' ? 'btn-blue-gradient'
: '' : ''
}`} }`}
size="lg" size="lg"

12
components/project-selection-section.tsx
View File

@@ -148,8 +148,8 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
} }
return ( return (
<Card className="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 overflow-hidden"> <Card className="bg-white/40 backdrop-blur-sm overflow-hidden">
<CardHeader className="pb-6 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900"> <CardHeader className="pb-6">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div> <div>
<CardTitle className="text-2xl font-semibold">Select Project Location</CardTitle> <CardTitle className="text-2xl font-semibold">Select Project Location</CardTitle>
@@ -167,8 +167,8 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
<div key={step} className="flex items-center"> <div key={step} className="flex items-center">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div <div
className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-colors ${status === 'completed' ? 'bg-primary text-primary-foreground' : className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-colors ${status === 'completed' ? 'bg-linear-to-b from-[#225999] to-[#56A5FF] text-primary-foreground' :
status === 'active' ? 'bg-primary text-primary-foreground ring-4 ring-primary/20' : status === 'active' ? 'bg-linear-to-b from-[#225999] to-[#56A5FF] text-primary-foreground ring-4 ring-primary/20' :
'bg-muted text-muted-foreground' 'bg-muted text-muted-foreground'
}`} }`}
> >
@@ -180,7 +180,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
</span> </span>
</div> </div>
{index < 2 && ( {index < 2 && (
<div className={`w-12 h-0.5 mx-2 mt-[-16px] rounded-full ${getStepStatus(step + 1) !== 'pending' ? 'bg-primary' : 'bg-border' <div className={`w-12 h-0.5 mx-2 mt-[-16px] rounded-full ${getStepStatus(step + 1) !== 'pending' ? 'bg-linear-to-b from-[#225999] to-[#56A5FF]' : 'bg-border'
}`} /> }`} />
)} )}
</div> </div>
@@ -317,7 +317,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
<Button <Button
onClick={handleProceed} onClick={handleProceed}
disabled={!isComplete} disabled={!isComplete}
className={`w-full h-14 text-base font-semibold rounded-xl ${isComplete ? 'btn-gradient text-white' : '' className={`w-full h-14 text-base font-semibold ${isComplete ? 'btn-blue-gradient text-white' : ''
}`} }`}
size="lg" size="lg"
> >

4
components/upload-section.tsx
View File

@@ -200,7 +200,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
} }
return ( return (
<Card className=""> <Card className="bg-white/20 backdrop-blur-md">
<CardHeader> <CardHeader>
<CardTitle>Upload Video</CardTitle> <CardTitle>Upload Video</CardTitle>
<CardDescription> <CardDescription>
@@ -356,7 +356,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
<Button <Button
onClick={handleUpload} onClick={handleUpload}
disabled={!file || uploading} disabled={!file || uploading}
className="w-full bg-blue-600 hover:bg-blue-700 text-white shadow-lg shadow-blue-500/25" className="w-full btn-blue-gradient rounded-full"
size="lg" size="lg"
> >