reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: new onboarding

Browse Source
This commit is contained in:
reya
2023-10-14 15:19:49 +07:00
parent 0777c483e5
commit 620e763380
60 changed files with 153 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/auth/welcome.tsx
View File

@@ -1,38 +1,30 @@
import { Link } from 'react-router-dom';
import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
export function WelcomeScreen() {
return (
<div className="mx-auto flex h-screen w-full max-w-md flex-col justify-center">
<div className="flex flex-col gap-10 pt-16">
<div className="flex flex-col gap-1.5 text-center">
<h1 className="text-3xl font-semibold text-white">Welcome to Lume</h1>
<p className="mx-auto w-2/3 leading-tight text-white/50">
Let&apos;s get you up and connecting with all peoples around the world on
Nostr
</p>
<div className="flex h-full w-full items-center justify-center">
<div className="mx-auto flex w-full max-w-xs flex-col gap-10">
<div className="text-center">
<img src="/icon.png" alt="Lume's logo" className="mx-auto mb-1 h-auto w-16" />
<h1 className="text-2xl">
Welcome to <span className="font-semibold">Lume</span>
</h1>
</div>
<div className="inline-flex w-full flex-col items-center gap-3 px-4 pb-10">
<Link
to="/auth/import"
className="inline-flex h-12 w-3/4 items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-4 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
>
<span className="w-5" />
<span>Login with private key</span>
<ArrowRightCircleIcon className="h-5 w-5" />
</Link>
<div className="flex flex-col gap-2 px-8">
<Link
to="/auth/create"
className="inline-flex h-12 w-3/4 items-center justify-center gap-2 rounded-lg border-t border-white/10 bg-white/20 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/30 focus:outline-none"
className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
>
Create new key
Create new Nostr account
</Link>
<Link
to="/auth/import"
className="inline-flex h-10 w-full items-center justify-center rounded-lg font-medium text-neutral-900 hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
>
Log in
</Link>
</div>
</div>
<div className="absolute bottom-6 left-1/2 -translate-x-1/2 transform">
<img src="/lume.png" alt="lume" className="mx-auto h-auto w-1/4" />
</div>
</div>
);
}

2
src/app/chats/index.tsx
View File

@@ -33,7 +33,7 @@ export function ChatsScreen() {
return (
<div className="grid h-full w-full grid-cols-3">
<div className="col-span-1 h-full overflow-y-auto border-r border-white/5 scrollbar-none">
<div className="col-span-1 h-full overflow-y-auto border-r border-neutral-200 scrollbar-none dark:border-neutral-800">
<div
data-tauri-drag-region
className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3"

7
src/shared/layouts/auth.tsx
View File

@@ -1,4 +1,4 @@
import { Outlet } from 'react-router-dom';
import { Outlet, ScrollRestoration } from 'react-router-dom';
import { WindowTitlebar } from 'tauri-controls';
import { useStorage } from '@libs/storage/provider';
@@ -7,10 +7,11 @@ export function AuthLayout() {
const { db } = useStorage();
return (
<div className="relative h-screen w-screen bg-neutral-50 dark:bg-neutral-950">
<div className="h-screen w-screen bg-neutral-50 dark:bg-neutral-950">
{db.platform !== 'macos' ? <WindowTitlebar /> : null}
<div className="bg-neutral-50 dark:bg-neutral-950">
<div className="h-full w-full">
<Outlet />
<ScrollRestoration />
</div>
</div>
);

26
src/shared/notes/preview/link.tsx
View File

@@ -41,19 +41,23 @@ export function LinkPreview({ urls }: { urls: string[] }) {
<img
src={data.image}
alt={urls[0]}
className="h-44 w-full rounded-t-lg object-cover"
className="h-44 w-full rounded-t-lg bg-white object-cover"
/>
)}
<div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">
<h5 className="line-clamp-1 text-base font-semibold text-neutral-900 dark:text-neutral-100">
{data.title}
</h5>
{data.description && (
<p className="line-clamp-3 break-words text-sm text-neutral-700 dark:text-neutral-400">
{data.description}
</p>
)}
<span className="mt-2.5 text-sm text-neutral-600 dark:text-neutral-400">
<div className="flex flex-col px-3 py-3">
<div className="flex flex-col gap-1">
{data.title && (
<h5 className="line-clamp-1 text-base font-semibold text-neutral-900 dark:text-neutral-100">
{data.title}
</h5>
)}
{data.description && (
<p className="mb-2.5 line-clamp-3 break-words text-sm text-neutral-700 dark:text-neutral-400">
{data.description}
</p>
)}
</div>
<span className="break-all text-sm text-neutral-600 dark:text-neutral-400">
{domain.hostname}
</span>
</div>

8
src/shared/widgets/local/network.tsx
View File

@@ -126,23 +126,23 @@ export function LocalNetworkWidget() {
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
<LoaderIcon className="h-5 w-5 animate-spin" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<ArrowRightCircleIcon className="h-5 w-5" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<ArrowRightCircleIcon className="h-5 w-5" />
<span>Nothing more to load</span>
</>
)}
</button>
) : null}
</div>
<div className="h-16" />
<div className="h-14" />
</VList>
)}
</div>