zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

give dark mode some love 🖤

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-05-31 22:25:07 +02:00
parent ff31cc506c
commit 1665924073
77 changed files with 256 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/dashboard/src/app/(onboarding)/layout.tsx
View File

@@ -12,15 +12,15 @@ const Page = ({ children }: Props) => {
<>
<div className="fixed inset-0 hidden md:grid md:grid-cols-[30vw_1fr] lg:grid-cols-[30vw_1fr]">
<div className=""></div>
<div className="border-l border-border bg-background"></div>
<div className="border-l border-border bg-card"></div>
</div>
<div className="relative min-h-screen bg-background md:bg-transparent">
<div className="relative min-h-screen bg-card md:bg-transparent">
<FullWidthNavbar>
<SkipOnboarding />
</FullWidthNavbar>
<div className="mx-auto w-full md:max-w-[95vw] lg:max-w-[80vw]">
<div className="grid md:grid-cols-[25vw_1fr] lg:grid-cols-[20vw_1fr]">
<div className="max-w-screen flex flex-col gap-4 overflow-hidden bg-slate-100 p-4 pr-0 md:bg-transparent md:py-14">
<div className="max-w-screen bg-def-200 flex flex-col gap-4 overflow-hidden p-4 pr-0 md:bg-transparent md:py-14">
<div>
<div className="text-xs font-bold uppercase text-[#7b94ac]">
Welcome to Openpanel

2
apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-app.tsx
View File

@@ -30,7 +30,7 @@ const ConnectApp = ({ client }: Props) => {
className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
key={framework.name}
>
<div className="h-10 w-10 rounded-md bg-slate-200 p-2">
<div className="bg-def-200 h-10 w-10 rounded-md p-2">
<img
className="h-full w-full object-contain"
src={framework.logo}

2
apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-backend.tsx
View File

@@ -30,7 +30,7 @@ const ConnectBackend = ({ client }: Props) => {
className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
key={framework.name}
>
<div className="h-10 w-10 rounded-md bg-slate-200 p-2">
<div className="bg-def-200 h-10 w-10 rounded-md p-2">
<img
className="h-full w-full object-contain"
src={framework.logo}

2
apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-web.tsx
View File

@@ -30,7 +30,7 @@ const ConnectWeb = ({ client }: Props) => {
className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
key={framework.name}
>
<div className="h-10 w-10 rounded-md bg-slate-200 p-2">
<div className="bg-def-200 h-10 w-10 rounded-md p-2">
<img
className="h-full w-full object-contain"
src={framework.logo}

2
apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/onboarding-connect.tsx
View File

@@ -36,7 +36,7 @@ const Connect = ({ project }: Props) => {
</OnboardingDescription>
}
>
<div className="flex flex-col gap-4 rounded-xl border bg-slate-100 p-4 md:p-6">
<div className="bg-def-200 flex flex-col gap-4 rounded-xl border p-4 md:p-6">
<div className="flex items-center gap-2 text-2xl capitalize">
<LockIcon />
Credentials

4
apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify-listener.tsx
View File

@@ -54,7 +54,7 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
}
return (
<Loader2 size={40} className="shrink-0 animate-spin text-blue-600" />
<Loader2 size={40} className="text-highlight shrink-0 animate-spin" />
);
};
@@ -70,7 +70,7 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
<div
className={cn(
'my-6 flex gap-6 rounded-xl p-4 md:p-6',
isConnected ? 'bg-emerald-100' : 'bg-blue-100'
isConnected ? 'bg-emerald-100' : 'bg-highlight'
)}
>
{renderIcon()}

14
apps/dashboard/src/app/(onboarding)/steps.tsx
View File

@@ -59,9 +59,9 @@ const Steps = ({ className }: Props) => {
const currentIndex = steps.findIndex((i) => i.status === 'current');
return (
<div className="relative">
<div className="absolute bottom-4 left-4 top-4 w-px bg-slate-300"></div>
<div className="bg-def-200 absolute bottom-4 left-4 top-4 w-px"></div>
<div
className="absolute left-4 top-4 w-px bg-blue-600"
className="bg-highlight absolute left-4 top-4 w-px"
style={{
height: `calc(${((currentIndex + 1) / steps.length) * 100}% - 3.5rem)`,
}}
@@ -77,7 +77,7 @@ const Steps = ({ className }: Props) => {
className={cn(
'flex flex-shrink-0 items-center gap-2 self-start px-3 py-1.5',
step.status === 'current' &&
'rounded-xl border border-border bg-background',
'rounded-xl border border-border bg-card',
step.status === 'completed' &&
index !== currentIndex - 1 &&
'max-md:hidden'
@@ -87,18 +87,16 @@ const Steps = ({ className }: Props) => {
<div
className={cn(
'relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm text-white'
// step.status === 'completed' && 'bg-blue-600 ring-blue-500/50',
// step.status === 'pending' && 'bg-slate-400 ring-slate-500/50'
)}
>
<div
className={cn(
'absolute inset-0 z-0 rounded-full bg-blue-600',
step.status === 'pending' && 'bg-slate-400'
'bg-highlight absolute inset-0 z-0 rounded-full',
step.status === 'pending' && 'bg-def-400'
)}
></div>
{step.status === 'current' && (
<div className="absolute inset-1 z-0 animate-ping-slow rounded-full bg-blue-600"></div>
<div className="bg-highlight absolute inset-1 z-0 animate-ping-slow rounded-full"></div>
)}
<div className="relative">
{step.status === 'completed' && <CheckCheckIcon size={14} />}