Skip to content

Commit 5ecf1ab

Browse files
akash098pakash098p
authored
Merge pull request #1 from akash098p/main
Updated
2 parents 79cf782 + 982f585 commit 5ecf1ab

25 files changed

Lines changed: 82 additions & 58 deletions

‎src/components/layout/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const Header: React.FC<HeaderProps> = ({ title, actions }) => {
1010
const { toggleSidebar } = useUIStore()
1111

1212
return (
13-
<header className="sticky top-0 z-20 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800">
13+
<header className="sticky top-0 z-20 border-b border-orange-300/60 dark:border-slate-800/60 bg-white/80 dark:bg-slate-950/80 backdrop-blur-md">
1414
<div className="flex items-center justify-between px-6 py-4">
1515
<div className="flex items-center gap-4">
1616
<button

‎src/components/layout/Sidebar.tsx‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,24 @@ export const Sidebar: React.FC<SidebarProps> = ({ items, isOpen, onClose }) => {
3131
{/* Sidebar */}
3232
<aside
3333
className={cn(
34-
'fixed left-0 top-0 z-40 flex h-screen w-sidebar flex-col border-r border-slate-200 bg-white transition-transform dark:border-slate-800 dark:bg-slate-900 lg:translate-x-0',
34+
// Light mode: warm orange/amber gradient
35+
'fixed left-0 top-0 z-40 flex h-screen w-sidebar flex-col border-r border-orange-300/60',
36+
'bg-gradient-to-b from-orange-100 via-amber-100 to-yellow-100',
37+
// Dark mode: modern deep gradient (slate-950 -> indigo-950 -> slate-900)
38+
'dark:from-slate-950 dark:via-indigo-950 dark:to-slate-900 dark:border-slate-800/60',
39+
'transition-transform lg:translate-x-0',
3540
!isOpen && '-translate-x-full lg:translate-x-0',
3641
)}
3742
aria-label="Primary navigation"
3843
>
3944
{/* Header */}
40-
<div className="flex items-center justify-between p-6 border-b border-slate-200 dark:border-slate-800">
41-
<h1 className="text-xl font-bold text-primary-600">OpenDocs</h1>
45+
<div className="flex items-center justify-between p-6 border-b border-orange-300/60 dark:border-slate-800/60">
46+
<h1 className="text-xl font-bold bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-500 dark:from-sky-500 dark:via-blue-500 dark:to-indigo-500 bg-clip-text text-transparent">
47+
OpenDocs
48+
</h1>
4249
<button
4350
onClick={onClose}
44-
className="lg:hidden p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg"
51+
className="lg:hidden p-2 hover:bg-orange-300/60 dark:hover:bg-slate-800/60 rounded-lg text-slate-700 dark:text-slate-200"
4552
aria-label="Close navigation"
4653
>
4754
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -60,20 +67,21 @@ export const Sidebar: React.FC<SidebarProps> = ({ items, isOpen, onClose }) => {
6067
onClick={onClose}
6168
className={({ isActive }) =>
6269
cn(
63-
'flex items-center justify-between rounded-lg px-4 py-3 transition-colors',
64-
'hover:bg-slate-100 dark:hover:bg-slate-800',
65-
isActive
66-
? 'bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-200'
67-
: 'text-slate-700 dark:text-slate-300',
70+
'flex items-center justify-between rounded-lg px-4 py-3 transition-all duration-200',
71+
// Inactive: subtle text + hover
72+
!isActive && 'text-slate-700 dark:text-slate-300 hover:bg-orange-300/60 dark:hover:bg-slate-800/60',
73+
// Active: light mode = warm orange/amber gradient, dark mode = blue/indigo gradient
74+
isActive &&
75+
'bg-gradient-to-r from-orange-500 via-amber-500 to-yellow-500 text-white shadow-lg shadow-orange-500/30 dark:from-sky-500 dark:via-blue-500 dark:to-indigo-500 dark:shadow-blue-500/30',
6876
)
6977
}
7078
>
7179
<div className="flex items-center gap-3">
7280
<span className="w-5 h-5">{item.icon}</span>
73-
<span>{item.label}</span>
81+
<span className="font-medium">{item.label}</span>
7482
</div>
7583
{item.badge && (
76-
<span className="px-2 py-1 text-xs font-semibold text-white bg-primary-600 rounded-full">
84+
<span className="px-2 py-1 text-xs font-semibold text-white bg-white/20 rounded-full backdrop-blur">
7785
{item.badge}
7886
</span>
7987
)}
@@ -84,9 +92,11 @@ export const Sidebar: React.FC<SidebarProps> = ({ items, isOpen, onClose }) => {
8492
</nav>
8593

8694
{/* Footer */}
87-
<div className="border-t border-slate-200 dark:border-slate-800 p-4 space-y-3">
95+
<div className="border-t border-orange-300/60 dark:border-slate-800/60 p-4 space-y-3">
8896
<div className="flex items-center justify-between">
89-
<span className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase">Theme</span>
97+
<span className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
98+
Theme
99+
</span>
90100
<ThemeSwitcher />
91101
</div>
92102
</div>

‎src/components/tools/AdjustPreview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const AdjustPreview: React.FC<AdjustPreviewProps> = ({ file, values }) =>
6565
}, [ready, showOriginal, values])
6666

6767
return (
68-
<div className="rounded-lg border border-slate-200 bg-white p-3 dark:border-slate-700 dark:bg-slate-900">
68+
<div className="rounded-lg border border-slate-200 bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm p-3 dark:border-slate-700">
6969
<div className="mb-2 flex items-center justify-between gap-2">
7070
<p className="text-sm font-semibold">Live preview</p>
7171
<div className="flex items-center gap-3">

‎src/components/tools/AlbumEditor.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,7 @@ export const AlbumEditor = forwardRef<AlbumEditorHandle, AlbumEditorProps>(({ fi
339339
</p>
340340
</aside>
341341

342-
<div className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/40">
342+
<div className="rounded-xl border border-slate-200 bg-white/70 dark:bg-slate-800/40 backdrop-blur-sm p-4 dark:border-slate-700">
343343
<div className="mb-3 flex items-center justify-between">
344344
<h3 className="text-sm font-semibold text-slate-700 dark:text-slate-200">Live preview</h3>
345345
<span className="text-xs text-slate-500 dark:text-slate-400">

‎src/components/tools/ImageEditor.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({ fi
255255
const outHeight = rotCanvas ? Math.round((crop.height / 100) * rotCanvas.height) : 0
256256

257257
return (
258-
<div className="rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/50">
258+
<div className="rounded-lg border border-slate-200 bg-white/70 dark:bg-slate-800/50 backdrop-blur-sm p-4 dark:border-slate-700">
259259
<div className="mb-3 flex flex-wrap items-center justify-between gap-2">
260260
<p className="text-sm font-semibold text-slate-700 dark:text-slate-200">Crop &amp; rotate editor</p>
261261
<div className="flex flex-wrap items-center gap-2">
@@ -299,7 +299,7 @@ export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({ fi
299299
</div>
300300
{/* Movable / resizable crop box */}
301301
<div
302-
className="absolute cursor-move border-2 border-primary-500"
302+
className="absolute cursor-move border-2 border-orange-500 dark:border-primary-500"
303303
style={{ left: `${crop.x}%`, top: `${crop.y}%`, width: `${crop.width}%`, height: `${crop.height}%` }}
304304
onPointerDown={startDrag('move')}
305305
>
@@ -313,7 +313,7 @@ export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({ fi
313313
<div
314314
key={handle}
315315
onPointerDown={startDrag(handle)}
316-
className={`absolute h-4 w-4 rounded-full border-2 border-white bg-primary-600 shadow ${HANDLE_STYLES[handle]}`}
316+
className={`absolute h-4 w-4 rounded-full border-2 border-white bg-orange-600 dark:bg-primary-600 shadow ${HANDLE_STYLES[handle]}`}
317317
/>
318318
))}
319319
<div className="pointer-events-none absolute -top-7 left-0 whitespace-nowrap rounded bg-slate-900/85 px-2 py-0.5 text-xs text-white">

‎src/components/tools/OutputPreview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export const OutputPreview: React.FC<OutputPreviewProps> = ({ outputs, onClear }
114114
{outputs.map((output, index) => (
115115
<div
116116
key={`${output.name}-${index}`}
117-
className="rounded-lg border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-800"
117+
className="rounded-lg border border-slate-200 bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm p-4 dark:border-slate-700"
118118
>
119119
<div className="mb-3 flex justify-center overflow-hidden">
120120
{renderPreview(output)}

‎src/components/tools/ToolRunner.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const isVisible = (gate: { field: string; equals: string } | undefined, values:
2424

2525
const ToolFieldInput: React.FC<{ field: ToolField; value: string; onChange: (value: string) => void }> = ({ field, value, onChange }) => {
2626
const sharedClass =
27-
'flex h-10 w-full rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-base focus:outline-none focus:ring-2 focus:ring-primary-500'
27+
'flex h-10 w-full rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-base focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-primary-500'
2828
if (field.type === 'select') {
2929
return (
3030
<select name={field.name} value={value} onChange={(event) => onChange(event.target.value)} className={sharedClass}>
@@ -84,7 +84,7 @@ const ToolFieldInput: React.FC<{ field: ToolField; value: string; onChange: (val
8484
max={field.max}
8585
step={field.step}
8686
onChange={(event) => onChange(event.target.value)}
87-
className="min-w-0 flex-1 cursor-pointer accent-primary-600"
87+
className="min-w-0 flex-1 cursor-pointer accent-orange-600 dark:accent-primary-600"
8888
/>
8989
<span className="w-14 shrink-0 rounded-md bg-slate-100 py-0.5 text-center text-xs font-semibold tabular-nums text-slate-700 dark:bg-slate-800 dark:text-slate-300">
9090
{value}
@@ -296,7 +296,7 @@ export const ToolRunner: React.FC<ToolRunnerProps> = ({ tool, onBack }) => {
296296
{outputs ? (
297297
<OutputPreview outputs={outputs} onClear={handleClear} />
298298
) : (
299-
<div className="rounded-lg border-2 border-dashed border-slate-200 bg-slate-50 p-8 text-center dark:border-slate-700 dark:bg-slate-900">
299+
<div className="rounded-lg border-2 border-dashed border-orange-200 bg-white/50 dark:border-slate-700 dark:bg-slate-900/50 p-8 text-center backdrop-blur-sm">
300300
<p className="font-semibold">Output appears here</p>
301301
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
302302
Your files are processed entirely in this browser — nothing is uploaded anywhere.
@@ -308,7 +308,7 @@ export const ToolRunner: React.FC<ToolRunnerProps> = ({ tool, onBack }) => {
308308
<div className="mt-4">
309309
<div className="h-2 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700">
310310
<div
311-
className="h-full rounded-full bg-primary-600 transition-all duration-300"
311+
className="h-full rounded-full bg-orange-600 dark:bg-primary-600 transition-all duration-300"
312312
style={{ width: `${progress}%` }}
313313
/>
314314
</div>

‎src/components/ui/Badge.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const Badge: React.FC<BadgeProps> = ({ className, variant = 'neutral', ..
1010
neutral: 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',
1111
success: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200',
1212
warning: 'bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-200',
13-
primary: 'bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-200',
13+
primary: 'bg-orange-100 text-orange-800 dark:bg-primary-950 dark:text-primary-200',
1414
}
1515

1616
return (

‎src/components/ui/Button.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
1313
'inline-flex items-center justify-center font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-slate-950 disabled:opacity-50 disabled:cursor-not-allowed'
1414

1515
const variants = {
16-
primary: 'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500',
16+
primary:
17+
'bg-orange-600 text-white hover:bg-orange-700 focus:ring-orange-500 dark:bg-primary-600 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-500',
1718
secondary: 'bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-slate-100 hover:bg-slate-300 dark:hover:bg-slate-600 focus:ring-slate-500',
1819
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
1920
ghost: 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 focus:ring-slate-500',

‎src/components/ui/Card.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, ..
77
<div
88
ref={ref}
99
className={cn(
10-
'rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm',
10+
'rounded-lg border border-orange-200 dark:border-slate-700 bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm shadow-sm',
1111
className,
1212
)}
1313
{...props}
@@ -18,7 +18,7 @@ Card.displayName = 'Card'
1818

1919
export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
2020
({ className, ...props }, ref) => (
21-
<div ref={ref} className={cn('flex flex-col space-y-1.5 p-6 border-b border-slate-200 dark:border-slate-700', className)} {...props} />
21+
<div ref={ref} className={cn('flex flex-col space-y-1.5 p-6 border-b border-orange-200 dark:border-slate-700', className)} {...props} />
2222
),
2323
)
2424

0 commit comments

Comments
 (0)