Skip to content

Commit b9927a4

Browse files
alindtalindt
committed
more...
1 parent fc55832 commit b9927a4

24 files changed

+98
-76
lines changed

‎src/app/(dashboard)/peer/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ function PeerOverview() {
244244
"border border-gray-200 dark:border-nb-gray-900 border-t-0 rounded-b-md bg-gray-50 dark:bg-nb-gray-940 px-[1.28rem] pt-3 pb-5 flex flex-col gap-4 mx-[0.25rem]",
245245
!loginExpiration
246246
? "opacity-50 pointer-events-none"
247-
: "bg-gray-100 dark:bg-nb-gray-930/80",
247+
: "bg-subtle-emphasis",
248248
)}
249249
>
250250
<PeerExpirationToggle
@@ -548,7 +548,7 @@ function EditNameModal({ onSuccess, peer, initialName }: Readonly<ModalProps>) {
548548
If the domain name already exists, we add an increment number
549549
suffix to it.
550550
</HelpText>
551-
<div className={"text-netbird text-sm break-all whitespace-normal"}>
551+
<div className={"text-highlight text-sm break-all whitespace-normal"}>
552552
{domainNamePreview}
553553
</div>
554554
</Card>

‎src/app/globals.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,29 @@
1111
.table-row-hoverable {
1212
@apply transition-all hover:bg-gray-100 dark:hover:bg-nb-gray-940 cursor-pointer;
1313
}
14+
15+
/* Semantic Text Classes */
16+
.text-primary {
17+
@apply text-gray-700 dark:text-nb-gray-100;
18+
}
19+
20+
.text-muted {
21+
@apply text-neutral-500 dark:text-neutral-400;
22+
}
23+
24+
.text-highlight {
25+
@apply text-netbird;
26+
}
27+
28+
/* Semantic Border Class */
29+
.border-default {
30+
@apply border-neutral-200 dark:border-nb-gray-700;
31+
}
32+
33+
/* Semantic Background Class */
34+
.bg-subtle-emphasis {
35+
@apply bg-gray-100 dark:bg-nb-gray-930/80;
36+
}
1437
}
1538

