Skip to content

Commit a55a677

Browse files
brian-kim31brian-kim31
committed
Revert UIs to Default shadcdn
1 parent d2810b3 commit a55a677

6 files changed

Lines changed: 388 additions & 322 deletions

File tree

‎app/next-client-app/app/(protected)/scanreports/create/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default async function ScanReports() {
1111
return (
1212
<>
1313
<div className="flex font-semibold text-xl items-center">
14-
<FileScan className="mr-2" />
14+
<FileScan className="mr-2 text-green-700" />
1515
<Link href="/scanreports">
1616
<h2 className="text-muted-foreground">Scan Reports</h2>
1717
</Link>

‎app/next-client-app/app/globals.css‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,16 @@
1010
--popover-foreground: 222.2 47.4% 11.2%;
1111
--muted: 210 40% 96.1%;
1212
--muted-foreground: 215.4 16.3% 46.9%;
13-
--success: 142.1 76.2% 36.3%;
13+
--success: 142.1 76.2% 36.3%;
1414
--success-foreground: 210 40% 98%;
1515
--destructive: 0 84.2% 60.2%;
1616
--destructive-foreground: 210 40% 98%;
17-
--warning: 38 92% 50%;
17+
--warning: 38 92% 50%;
1818
--warning-foreground: 222.2 47.4% 11.2%;
1919
--accent: 240 4.8% 95.9%;
2020
--accent-foreground: 240 10% 3.9%;
21-
--primary: 227 45% 43%; /* #3C579E */
22-
--primary-foreground: 0 0% 100%;
21+
--primary: 0 0% 0%; /* black */
22+
--primary-foreground: 0 0% 100%; /* white */
2323
--secondary: 210 40% 96.1%;
2424
--secondary-foreground: 222.2 47.4% 11.2%;
2525
--ring: 227 45% 43%; /* #3C579E */
@@ -39,8 +39,8 @@
3939
--warning-foreground: 210 40% 98%;
4040
--accent: 240 3.7% 15.9%;
4141
--accent-foreground: 0 0% 98%;
42-
--primary: 227 45% 43%;
43-
--primary-foreground: 0 0% 100%;
42+
--primary: 0 0% 0%; /* black */
43+
--primary-foreground: 0 0% 100%; /* white */
4444
--secondary: 222.2 47.4% 11.2%;
4545
--secondary-foreground: 210 40% 98%;
4646
}
@@ -64,20 +64,18 @@ button.rounded-full:focus-visible {
6464
}
6565

6666
.my-react-select__option--is-focused {
67-
background-color: hsl(var(--accent)) !important;
68-
color: hsl(var(--foreground)) !important;
67+
background-color: hsl(var(--accent)) !important;
68+
color: hsl(var(--foreground)) !important;
6969
}
7070

7171
.my-react-select__option--is-selected {
72-
background-color: hsl(var(--accent)) !important;
72+
background-color: hsl(var(--accent)) !important;
7373
color: hsl(var(--foreground)) !important;
7474
font-weight: 600;
7575
}
7676

7777
.dark .my-react-select__option--is-selected {
78-
background-color: hsl(
79-
var(--accent)
80-
) !important;
78+
background-color: hsl(var(--accent)) !important;
8179
color: hsl(var(--foreground)) !important;
8280
font-weight: 600;
8381
border: 1px solid hsl(var(--muted-foreground));
@@ -127,3 +125,21 @@ button.rounded-full:focus-visible {
127125
.dark .pagination-btn {
128126
@apply bg-white text-black border-white ring-white;
129127
}
128+
129+
/* Sonner toast global styles */
130+
[data-sonner-toast][data-type="success"] {
131+
background: hsl(var(--success)) !important;
132+
color: hsl(var(--success-foreground)) !important;
133+
}
134+
[data-sonner-toast][data-type="error"] {
135+
background: hsl(var(--destructive)) !important;
136+
color: hsl(var(--destructive-foreground)) !important;
137+
}
138+
[data-sonner-toast][data-type="info"] {
139+
background: hsl(var(--primary)) !important;
140+
color: hsl(var(--primary-foreground)) !important;
141+
}
142+
[data-sonner-toast][data-type="warning"] {
143+
background: hsl(var(--warning)) !important;
144+
color: hsl(var(--warning-foreground)) !important;
145+
}

‎app/next-client-app/components/ui/breadcrumb.tsx‎

Lines changed: 82 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,102 @@
1-
import * as React from "react";
2-
import { Slot } from "@radix-ui/react-slot";
3-
import { ChevronRight, MoreHorizontal } from "lucide-react";
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { ChevronRight, MoreHorizontal } from "lucide-react"
44

5-
import { cn } from "@/lib/utils";
5+
import { cn } from "@/lib/utils"
66

7-
const Breadcrumb = React.forwardRef<
8-
HTMLElement,
9-
React.ComponentPropsWithoutRef<"nav"> & {
10-
separator?: React.ReactNode;
11-
}
12-
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
13-
Breadcrumb.displayName = "Breadcrumb";
7+
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
8+
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
9+
}
1410

15-
const BreadcrumbList = React.forwardRef<
16-
HTMLOListElement,
17-
React.ComponentPropsWithoutRef<"ol">
18-
>(({ className, ...props }, ref) => (
19-
<ol
20-
ref={ref}
21-
className={cn(
22-
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
23-
className,
24-
)}
25-
{...props}
26-
/>
27-
));
28-
BreadcrumbList.displayName = "BreadcrumbList";
11+
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
12+
return (
13+
<ol
14+
data-slot="breadcrumb-list"
15+
className={cn(
16+
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
17+
className
18+
)}
19+
{...props}
20+
/>
21+
)
22+
}
2923

30-
const BreadcrumbItem = React.forwardRef<
31-
HTMLLIElement,
32-
React.ComponentPropsWithoutRef<"li">
33-
>(({ className, ...props }, ref) => (
34-
<li
35-
ref={ref}
36-
className={cn("inline-flex items-center gap-1.5", className)}
37-
{...props}
38-
/>
39-
));
40-
BreadcrumbItem.displayName = "BreadcrumbItem";
24+
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
25+
return (
26+
<li
27+
data-slot="breadcrumb-item"
28+
className={cn("inline-flex items-center gap-1.5", className)}
29+
{...props}
30+
/>
31+
)
32+
}
4133

