Skip to content

[feature] Added light/system theme #461

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[feature] Added light/system theme #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/(dashboard)/dns/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ const SettingDisabledManagementGroups = ({
</div>
<div
className={
"flex justify-end bg-nb-gray-900/20 border-t border-nb-gray-900 px-8 py-5"
"flex justify-end bg-gray-50 dark:bg-nb-gray-900/20 border-t border-gray-200 dark:border-nb-gray-900 px-8 py-5"
}
>
<Button
Expand Down
2 changes: 1 addition & 1 deletion src/app/(dashboard)/network/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ function NetworkOverview({ network }: Readonly<{ network: Network }>) {
/>
<button
className={
"flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
"flex items-center gap-2 interactive-cell"
}
onClick={() => setNetworkModal(true)}
>
Expand Down
8 changes: 4 additions & 4 deletions src/app/(dashboard)/peer/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ function PeerOverview() {
<ModalTrigger>
<div
className={
"flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
"flex items-center gap-2 interactive-cell"
}
>
<PencilIcon size={16} />
Expand Down Expand Up @@ -241,10 +241,10 @@ function PeerOverview() {
{isOwnerOrAdmin && !!peer?.user_id && (
<div
className={cn(
"border border-nb-gray-900 border-t-0 rounded-b-md bg-nb-gray-940 px-[1.28rem] pt-3 pb-5 flex flex-col gap-4 mx-[0.25rem]",
"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]",
!loginExpiration
? "opacity-50 pointer-events-none"
: "bg-nb-gray-930/80",
: "bg-subtle-emphasis",
)}
>
<PeerExpirationToggle
Expand Down Expand Up @@ -548,7 +548,7 @@ function EditNameModal({ onSuccess, peer, initialName }: Readonly<ModalProps>) {
If the domain name already exists, we add an increment number
suffix to it.
</HelpText>
<div className={"text-netbird text-sm break-all whitespace-normal"}>
<div className={"text-highlight text-sm break-all whitespace-normal"}>
{domainNamePreview}
</div>
</Card>
Expand Down
2 changes: 1 addition & 1 deletion src/app/(dashboard)/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default function NetBirdSettings() {
</VerticalTabs.Trigger>
</VerticalTabs.List>
<RestrictedAccess page={"Settings"}>
<div className={"border-l border-nb-gray-930 w-full"}>
<div className={"border-l border-gray-200 dark:border-nb-gray-930 w-full"}>
{account && <AuthenticationTab account={account} />}
{account && <PermissionsTab account={account} />}
{account && <GroupsTab account={account} />}
Expand Down
2 changes: 1 addition & 1 deletion src/app/(dashboard)/team/user/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
<div className={"flex items-center gap-3"}>
<div
className={
"w-10 h-10 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
"w-10 h-10 rounded-full relative flex items-center justify-center text-gray-700 dark:text-white uppercase text-md font-medium bg-gray-200 dark:bg-nb-gray-900"
}
style={
user.is_service_user
Expand Down
36 changes: 36 additions & 0 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,43 @@
@tailwind components;
@tailwind utilities;

@layer components {
.interactive-cell {
@apply dark:text-neutral-300 text-neutral-500 py-2 px-3 rounded-md;
@apply transition-all hover:bg-gray-300 hover:text-neutral-800 dark:hover:text-neutral-100 dark:hover:bg-nb-gray-800/60 cursor-pointer;
}

.table-row-hoverable {
@apply transition-all hover:bg-gray-100 dark:hover:bg-nb-gray-940 cursor-pointer;
}

/* Semantic Text Classes */
.text-primary {
@apply text-gray-700 dark:text-nb-gray-100;
}

.text-muted {
@apply text-neutral-500 dark:text-neutral-400;
}

.text-highlight {
@apply text-netbird;
}

/* Semantic Border Class */
.border-default {
@apply border-neutral-200 dark:border-nb-gray-700;
}

/* Semantic Background Class */
.bg-subtle-emphasis {
@apply bg-gray-100 dark:bg-nb-gray-930/80;
}

.bg-default {
@apply bg-white dark:bg-nb-gray-950;
}
}

h1 {
@apply text-2xl font-medium text-gray-700 dark:text-nb-gray-100 my-1;
Expand Down
19 changes: 19 additions & 0 deletions src/assets/netbird-full-light.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/auth/OIDCError.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const OIDCError = () => {
>
<div
className={
"bg-nb-gray-930 mb-3 border border-nb-gray-900 h-12 w-12 rounded-md flex items-center justify-center "
"bg-gray-100 dark:bg-nb-gray-930 mb-3 border border-gray-200 dark:border-nb-gray-900 h-12 w-12 rounded-md flex items-center justify-center "
}
>
<NetBirdIcon size={23} />
Expand Down
2 changes: 1 addition & 1 deletion src/auth/SessionLost.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const SessionLost = () => {
>
<div
className={
"bg-nb-gray-930 mb-3 border border-nb-gray-900 h-10 w-10 rounded-md flex items-center justify-center "
"bg-gray-100 dark:bg-nb-gray-930 mb-3 border border-gray-200 dark:border-nb-gray-900 h-10 w-10 rounded-md flex items-center justify-center "
}
>
<NetBirdIcon size={20} />
Expand Down
42 changes: 21 additions & 21 deletions src/components/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,34 +16,34 @@ const variants = cva("", {
blue: [
"bg-sky-100 border-sky-500 text-sky-800 border border-transparent",
],
blueDark: ["bg-sky-900 border-sky-500 text-white border"],
"blue-darker": ["bg-sky-900 border-sky-500 text-white border"],
red: ["bg-red-950/40 border-red-500 border text-red-500"],
purple: ["bg-purple-950/50 border-purple-500 border text-purple-500"],
yellow: ["bg-yellow-950 border-yellow-500 border text-yellow-400"],
gray: ["bg-nb-gray-930/60 border-nb-gray-800/40 text-nb-gray-300 border"],
blueDark: ["bg-sky-100 border-sky-600 text-sky-800 border dark:bg-sky-900 dark:border-sky-500 dark:text-white"],
"blue-darker": ["bg-sky-100 border-sky-600 text-sky-800 border dark:bg-sky-900 dark:border-sky-500 dark:text-white"],
red: ["bg-red-100 border-red-400 text-red-600 border dark:bg-red-950/40 dark:border-red-500 dark:text-red-500"],
purple: ["bg-purple-100 border-purple-400 text-purple-600 border dark:bg-purple-950/50 dark:border-purple-500 dark:text-purple-500"],
yellow: ["bg-yellow-100 border-yellow-400 text-yellow-600 border dark:bg-yellow-950 dark:border-yellow-500 dark:text-yellow-400"],
gray: ["bg-gray-100 border-gray-300 text-gray-600 border dark:bg-nb-gray-930/60 dark:border-nb-gray-800/40 dark:text-nb-gray-300"],
grayer: [
"bg-nb-gray-900/40 border-nb-gray-800/40 text-nb-gray-300 border",
"bg-gray-100 border-gray-300 text-gray-600 border dark:bg-nb-gray-900/40 dark:border-nb-gray-800/40 dark:text-nb-gray-300",
],
"gray-ghost": [
"bg-nb-gray-900 border-nb-gray-800 text-nb-gray-300 border border-nb-gray-800/50",
"bg-gray-50 border-gray-200 text-gray-500 border dark:bg-nb-gray-900 dark:border-nb-gray-800 dark:text-nb-gray-300 dark:border-nb-gray-800/50",
],
green: ["bg-green-950 border-green-500 border text-green-400"],
netbird: ["bg-netbird-950 border-netbird-500 border text-netbird-500"],
green: ["bg-green-100 border-green-400 text-green-600 border dark:bg-green-950 dark:border-green-500 dark:text-green-400"],
netbird: ["bg-netbird-100 border-netbird-400 text-netbird-600 border dark:bg-netbird-950 dark:border-netbird-500 dark:text-netbird-500"],
},
hover: {
none: [],
blue: ["hover:bg-sky-200"],
purple: ["hover:bg-purple-950/40"],
yellow: ["hover:bg-yellow-950/40"],
blueDark: ["hover:bg-sky-800"],
"blue-darker": ["hover:bg-sky-800"],
red: ["hover:bg-red-950/40"],
gray: ["hover:bg-nb-gray-900"],
grayer: ["hover:bg-nb-gray-900"],
"gray-ghost": ["hover:bg-nb-gray-900"],
green: ["hover:bg-green-950/50"],
netbird: ["hover:bg-netbird-950/50"],
blue: ["hover:bg-sky-200 dark:hover:bg-sky-800"],
purple: ["hover:bg-purple-200 dark:hover:bg-purple-950/40"],
yellow: ["hover:bg-yellow-200 dark:hover:bg-yellow-950/40"],
blueDark: ["hover:bg-sky-200 dark:hover:bg-sky-800"],
"blue-darker": ["hover:bg-sky-200 dark:hover:bg-sky-800"],
red: ["hover:bg-red-200 dark:hover:bg-red-950/40"],
gray: ["hover:bg-gray-200 dark:hover:bg-nb-gray-900"],
grayer: ["hover:bg-gray-200 dark:hover:bg-nb-gray-900"],
"gray-ghost": ["hover:bg-gray-100 dark:hover:bg-nb-gray-900"],
green: ["hover:bg-green-200 dark:hover:bg-green-950/50"],
netbird: ["hover:bg-netbird-200 dark:hover:bg-netbird-950/50"],
},
},
});
Expand Down
6 changes: 3 additions & 3 deletions src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const buttonVariants = cva(
"dark:bg-nb-gray-900/30 dark:text-gray-400 dark:border-gray-500/40 dark:hover:text-white dark:hover:bg-zinc-800/50",
],
tertiary: [
"bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-gray-200 text-gray-900",
"bg-black text-white focus:ring-black/50",
"dark:focus:ring-zinc-800/50 dark:bg-white dark:text-gray-800 dark:border-gray-700/40 dark:hover:bg-neutral-200 disabled:dark:bg-nb-gray-920 disabled:dark:text-nb-gray-300",
],
white: [
Expand All @@ -63,7 +63,7 @@ export const buttonVariants = cva(
"dark:focus:ring-zinc-800/50 dark:bg-transparent dark:text-netbird dark:border-netbird dark:hover:bg-nb-gray-900/30",
],
"danger-outline": [
"", // TODO - add danger button styles for light mode
"bg-transparent focus:ring-red-400/20 hover:bg-red-50 text-red-500 border-red-500",
"enabled:dark:focus:ring-red-800/20 enabled:dark:focus:bg-red-950/40 enabled:hover:dark:bg-red-950/50 enabled:dark:hover:border-red-800/50 dark:bg-transparent dark:text-red-500",
"",
],
Expand All @@ -72,7 +72,7 @@ export const buttonVariants = cva(
"dark:bg-transparent dark:text-nb-gray-400 dark:border-transparent dark:hover:text-white dark:hover:bg-zinc-800/50 dark:hover:border-nb-gray-800/50",
],
danger: [
"", // TODO - add danger button styles for light mode
"bg-red-600 text-white hover:bg-red-700 focus:ring-red-400/50",
"dark:focus:ring-red-700/20 dark:focus:bg-red-700 hover:dark:bg-red-700 dark:hover:border-red-800/50 dark:bg-red-600 dark:text-red-100",
],
},
Expand Down
8 changes: 4 additions & 4 deletions src/components/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function Card({ children, className, ...props }: Props) {
<div
{...props}
className={cn(
"bg-nb-gray-940 rounded-md border border-nb-gray-900 w-1/2 overflow-hidden",
"bg-white dark:bg-nb-gray-940 rounded-md border border-gray-200 dark:border-nb-gray-900 w-1/2 overflow-hidden",
className,
)}
>
Expand Down Expand Up @@ -48,7 +48,7 @@ function CardListItem({
return (
<li
className={cn(
"flex justify-between px-4 border-b border-nb-gray-900 py-4 last:border-b-0 items-center h-full",
"flex justify-between px-4 border-b border-gray-200 dark:border-nb-gray-900 py-4 last:border-b-0 items-center h-full",
className,
)}
>
Expand Down Expand Up @@ -95,8 +95,8 @@ const CardTextItem = ({
return (
<div
className={cn(
"text-right text-nb-gray-400 text-sm flex items-center gap-2",
copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
"text-right text-gray-500 dark:text-nb-gray-400 text-sm flex items-center gap-2",
copy && "cursor-pointer hover:text-gray-700 dark:hover:text-nb-gray-300 transition-all",
)}
onClick={() =>
copy &&
Expand Down
10 changes: 5 additions & 5 deletions src/components/Code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@ export default function Code({
className={cn(
"rounded-md text-sm transition-all relative duration-300 border",
dark
? "bg-gray-50 border-neutral-200 dark:border-nb-gray-800 hover:dark:bg-nb-gray-900/80 dark:bg-nb-gray-930"
: "bg-gray-50 border-neutral-200 dark:border-nb-gray-700 hover:dark:bg-nb-gray-900/80 dark:bg-nb-gray-900",
? "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"
: "bg-gray-50 border-default hover:bg-gray-100 dark:hover:bg-nb-gray-900/80 dark:bg-nb-gray-900",
dark
? "text-nb-gray-300 hover:text-nb-gray-300"
: "dark:text-nb-gray-200 hover:dark:text-nb-gray-200",
? "text-gray-700 hover:text-gray-900 dark:text-nb-gray-300 dark:hover:text-nb-gray-300"
: "text-gray-700 hover:text-gray-900 dark:text-nb-gray-200 dark:hover:text-nb-gray-200",
"overflow-x-auto relative z-0 w-full",
className,
)}
Expand Down Expand Up @@ -77,7 +77,7 @@ export default function Code({

function CodeComment({ children }: Props) {
return (
<pre className={"text-nb-gray-400 block w-full whitespace-pre"}>
<pre className={"text-gray-500 dark:text-nb-gray-400 block w-full whitespace-pre"}>
{children}
</pre>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Command.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ const CommandShortcut = ({
return (
<span
className={cn(
"ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400",
"ml-auto text-xs tracking-widest text-muted",
className,
)}
{...props}
Expand Down
4 changes: 2 additions & 2 deletions src/components/CopyToClipboardText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default function CopyToClipboardText({
{copied ? (
<CheckIcon
className={cn(
"text-nb-gray-100 group-hover:opacity-100 shrink-0",
"text-gray-500 dark:text-nb-gray-100 group-hover:opacity-100 shrink-0",
iconAlignment === "left" ? "order-first" : "order-last",
!alwaysShowIcon && "opacity-0",
)}
Expand All @@ -48,7 +48,7 @@ export default function CopyToClipboardText({
) : (
<CopyIcon
className={cn(
"text-nb-gray-100 group-hover:opacity-100 shrink-0",
"text-gray-500 dark:text-nb-gray-100 group-hover:opacity-100 shrink-0",
iconAlignment === "left" ? "order-first" : "order-last",
!alwaysShowIcon && "opacity-0",
)}
Expand Down
Loading