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

rework macos version

Browse Source
This commit is contained in:
Phong
2023-10-11 13:45:56 +07:00
parent c3f399ea0b
commit 2fcbf1987b
18 changed files with 394 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/shared/accounts/active.tsx
View File

@@ -50,7 +50,7 @@ export function ActiveAccount() {
if (status === 'loading') {
return (
<div className="aspect-square h-full w-full animate-pulse rounded-lg bg-white/10" />
<div className="aspect-square h-auto w-full animate-pulse rounded-lg bg-white/10" />
);
}
@@ -60,7 +60,7 @@ export function ActiveAccount() {
<Image
src={user?.picture || user?.image}
alt={db.account.npub}
className="aspect-square h-full w-full rounded-md"
className="aspect-square h-auto w-full rounded-md"
/>
<span className="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-emerald-500 ring-2 ring-neutral-100 dark:ring-neutral-900" />
</Link>

2
src/shared/composer/modal.tsx
View File

@@ -28,7 +28,7 @@ export function ComposerModal() {
<Dialog.Trigger asChild>
<button
type="button"
className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-neutral-300 hover:bg-blue-600 dark:bg-neutral-700 dark:hover:bg-blue-600"
className="flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-neutral-300 hover:bg-blue-600 dark:bg-neutral-700 dark:hover:bg-blue-600"
>
<ComposeIcon className="h-5 w-5 text-black dark:text-white" />
</button>

15
src/shared/layouts/app.tsx
View File

@@ -1,14 +1,25 @@
import { Outlet, ScrollRestoration } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { WindowTitlebar } from 'tauri-controls';
import { useStorage } from '@libs/storage/provider';
import { Navigation } from '@shared/navigation';
export function AppLayout() {
const { db } = useStorage();
return (
<div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
<WindowTitlebar />
{db.platform !== 'macos' ? <WindowTitlebar /> : <div className="h-11" />}
<div className="flex h-full min-h-0 w-full">
<div data-tauri-drag-region className="h-full w-[64px] shrink-0 pt-2">
<div
data-tauri-drag-region
className={twMerge(
'h-full w-[64px] shrink-0',
db.platform !== 'macos' ? 'pt-2' : 'pt-16'
)}
>
<Navigation />
</div>
<div className="flex h-full min-h-0 flex-1 rounded-tl-lg bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">

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

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

12
src/shared/navigation.tsx
View File

@@ -25,7 +25,7 @@ export function Navigation() {
<>
<div
className={twMerge(
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
@@ -46,7 +46,7 @@ export function Navigation() {
<>
<div
className={twMerge(
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
@@ -67,7 +67,7 @@ export function Navigation() {
<>
<div
className={twMerge(
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
@@ -88,7 +88,7 @@ export function Navigation() {
<>
<div
className={twMerge(
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
@@ -109,7 +109,7 @@ export function Navigation() {
<>
<div
className={twMerge(
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
@@ -126,7 +126,7 @@ export function Navigation() {
<ComposerModal />
<Link
to="/nwc"
className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-neutral-100 hover:bg-blue-600 dark:bg-neutral-900 dark:hover:bg-blue-600"
className="flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-neutral-100 hover:bg-blue-600 dark:bg-neutral-900 dark:hover:bg-blue-600"
>
<NwcIcon className="h-5 w-5" />
</Link>