42-
const BreadcrumbLink = React.forwardRef<
43-
HTMLAnchorElement,
44-
React.ComponentPropsWithoutRef<"a"> & {
45-
asChild?: boolean;
46-
}
47-
>(({ asChild, className, ...props }, ref) => {
48-
const Comp = asChild ? Slot : "a";
34+
function BreadcrumbLink({
35+
asChild,
36+
className,
37+
...props
38+
}: React.ComponentProps<"a"> & {
39+
asChild?: boolean
40+
}) {
41+
const Comp = asChild ? Slot : "a"
4942

5043
return (
5144
<Comp
52-
ref={ref}
53-
className={cn(
54-
"transition-colors hover:text-foreground",
55-
className,
56-
)}
45+
data-slot="breadcrumb-link"
46+
className={cn("hover:text-foreground transition-colors", className)}
5747
{...props}
5848
/>
59-
);
60-
});
61-
BreadcrumbLink.displayName = "BreadcrumbLink";
49+
)
50+
}
6251

63-
const BreadcrumbPage = React.forwardRef<
64-
HTMLSpanElement,
65-
React.ComponentPropsWithoutRef<"span">
66-
>(({ className, ...props }, ref) => (
67-
<span
68-
ref={ref}
69-
role="link"
70-
aria-disabled="true"
71-
aria-current="page"
72-
className={cn("font-normal text-foreground", className)}
73-
{...props}
74-
/>
75-
));
76-
BreadcrumbPage.displayName = "BreadcrumbPage";
52+
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
53+
return (
54+
<span
55+
data-slot="breadcrumb-page"
56+
role="link"
57+
aria-disabled="true"
58+
aria-current="page"
59+
className={cn("text-foreground font-normal", className)}
60+
{...props}
61+
/>
62+
)
63+
}
7764

