Skip to content

Commit d36bc76

Browse files
abue-ammarabue-ammar
authored
Merge pull request abue-ammar#11 from abue-ammar/ui-migration
UI migration
2 parents 3c64496 + d76009b commit d36bc76

8 files changed

Lines changed: 160 additions & 108 deletions

File tree

‎src/components/footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Footer = () => {
1919
href="https://github.com/abue-ammar"
2020
className="text-primary hover:text-primary-foreground underline transition-colors"
2121
>
22-
Abue Ammar.
22+
Abue Ammar
2323
</a>
2424
</span>
2525
</footer>

‎src/components/image-compressor.tsx‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ const ImageCompressor = () => {
248248
<div className="">
249249
<label
250250
ref={dropAreaRef}
251-
className={`relative flex min-h-40 flex-col items-center overflow-hidden rounded-xl border-2 border-dashed p-4 transition-all duration-200 ease-in-out ${
251+
className={`relative flex flex-col items-center overflow-hidden rounded-xl border-2 border-dashed p-2 transition-all duration-200 ease-in-out ${
252252
isDragActive
253253
? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
254254
: "border-gray-300 dark:border-gray-600"
@@ -273,48 +273,48 @@ const ImageCompressor = () => {
273273
<div className="mb-2 flex h-11 w-11 shrink-0 items-center justify-center rounded-full border bg-white dark:bg-gray-800">
274274
<ImageIcon className="size-4 opacity-60" />
275275
</div>
276-
<p className="mb-1.5 text-base font-medium">
276+
<p className="mb-1 text-base font-medium">
277277
{isDragActive
278278
? "Drop your images here"
279279
: "Drag & drop images here"}
280280
</p>
281281
<p className="text-muted-foreground text-sm">
282282
JPG, JPEG, PNG, WEBP
283283
</p>
284-
<p className="text-destructive text-sm">
284+
<p className="text-destructive text-xs">
285285
**PNG formatted images need to be larger than 120KB
286286
</p>
287287
</div>
288288
</label>
289-
<div className="my-4 flex justify-end gap-x-4">
290-
{compressedImages?.length > 0 && filelist?.length > 0 && (
291-
<>
292-
<Button variant={"default"} onClick={handleDownload}>
293-
<Download />
294-
Download All (ZIP)
295-
</Button>
296-
<Button
297-
variant={"destructive"}
298-
onClick={() => {
299-
setValue(60);
300-
setCompressProgress(0);
301-
setCompressedImages([]);
302-
setFilelist([]);
303-
}}
304-
>
305-
<RefreshCcw />
306-
Reset
307-
</Button>
308-
</>
309-
)}
310-
</div>
289+
290+
{compressedImages?.length > 0 && filelist?.length > 0 && (
291+
<div className="mt-4 flex justify-end gap-x-4">
292+
<Button variant={"default"} onClick={handleDownload}>
293+
<Download />
294+
Download All (ZIP)
295+
</Button>
296+
<Button
297+
variant={"destructive"}
298+
onClick={() => {
299+
setValue(60);
300+
setCompressProgress(0);
301+
setCompressedImages([]);
302+
setFilelist([]);
303+
}}
304+
>
305+
<RefreshCcw />
306+
Reset
307+
</Button>
308+
</div>
309+
)}
310+
311311
{loading ? (
312312
<div className="flex flex-col items-center justify-center py-8">
313313
<LoadingSpinner compressProgress={compressProgress} />
314314
</div>
315315
) : (
316-
<div ref={compressedImagesRef}>
317-
<h2 className="mb-2 text-xl font-semibold">Compressed Images</h2>
316+
<div ref={compressedImagesRef} className="mt-4">
317+
<h2 className="text-lg font-bold">Compressed Images</h2>
318318
{compressedImages?.length > 0 ? (
319319
<PhotoProvider>
320320
<div className="grid grid-cols-1 gap-4 py-4 md:grid-cols-2 lg:grid-cols-3">
@@ -330,7 +330,7 @@ const ImageCompressor = () => {
330330
) : (
331331
<div className="text-muted-foreground flex flex-col items-center justify-center py-8 text-center">
332332
<Inbox className="size-14" strokeWidth={1.5} />
333-
<h3 className="mb-1 text-lg font-semibold">
333+
<h3 className="mb-1 text-base font-semibold">
334334
No Compressed Images
335335
</h3>
336336
<p className="max-w-xs text-sm">

‎src/components/image-quality-slider.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const ImageQualitySlider = ({
2626

2727
return (
2828
<div className="w-full">
29-
<label className="block text-xl font-semibold">
29+
<label className="text-base font-bold">
3030
Image Quality: {value}%
3131
<span style={{ color }} className="ml-1">
3232
({label})

‎src/components/intro.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const Intro = () => {
4848
</div>
4949
{/* End Title */}
5050
<div className="mx-auto mt-4 max-w-3xl text-center">
51-
<p className="text-muted-foreground text-xl">
51+
<p className="text-muted-foreground text-xl !leading-6">
5252
Compress images instantly and securely—right on your device. No
5353
uploads, no limits, no APIs. Works offline and keeps your files
5454
private.

‎src/components/loading-spinner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const LoadingSpinner = ({ compressProgress }: { compressProgress: number }) => {
44
return (
55
<div className="text-muted-foreground flex items-center gap-x-2">
66
<LoaderCircle className="size-8 animate-spin" />
7-
<span className="text-muted-foreground animate-pulse text-lg font-medium">
7+
<span className="text-muted-foreground text-lg font-medium">
88
{compressProgress === 100
99
? `Compressed ${compressProgress}%`
1010
: `Compressing... ${compressProgress}%`}

‎src/components/ui/sonner.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { useTheme } from "next-themes"
2-
import { Toaster as Sonner, type ToasterProps } from "sonner"
1+
import { useTheme } from "next-themes";
2+
import { Toaster as Sonner, type ToasterProps } from "sonner";
33

44
const Toaster = ({ ...props }: ToasterProps) => {
5-
const { theme = "system" } = useTheme()
5+
const { theme = "system" } = useTheme();
66

77
return (
88
<Sonner
@@ -17,7 +17,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
1717
}
1818
{...props}
1919
/>
20-
)
21-
}
20+
);
21+
};
2222

23-
export { Toaster }
23+
export { Toaster };

‎src/index.css‎

Lines changed: 119 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
12
@import "tailwindcss";
23
@import "tw-animate-css";
34

@@ -12,7 +13,6 @@ html {
1213
text-rendering: optimizeLegibility;
1314
-webkit-font-smoothing: antialiased;
1415
-moz-osx-font-smoothing: grayscale;
15-
--radius: 0.625rem;
1616
--background: oklch(1 0 0);
1717
--foreground: oklch(0.145 0 0);
1818
--card: oklch(1 0 0);
@@ -28,14 +28,15 @@ html {
2828
--accent: oklch(0.97 0 0);
2929
--accent-foreground: oklch(0.205 0 0);
3030
--destructive: oklch(0.6271 0.2485 27.19);
31+
--destructive-foreground: oklch(1 0 0);
3132
--border: oklch(0.922 0 0);
3233
--input: oklch(0.922 0 0);
3334
--ring: oklch(0.708 0 0);
34-
--chart-1: oklch(0.646 0.222 41.116);
35-
--chart-2: oklch(0.6 0.118 184.704);
36-
--chart-3: oklch(0.398 0.07 227.392);
37-
--chart-4: oklch(0.828 0.189 84.429);
38-
--chart-5: oklch(0.769 0.188 70.08);
35+
--chart-1: oklch(0.81 0.1 252);
36+
--chart-2: oklch(0.62 0.19 260);
37+
--chart-3: oklch(0.55 0.22 263);
38+
--chart-4: oklch(0.49 0.22 264);
39+
--chart-5: oklch(0.42 0.18 266);
3940
--sidebar: oklch(0.985 0 0);
4041
--sidebar-foreground: oklch(0.145 0 0);
4142
--sidebar-primary: oklch(0.205 0 0);
@@ -44,39 +45,82 @@ html {
4445
--sidebar-accent-foreground: oklch(0.205 0 0);
4546
--sidebar-border: oklch(0.922 0 0);
4647
--sidebar-ring: oklch(0.708 0 0);
48+
--font-sans: Roboto Mono, monospace;
49+
--font-serif: Roboto Mono, monospace;
50+
--font-mono: Roboto Mono, monospace;
51+
--radius: 0.625rem;
52+
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
53+
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
54+
--shadow-sm:
55+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
56+
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
57+
--shadow-md:
58+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
59+
--shadow-lg:
60+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
61+
--shadow-xl:
62+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
63+
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
64+
--tracking-normal: 0em;
65+
--spacing: 0.25rem;
4766
--success: oklch(0.6895 0.1865 157.43);
4867
--warning: oklch(0.8231 0.1925 94.17);
4968
}
5069

51-
.range::-webkit-slider-thumb {
52-
-webkit-appearance: none !important;
53-
border-radius: 100%;
54-
background-color: var(--primary);
55-
height: 16px;
56-
width: 16px;
57-
cursor: pointer;
58-
}
59-
.range::-ms-thumb {
60-
border-radius: 100%;
61-
background-color: var(--primary);
62-
height: 18px;
63-
width: 18px;
64-
border: none;
65-
}
66-
.range::-moz-range-thumb {
67-
border-radius: 20px;
68-
height: 16px;
69-
width: 16px;
70-
border: none;
71-
background: none;
72-
background-color: var(--primary);
70+
.dark {
71+
--background: oklch(0.145 0 0);
72+
--foreground: oklch(0.985 0 0);
73+
--card: oklch(0.205 0 0);
74+
--card-foreground: oklch(0.985 0 0);
75+
--popover: oklch(0.269 0 0);
76+
--popover-foreground: oklch(0.985 0 0);
77+
--primary: oklch(0.922 0 0);
78+
--primary-foreground: oklch(0.205 0 0);
79+
--secondary: oklch(0.269 0 0);
80+
--secondary-foreground: oklch(0.985 0 0);
81+
--muted: oklch(0.269 0 0);
82+
--muted-foreground: oklch(0.708 0 0);
83+
--accent: oklch(0.371 0 0);
84+
--accent-foreground: oklch(0.985 0 0);
85+
--destructive: oklch(0.704 0.191 22.216);
86+
--destructive-foreground: oklch(0.985 0 0);
87+
--border: oklch(0.275 0 0);
88+
--input: oklch(0.325 0 0);
89+
--ring: oklch(0.556 0 0);
90+
--chart-1: oklch(0.81 0.1 252);
91+
--chart-2: oklch(0.62 0.19 260);
92+
--chart-3: oklch(0.55 0.22 263);
93+
--chart-4: oklch(0.49 0.22 264);
94+
--chart-5: oklch(0.42 0.18 266);
95+
--sidebar: oklch(0.205 0 0);
96+
--sidebar-foreground: oklch(0.985 0 0);
97+
--sidebar-primary: oklch(0.488 0.243 264.376);
98+
--sidebar-primary-foreground: oklch(0.985 0 0);
99+
--sidebar-accent: oklch(0.269 0 0);
100+
--sidebar-accent-foreground: oklch(0.985 0 0);
101+
--sidebar-border: oklch(0.275 0 0);
102+
--sidebar-ring: oklch(0.439 0 0);
103+
--font-sans: Roboto Mono, monospace;
104+
--font-serif: Roboto Mono, monospace;
105+
--font-mono: Roboto Mono, monospace;
106+
--radius: 0.625rem;
107+
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
108+
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
109+
--shadow-sm:
110+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
111+
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
112+
--shadow-md:
113+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
114+
--shadow-lg:
115+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
116+
--shadow-xl:
117+
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
118+
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
119+
--color-success: var(--success);
120+
--color-warning: var(--warning);
73121
}
74122

75123
@theme inline {
76-
--radius-sm: calc(var(--radius) - 4px);
77-
--radius-md: calc(var(--radius) - 2px);
78-
--radius-lg: var(--radius);
79-
--radius-xl: calc(var(--radius) + 4px);
80124
--color-background: var(--background);
81125
--color-foreground: var(--foreground);
82126
--color-card: var(--card);
@@ -92,6 +136,7 @@ html {
92136
--color-accent: var(--accent);
93137
--color-accent-foreground: var(--accent-foreground);
94138
--color-destructive: var(--destructive);
139+
--color-destructive-foreground: var(--destructive-foreground);
95140
--color-border: var(--border);
96141
--color-input: var(--input);
97142
--color-ring: var(--ring);
@@ -108,46 +153,28 @@ html {
108153
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
109154
--color-sidebar-border: var(--sidebar-border);
110155
--color-sidebar-ring: var(--sidebar-ring);
156+
157+
--font-sans: var(--font-sans);
158+
--font-mono: var(--font-mono);
159+
--font-serif: var(--font-serif);
160+
161+
--radius-sm: calc(var(--radius) - 4px);
162+
--radius-md: calc(var(--radius) - 2px);
163+
--radius-lg: var(--radius);
164+
--radius-xl: calc(var(--radius) + 4px);
165+
166+
--shadow-2xs: var(--shadow-2xs);
167+
--shadow-xs: var(--shadow-xs);
168+
--shadow-sm: var(--shadow-sm);
169+
--shadow: var(--shadow);
170+
--shadow-md: var(--shadow-md);
171+
--shadow-lg: var(--shadow-lg);
172+
--shadow-xl: var(--shadow-xl);
173+
--shadow-2xl: var(--shadow-2xl);
111174
--color-success: var(--success);
112175
--color-warning: var(--warning);
113176
}
114177

115-
.dark {
116-
--background: oklch(0.145 0 0);
117-
--foreground: oklch(0.985 0 0);
118-
--card: oklch(0.205 0 0);
119-
--card-foreground: oklch(0.985 0 0);
120-
--popover: oklch(0.205 0 0);
121-
--popover-foreground: oklch(0.985 0 0);
122-
--primary: oklch(0.922 0 0);
123-
--primary-foreground: oklch(0.205 0 0);
124-
--secondary: oklch(0.269 0 0);
125-
--secondary-foreground: oklch(0.985 0 0);
126-
--muted: oklch(0.269 0 0);
127-
--muted-foreground: oklch(0.708 0 0);
128-
--accent: oklch(0.269 0 0);
129-
--accent-foreground: oklch(0.985 0 0);
130-
--destructive: oklch(0.6271 0.2485 27.19);
131-
--border: oklch(1 0 0 / 10%);
132-
--input: oklch(1 0 0 / 15%);
133-
--ring: oklch(0.556 0 0);
134-
--chart-1: oklch(0.488 0.243 264.376);
135-
--chart-2: oklch(0.696 0.17 162.48);
136-
--chart-3: oklch(0.769 0.188 70.08);
137-
--chart-4: oklch(0.627 0.265 303.9);
138-
--chart-5: oklch(0.645 0.246 16.439);
139-
--sidebar: oklch(0.205 0 0);
140-
--sidebar-foreground: oklch(0.985 0 0);
141-
--sidebar-primary: oklch(0.488 0.243 264.376);
142-
--sidebar-primary-foreground: oklch(0.985 0 0);
143-
--sidebar-accent: oklch(0.269 0 0);
144-
--sidebar-accent-foreground: oklch(0.985 0 0);
145-
--sidebar-border: oklch(1 0 0 / 10%);
146-
--sidebar-ring: oklch(0.556 0 0);
147-
--success: oklch(0.6895 0.1865 157.43);
148-
--warning: oklch(0.8231 0.1925 94.17);
149-
}
150-
151178
@layer base {
152179
* {
153180
@apply border-border outline-ring/50;
@@ -156,3 +183,27 @@ html {
156183
@apply bg-background text-foreground;
157184
}
158185
}
186+
187+
.range::-webkit-slider-thumb {
188+
-webkit-appearance: none !important;
189+
border-radius: 100%;
190+
background-color: var(--primary);
191+
height: 16px;
192+
width: 16px;
193+
cursor: pointer;
194+
}
195+
.range::-ms-thumb {
196+
border-radius: 100%;
197+
background-color: var(--primary);
198+
height: 18px;
199+
width: 18px;
200+
border: none;
201+
}
202+
.range::-moz-range-thumb {
203+
border-radius: 20px;
204+
height: 16px;
205+
width: 16px;
206+
border: none;
207+
background: none;
208+
background-color: var(--primary);
209+
}

0 commit comments

Comments
 (0)