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
type="submit"
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 ? (
<span className="flex items-center gap-2">

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

@@ -373,7 +373,7 @@ export default function CreatePackagePage() {
<Button
type="submit"
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 ? (
<span className="flex items-center gap-2">

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

@@ -143,7 +143,7 @@ export default function VideoProcessingPage() {
{session && (
<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 flex-col">
<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 */}
{session && (
<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 gap-12">
<div className="flex flex-col">
@@ -186,7 +186,7 @@ export default function UploadPage() {
<Button
size="sm"
onClick={handleBackToSelection}
className="bg-blue-600 hover:bg-blue-700 text-white text-xs"
className="btn-blue-gradient"
>
Change Selection
</Button>
@@ -197,10 +197,10 @@ export default function UploadPage() {
)}
{/* Upload Card */}
<Card className="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">
<Card className="bg-white/60 backdrop-blur-md rounded-xl overflow-hidden flex-1">
<CardHeader className="pb-4 ">
<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
</span>
</CardTitle>
@@ -338,8 +338,8 @@ export default function UploadPage() {
<Button
onClick={handleUpload}
disabled={!file || uploading}
className={`w-full h-12 text-sm font-semibold transition-all rounded-xl ${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'
className={`w-full h-12 text-sm font-semibold transition-all rounded-full ${file && !uploading
? 'btn-blue-gradient'
: ''
}`}
size="lg"

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

@@ -148,8 +148,8 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
}
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">
<CardHeader className="pb-6 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
<Card className="bg-white/40 backdrop-blur-sm overflow-hidden">
<CardHeader className="pb-6">
<div className="flex flex-col gap-4">
<div>
<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 className="flex flex-col items-center">
<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' :
status === 'active' ? 'bg-primary text-primary-foreground ring-4 ring-primary/20' :
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-linear-to-b from-[#225999] to-[#56A5FF] text-primary-foreground ring-4 ring-primary/20' :
'bg-muted text-muted-foreground'
}`}
>
@@ -180,7 +180,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
</span>
</div>
{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>
@@ -317,7 +317,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
<Button
onClick={handleProceed}
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"
>

4
components/upload-section.tsx
View File

@@ -200,7 +200,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
}
return (
<Card className="">
<Card className="bg-white/20 backdrop-blur-md">
<CardHeader>
<CardTitle>Upload Video</CardTitle>
<CardDescription>
@@ -356,7 +356,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
<Button
onClick={handleUpload}
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"
>