Feature/move list to client (#50)
This commit is contained in:
committed by
GitHub
parent
c2abdaadf2
commit
668434d246
@@ -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">
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user