78-
const BreadcrumbSeparator = ({
65+
function BreadcrumbSeparator({
7966
children,
8067
className,
8168
...props
82-
}: React.ComponentProps<"li">) => (
83-
<li
84-
role="presentation"
85-
aria-hidden="true"
86-
className={cn("[&>svg]:size-3.5", className)}
87-
{...props}
88-
>
89-
{children ?? <ChevronRight />}
90-
</li>
91-
);
92-
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
69+
}: React.ComponentProps<"li">) {
70+
return (
71+
<li
72+
data-slot="breadcrumb-separator"
73+
role="presentation"
74+
aria-hidden="true"
75+
className={cn("[&>svg]:size-3.5", className)}
76+
{...props}
77+
>
78+
{children ?? <ChevronRight />}
79+
</li>
80+
)
81+
}
9382

94-
const BreadcrumbEllipsis = ({
83+
function BreadcrumbEllipsis({
9584
className,
9685
...props
97-
}: React.ComponentProps<"span">) => (
98-
<span
99-
role="presentation"
100-
aria-hidden="true"
101-
className={cn("flex h-9 w-9 items-center justify-center", className)}
102-
{...props}
103-
>
104-
<MoreHorizontal className="h-4 w-4" />
105-
<span className="sr-only">More</span>
106-
</span>
107-
);
108-
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
86+
}: React.ComponentProps<"span">) {
87+
return (
88+
<span
89+
data-slot="breadcrumb-ellipsis"
90+
role="presentation"
91+
aria-hidden="true"
92+
className={cn("flex size-9 items-center justify-center", className)}
93+
{...props}
94+
>
95+
<MoreHorizontal className="size-4" />
96+
<span className="sr-only">More</span>
97+
</span>
98+
)
99+
}
109100

110101
export {
111102
Breadcrumb,
@@ -115,4 +106,4 @@ export {
115106
BreadcrumbPage,
116107
BreadcrumbSeparator,
117108
BreadcrumbEllipsis,
118-
};
109+
}

‎app/next-client-app/components/ui/button.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import * as React from "react";
2-
import { Slot } from "@radix-ui/react-slot";
3-
import { cva, type VariantProps } from "class-variance-authority";
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { cva, type VariantProps } from "class-variance-authority"
44

5-
import { cn } from "@/lib/utils";
5+
import { cn } from "@/lib/utils"
66

77
const buttonVariants = cva(
88
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
99
{
1010
variants: {
1111
variant: {
1212
default:
13-
"bg-black text-white dark:bg-white dark:text-black shadow-xs hover:bg-black/90 dark:hover:bg-white/90",
13+
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
1414
destructive:
1515
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
1616
outline:
@@ -19,21 +19,21 @@ const buttonVariants = cva(
1919
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
2020
ghost:
2121
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22-
link: "text-primary underline-offset-4 hover:underline"
22+
link: "text-primary underline-offset-4 hover:underline",
2323
},
2424
size: {
2525
default: "h-9 px-4 py-2 has-[>svg]:px-3",
2626
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
2727
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28-
icon: "size-9"
29-
}
28+
icon: "size-9",
29+
},
3030
},
3131
defaultVariants: {
3232
variant: "default",
33-
size: "default"
34-
}
33+
size: "default",
34+
},
3535
}
36-
);
36+
)
3737

3838
function Button({
3939
className,
@@ -43,17 +43,17 @@ function Button({
4343
...props
4444
}: React.ComponentProps<"button"> &
4545
VariantProps<typeof buttonVariants> & {
46-
asChild?: boolean;
46+
asChild?: boolean
4747
}) {
48-
const Comp = asChild ? Slot : "button";
48+
const Comp = asChild ? Slot : "button"
4949

5050
return (
5151
<Comp
5252
data-slot="button"
5353
className={cn(buttonVariants({ variant, size, className }))}
5454
{...props}
5555
/>
56-
);
56+
)
5757
}
5858

59-
export { Button, buttonVariants };
59+
export { Button, buttonVariants }

0 commit comments

Comments
 (0)