1639
h1 {

‎src/components/Code.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default function Code({
4141
"rounded-md text-sm transition-all relative duration-300 border",
4242
dark
4343
? "bg-gray-50 border-neutral-200 dark:border-nb-gray-800 hover:bg-gray-100 dark:hover:bg-nb-gray-900/80 dark:bg-nb-gray-930"
44-
: "bg-gray-50 border-neutral-200 dark:border-nb-gray-700 hover:bg-gray-100 dark:hover:bg-nb-gray-900/80 dark:bg-nb-gray-900",
44+
: "bg-gray-50 border-default hover:bg-gray-100 dark:hover:bg-nb-gray-900/80 dark:bg-nb-gray-900",
4545
dark
4646
? "text-gray-700 hover:text-gray-900 dark:text-nb-gray-300 dark:hover:text-nb-gray-300"
4747
: "text-gray-700 hover:text-gray-900 dark:text-nb-gray-200 dark:hover:text-nb-gray-200",

‎src/components/Command.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ const CommandShortcut = ({
133133
return (
134134
<span
135135
className={cn(
136-
"ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
136+
"ml-auto text-xs tracking-widest text-muted",
137137
className,
138138
)}
139139
{...props}

‎src/components/Dialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const DialogDescription = React.forwardRef<
101101
>(({ className, ...props }, ref) => (
102102
<DialogPrimitive.Description
103103
ref={ref}
104-
className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
104+
className={cn("text-sm text-muted", className)}
105105
{...props}
106106
/>
107107
));

‎src/components/DropdownInput.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ export const DropdownInput = forwardRef<HTMLInputElement, Props>(
1717
<input
1818
ref={ref}
1919
className={cn(
20-
"min-h-[42px] w-full relative",
21-
"border-b-0 border-t-0 border-r-0 border-l-0 border-neutral-200 dark:border-nb-gray-700 items-center",
20+
"min-h-[42px] w-full relative border-default items-center",
21+
"border-b-0 border-t-0 border-r-0 border-l-0",
2222
"bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
23-
"dark:placeholder:text-nb-gray-400 font-light placeholder:text-neutral-500 pl-10",
23+
"dark:placeholder:text-neutral-500 font-light placeholder:text-neutral-500 pl-10",
2424
)}
2525
value={value}
2626
onChange={(e) => onChange(e.target.value)}

‎src/components/Input.tsx‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -20,32 +20,31 @@ export interface InputProps
2020
prefixClassName?: string;
2121
}
2222

23-
const inputVariants = cva("", {
24-
variants: {
25-
variant: {
26-
default: [
27-
"dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-nb-gray-700",
28-
"ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
29-
],
30-
darker: [
31-
"dark:bg-nb-gray-920 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-300 dark:border-nb-gray-800",
32-
"ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50 dark:focus-visible:ring-neutral-500/20 focus-visible:ring-neutral-300/10",
33-
],
34-
error: [
35-
"dark:bg-nb-gray-900 dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500 border-neutral-200 dark:border-red-500 text-red-500",
36-
"ring-offset-red-500/10 dark:ring-offset-red-500/10 dark:focus-visible:ring-red-500/10 focus-visible:ring-red-500/10",
37-
],
23+
const inputVariants = cva(
24+
[
25+
"flex w-full min-h-[42px] rounded-md bg-white px-3 pb-3 pt-2.5 text-sm file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
26+
"file:border-0",
27+
"focus-visible:ring-2 focus-visible:ring-offset-2",
28+
"dark:placeholder:text-neutral-400/70 placeholder:text-neutral-500",
29+
"ring-offset-neutral-200/20 dark:ring-offset-neutral-950/50",
30+
],
31+
{
32+
variants: {
33+
variant: {
34+
default:
35+
"border border-default dark:bg-nb-gray-900 focus-visible:ring-neutral-950 dark:focus-visible:ring-neutral-300",
36+
error:
37+
"border border-red-500/50 dark:border-red-500/50 dark:bg-nb-gray-900 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/20",
38+
grey:
39+
"border border-default bg-gray-100 dark:bg-nb-gray-900 text-gray-500 dark:text-nb-gray-300 focus-visible:ring-neutral-950 dark:focus-visible:ring-neutral-300",
40+
ghost: "border border-transparent",
41+
},
3842
},
39-
prefixSuffixVariant: {
40-
default: [
41-
"bg-gray-100 dark:bg-nb-gray-900 border-neutral-200 dark:border-nb-gray-700 text-gray-500 dark:text-nb-gray-300",
42-
],
43-
error: [
44-
"bg-red-50 dark:bg-nb-gray-900 border-red-500 text-red-500",
45-
],
43+
defaultVariants: {
44+
variant: "default",
4645
},
4746
},
48-
});
47+
);
4948

5049
const Input = React.forwardRef<HTMLInputElement, InputProps>(
5150
(

‎src/components/NetworkRouteSelector.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ export function NetworkRouteSelector({
9393
<PopoverTrigger asChild>
9494
<button
9595
className={cn(
96-
"min-h-[42px] w-full relative items-center group",
97-
"border border-neutral-200 dark:border-nb-gray-700 justify-between py-2 px-3",
96+
"min-h-[48px] w-full relative items-center border-default",
97+
"border justify-between py-2 px-3",
9898
"rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex text-neutral-500 dark:text-neutral-400/70 cursor-pointer enabled:hover:bg-gray-50 enabled:hover:dark:bg-nb-gray-900/50",
9999
"disabled:opacity-40 disabled:cursor-default",
100100
)}
@@ -157,8 +157,8 @@ export function NetworkRouteSelector({
157157
<div className={"relative"}>
158158
<CommandInput
159159
className={cn(
160-
"min-h-[42px] w-full relative",
161-
"border-b-0 border-t-0 border-r-0 border-l-0 border-neutral-200 dark:border-nb-gray-700 items-center",
160+
"min-h-[42px] w-full relative border-default items-center",
161+
"border-b-0 border-t-0 border-r-0 border-l-0",
162162
"bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
163163
"dark:placeholder:text-neutral-500 font-light placeholder:text-neutral-500 pl-10",
164164
)}

‎src/components/PeerGroupSelector.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -253,10 +253,10 @@ export function PeerGroupSelector({
253253
<PopoverTrigger asChild>
254254
<button
255255
className={cn(
256-
"min-h-[46px] w-full relative items-center group",
257-
"border border-neutral-200 dark:border-nb-gray-700 justify-between py-2 px-3",
258-
"rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex dark:text-neutral-400/70 text-neutral-500 cursor-pointer hover:dark:bg-nb-gray-900/50",
259-
"disabled:pointer-events-none disabled:opacity-30 transition-all",
256+
"min-h-[48px] w-full relative items-center border-default",
257+
"border justify-between py-2 px-3",
258+
"rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex text-neutral-500 dark:text-neutral-400/70 cursor-pointer enabled:hover:bg-gray-50 enabled:hover:dark:bg-nb-gray-900/50",
259+
"disabled:cursor-not-allowed disabled:opacity-40",
260260
)}
261261
disabled={disabled}
262262
data-cy={dataCy}
@@ -359,10 +359,10 @@ export function PeerGroupSelector({
359359
<CommandInput
360360
data-cy={"group-search-input"}
361361
className={cn(
362-
"min-h-[42px] w-full relative",
363-
"border-b-0 border-t-0 border-r-0 border-l-0 border-neutral-200 dark:border-nb-gray-700 items-center",
362+
"min-h-[42px] w-full relative border-default items-center",
363+
"border-b-0 border-t-0 border-r-0 border-l-0",
364364
"bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
365-
"dark:placeholder:text-nb-gray-400 font-light placeholder:text-neutral-500 pl-10",
365+
"dark:placeholder:text-neutral-500 font-light placeholder:text-neutral-500 pl-10",
366366
)}
367367
ref={searchRef}
368368
value={search}

‎src/components/PeerSelector.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,10 +98,10 @@ export function PeerSelector({
9898
<PopoverTrigger asChild>
9999
<button
100100
className={cn(
101-
"min-h-[46px] w-full relative items-center group",
102-
"border border-neutral-200 dark:border-nb-gray-700 justify-between py-2 px-3",
103-
"rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex dark:text-neutral-400/70 text-neutral-500 cursor-pointer enabled:hover:dark:bg-nb-gray-900/50",
104-
"disabled:opacity-40 disabled:cursor-default",
101+
"min-h-[48px] w-full relative items-center border-default",
102+
"border justify-between py-2 px-3",
103+
"rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex text-neutral-500 dark:text-neutral-400/70 cursor-pointer enabled:hover:bg-gray-50 enabled:hover:dark:bg-nb-gray-900/50",
104+
"disabled:cursor-not-allowed disabled:opacity-40",
105105
)}
106106
disabled={disabled}
107107
ref={inputRef}

0 commit comments

Comments
 (0)