Feature/move list to client (#50)

This commit is contained in:
Carl-Gerhard Lindesvärd
2024-09-01 15:02:12 +02:00
committed by GitHub
parent c2abdaadf2
commit 668434d246
181 changed files with 2922 additions and 1959 deletions

View File

@@ -20,9 +20,9 @@ const Page = ({ children }: Props) => {
</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 bg-def-200 flex flex-col gap-4 overflow-hidden p-4 pr-0 md:bg-transparent md:py-14">
<div className="max-w-screen flex flex-col gap-4 overflow-hidden bg-def-200 p-4 pr-0 md:bg-transparent md:py-14">
<div>
<div className="text-xs font-bold uppercase text-[#7b94ac]">
<div className="text-sm font-bold uppercase text-[#7b94ac]">
Welcome to Openpanel
</div>
<div className="text-xl font-medium leading-loose">

View File

@@ -15,7 +15,7 @@ const ConnectApp = ({ client }: Props) => {
<SmartphoneIcon />
App
</div>
<p className="mt-2 text-sm text-muted-foreground">
<p className="mt-2 text-muted-foreground">
Pick a framework below to get started.
</p>
<div className="mt-4 grid gap-4 md:grid-cols-2">
@@ -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="bg-def-200 h-10 w-10 rounded-md p-2">
<div className="h-10 w-10 rounded-md bg-def-200 p-2">
<img
className="h-full w-full object-contain"
src={framework.logo}
@@ -43,7 +43,7 @@ const ConnectApp = ({ client }: Props) => {
</button>
))}
</div>
<p className="mt-2 text-xs text-muted-foreground">
<p className="mt-2 text-sm text-muted-foreground">
Missing a framework?{' '}
<a
href="mailto:hello@openpanel.dev"

View File

@@ -15,7 +15,7 @@ const ConnectBackend = ({ client }: Props) => {
<ServerIcon />
Backend
</div>
<p className="mt-2 text-sm text-muted-foreground">
<p className="mt-2 text-muted-foreground">
Pick a framework below to get started.
</p>
<div className="mt-4 grid gap-4 md:grid-cols-2">
@@ -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="bg-def-200 h-10 w-10 rounded-md p-2">
<div className="h-10 w-10 rounded-md bg-def-200 p-2">
<img
className="h-full w-full object-contain"
src={framework.logo}
@@ -43,7 +43,7 @@ const ConnectBackend = ({ client }: Props) => {
</button>
))}
</div>
<p className="mt-2 text-xs text-muted-foreground">
<p className="mt-2 text-sm text-muted-foreground">
Missing a framework?{' '}
<a
href="mailto:hello@openpanel.dev"

View File

@@ -15,7 +15,7 @@ const ConnectWeb = ({ client }: Props) => {
<MonitorIcon />
Website
</div>
<p className="mt-2 text-sm text-muted-foreground">
<p className="mt-2 text-muted-foreground">
Pick a framework below to get started.
</p>
<div className="mt-4 grid gap-4 md:grid-cols-2">
@@ -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="bg-def-200 h-10 w-10 rounded-md p-2">
<div className="h-10 w-10 rounded-md bg-def-200 p-2">
<img
className="h-full w-full object-contain"
src={framework.logo}
@@ -43,7 +43,7 @@ const ConnectWeb = ({ client }: Props) => {
</button>
))}
</div>
<p className="mt-2 text-xs text-muted-foreground">
<p className="mt-2 text-sm text-muted-foreground">
Missing a framework?{' '}
<a
href="mailto:hello@openpanel.dev"

View File

@@ -61,7 +61,7 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
<div className="flex items-center gap-2 text-2xl capitalize">
{client?.name}
</div>
<div className="mt-2 text-xs font-semibold text-muted-foreground">
<div className="mt-2 text-sm font-semibold text-muted-foreground">
Connection status: {renderBadge()}
</div>
@@ -81,13 +81,13 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
{isConnected ? (
<div className="flex flex-col-reverse">
{events.length > 5 && (
<div className="flex items-center gap-2 text-sm">
<div className="flex items-center gap-2 ">
<CheckIcon size={14} />{' '}
<span>{events.length - 5} more events</span>
</div>
)}
{events.slice(-5).map((event, index) => (
<div key={index} className="flex items-center gap-2 text-sm">
<div key={index} className="flex items-center gap-2 ">
<CheckIcon size={14} />{' '}
<span className="font-medium">{event.name}</span>{' '}
<span className="ml-auto text-emerald-800">
@@ -97,7 +97,7 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
))}
</div>
) : (
<div className="text-sm">
<div className="">
Verify that your events works before submitting any changes to App
Store/Google Play
</div>
@@ -105,7 +105,7 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
</div>
</div>
<div className="mt-2 text-xs text-muted-foreground">
<div className="mt-2 text-sm text-muted-foreground">
You can{' '}
<button
className="underline"

View File

@@ -73,7 +73,7 @@ const Verify = ({ project, events }: Props) => {
{!verified && (
<Link
href={`/${project.organizationSlug}/${project.id}`}
className="text-sm text-muted-foreground underline"
className=" text-muted-foreground underline"
>
Skip for now
</Link>

View File

@@ -34,7 +34,7 @@ const SkipOnboarding = () => {
});
}
}}
className="flex items-center gap-2 text-sm text-muted-foreground"
className="flex items-center gap-2 text-muted-foreground"
>
Skip onboarding
<ChevronLastIcon size={16} />

View File

@@ -59,9 +59,9 @@ const Steps = ({ className }: Props) => {
const currentIndex = steps.findIndex((i) => i.status === 'current');
return (
<div className="relative">
<div className="bg-def-200 absolute bottom-4 left-4 top-4 w-px"></div>
<div className="absolute bottom-4 left-4 top-4 w-px bg-def-200"></div>
<div
className="bg-highlight absolute left-4 top-4 w-px"
className="absolute left-4 top-4 w-px bg-highlight"
style={{
height: `calc(${((currentIndex + 1) / steps.length) * 100}% - 3.5rem)`,
}}
@@ -86,17 +86,17 @@ 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'
'relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-white'
)}
>
<div
className={cn(
'bg-highlight absolute inset-0 z-0 rounded-full',
'absolute inset-0 z-0 rounded-full bg-highlight',
step.status === 'pending' && 'bg-def-400'
)}
></div>
{step.status === 'current' && (
<div className="bg-highlight absolute inset-1 z-0 animate-ping-slow rounded-full"></div>
<div className="absolute inset-1 z-0 animate-ping-slow rounded-full bg-highlight"></div>
)}
<div className="relative">
{step.status === 'completed' && <CheckCheckIcon size={14} />}
@@ -109,7 +109,7 @@ const Steps = ({ className }: Props) => {
</div>
</div>
<div className="text-sm font-medium">{step.name}</div>
<div className=" font-medium">{step.name}</div>
</div>
))}
</div>