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

wip: update color palette

Browse Source
This commit is contained in:
Ren Amamiya
2023-10-10 08:25:31 +07:00
parent d20ee26e22
commit 043c1b1220
104 changed files with 747 additions and 753 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/chats/chat.tsx
View File

@@ -71,17 +71,17 @@ export function ChatScreen() {
return (
<div className="h-full w-full p-3">
<div className="rounded-lg bg-zinc-100 backdrop-blur-xl dark:bg-zinc-900">
<div className="rounded-lg bg-neutral-100 backdrop-blur-xl dark:bg-neutral-900">
<div className="flex h-full flex-col justify-between overflow-hidden">
<div className="flex h-16 shrink-0 items-center border-b border-zinc-200 px-3 dark:border-zinc-800">
<div className="flex h-16 shrink-0 items-center border-b border-neutral-200 px-3 dark:border-neutral-800">
<User pubkey={pubkey} variant="simple" />
</div>
<div className="h-full w-full flex-1 px-3 py-3">
{status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center">
<div className="flex flex-col items-center gap-1.5">
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-300">
Loading messages
</p>
</div>
@@ -89,17 +89,17 @@ export function ChatScreen() {
) : data.length === 0 ? (
<div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center">
<h3 className="mb-2 text-4xl">🙌</h3>
<p className="leading-none text-zinc-500 dark:text-zinc-300">
<p className="leading-none text-neutral-500 dark:text-neutral-300">
You two didn&apos;t talk yet, let&apos;s send first message
</p>
</div>
) : (
<VList ref={listRef} className="scrollbar-none h-full" mode="reverse">
<VList ref={listRef} className="h-full scrollbar-none" reverse>
{data.map((message) => renderItem(message))}
</VList>
)}
</div>
<div className="shrink-0 rounded-b-lg border-t border-zinc-300 bg-zinc-200 p-3 backdrop-blur-xl dark:border-zinc-700 dark:bg-zinc-800">
<div className="shrink-0 rounded-b-lg border-t border-neutral-300 bg-neutral-200 p-3 backdrop-blur-xl dark:border-neutral-700 dark:bg-neutral-800">
<ChatForm
receiverPubkey={pubkey}
userPubkey={db.account.pubkey}

6
src/app/chats/components/chatForm.tsx
View File

@@ -47,7 +47,7 @@ export function ChatForm({
return (
<div className="flex items-center gap-2">
<MediaUploader setState={setValue} />
<div className="flex w-full items-center justify-between rounded-full bg-zinc-300 px-3 dark:bg-zinc-700">
<div className="flex w-full items-center justify-between rounded-full bg-neutral-300 px-3 dark:bg-neutral-700">
<input
value={value}
onChange={(e) => setValue(e.target.value)}
@@ -57,12 +57,12 @@ export function ChatForm({
autoCorrect="off"
autoCapitalize="off"
placeholder="Message"
className="h-10 flex-1 resize-none bg-transparent px-3 text-zinc-900 placeholder:text-zinc-500 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-300"
className="h-10 flex-1 resize-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-500 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-300"
/>
<button
type="button"
onClick={submit}
className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-zinc-500 dark:text-zinc-300"
className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-neutral-500 dark:text-neutral-300"
>
<EnterIcon className="h-5 w-5" />
Send

8
src/app/chats/components/chatListItem.tsx
View File

@@ -44,10 +44,10 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
preventScrollReset={true}
className={({ isActive }) =>
twMerge(
'flex items-center gap-2.5 px-3 py-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-800',
'flex items-center gap-2.5 px-3 py-1.5 hover:bg-neutral-200 dark:hover:bg-neutral-800',
isActive
? 'bg-zinc-200 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100'
: 'text-zinc-500 dark:text-zinc-300'
? 'bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
: 'text-neutral-500 dark:text-neutral-300'
)
}
>
@@ -69,7 +69,7 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
</Avatar.Fallback>
</Avatar.Root>
<div className="flex w-full flex-col">
<div className="max-w-[10rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
<div className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name ||
user?.display_name ||
user?.displayName ||

2
src/app/chats/components/mediaUploader.tsx
View File

@@ -29,7 +29,7 @@ export function MediaUploader({
<button
type="button"
onClick={() => uploadMedia()}
className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-zinc-300 text-zinc-500 hover:bg-zinc-400 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-neutral-300 text-neutral-500 hover:bg-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
>
{loading ? (
<LoaderIcon className="h-4 w-4 animate-spin" />

8
src/app/chats/components/message.tsx
View File

@@ -26,15 +26,15 @@ export function ChatMessage({
className={twMerge(
'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
self
? 'ml-auto rounded-l-xl bg-interor-500'
: 'rounded-r-xl bg-zinc-200 dark:bg-zinc-800'
? 'ml-auto rounded-l-xl bg-blue-500'
: 'rounded-r-xl bg-neutral-200 dark:bg-neutral-800'
)}
>
{!richContent ? (
<p className="text-zinc-900 dark:text-zinc-100">Decrypting...</p>
<p className="text-neutral-900 dark:text-neutral-100">Decrypting...</p>
) : (
<div>
<p className="select-text whitespace-pre-line text-zinc-900 dark:text-zinc-100">
<p className="select-text whitespace-pre-line text-neutral-900 dark:text-neutral-100">
{richContent.parsed}
</p>
<div>

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

@@ -33,12 +33,12 @@ export function ChatsScreen() {
return (
<div className="grid h-full w-full grid-cols-3">
<div className="scrollbar-none col-span-1 h-full overflow-y-auto border-r border-white/5">
<div className="col-span-1 h-full overflow-y-auto border-r border-white/5 scrollbar-none">
<div
data-tauri-drag-region
className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3"
>
<h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
<h3 className="bg-gradient-to-r from-blue-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
All chats
</h3>
</div>