From f4b2458417c13e8bcb476ed5c0ad802c541a799d Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 29 Aug 2023 08:24:18 +0700
Subject: [PATCH] ui consistent

---
 src/app/chats/components/item.tsx     |  8 ++++---
 src/app/chats/components/modal.tsx    |  2 +-
 src/app/chats/components/unknowns.tsx |  2 +-
 src/shared/composer/modal.tsx         |  2 +-
 src/shared/layouts/settings.tsx       |  5 -----
 src/shared/navigation.tsx             | 30 ++++++++++++++++-----------
 6 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/app/chats/components/item.tsx b/src/app/chats/components/item.tsx
index 12b786dd..7a2ca27c 100644
--- a/src/app/chats/components/item.tsx
+++ b/src/app/chats/components/item.tsx
@@ -24,15 +24,17 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
       preventScrollReset={true}
       className={({ isActive }) =>
         twMerge(
-          'inline-flex h-10 items-center gap-2.5 rounded-md px-2',
-          isActive ? 'bg-white/10 text-white backdrop-blur-xl' : 'text-white/80'
+          'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
+          isActive
+            ? 'border-fuchsia-500 bg-white/5 text-white'
+            : 'border-transparent text-white/80'
         )
       }
     >
       <Image
         src={user?.picture || user?.image}
         alt={pubkey}
-        className="h-7 w-7 shrink-0 rounded object-cover"
+        className="h-7 w-7 shrink-0 rounded"
       />
       <div className="inline-flex w-full flex-1 items-center justify-between">
         <h5 className="max-w-[10rem] truncate">
diff --git a/src/app/chats/components/modal.tsx b/src/app/chats/components/modal.tsx
index d077de30..44f0c0e4 100644
--- a/src/app/chats/components/modal.tsx
+++ b/src/app/chats/components/modal.tsx
@@ -24,7 +24,7 @@ export function NewMessageModal() {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="inline-flex h-10 items-center gap-2.5 rounded-md px-2"
+          className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-2"
         >
           <div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
             <PlusIcon className="h-4 w-4 text-white" />
diff --git a/src/app/chats/components/unknowns.tsx b/src/app/chats/components/unknowns.tsx
index 28f4f0ee..56e7b9ab 100644
--- a/src/app/chats/components/unknowns.tsx
+++ b/src/app/chats/components/unknowns.tsx
@@ -22,7 +22,7 @@ export function UnknownsModal({ data }: { data: string[] }) {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="inline-flex h-10 items-center gap-2.5 rounded-md px-2"
+          className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-2"
         >
           <div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
             <StrangersIcon className="h-4 w-4 text-white" />
diff --git a/src/shared/composer/modal.tsx b/src/shared/composer/modal.tsx
index e3b3d807..11fa2429 100644
--- a/src/shared/composer/modal.tsx
+++ b/src/shared/composer/modal.tsx
@@ -21,7 +21,7 @@ export function ComposerModal() {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-lg bg-white/20 from-fuchsia-200 via-red-200 to-orange-300 px-4 font-medium text-white hover:bg-fuchsia-500 hover:bg-gradient-to-r hover:text-black focus:outline-none active:translate-y-1"
+          className="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-lg bg-white/20 px-4 font-bold text-white hover:bg-fuchsia-500 focus:outline-none active:translate-y-1"
         >
           <ComposeIcon className="h-5 w-5" />
           Postr
diff --git a/src/shared/layouts/settings.tsx b/src/shared/layouts/settings.tsx
index 901d01e3..89a0823b 100644
--- a/src/shared/layouts/settings.tsx
+++ b/src/shared/layouts/settings.tsx
@@ -1,8 +1,6 @@
 import { NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
-import { LumeBar } from '@shared/lumeBar';
-
 export function SettingsLayout() {
   return (
     <div className="flex h-screen w-screen">
@@ -59,9 +57,6 @@ export function SettingsLayout() {
             </div>
           </div>
         </div>
-        <div className="absolute bottom-3 left-0 w-full px-10">
-          <LumeBar />
-        </div>
       </div>
       <div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
         <Outlet />
diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx
index f8230311..a386707c 100644
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -17,18 +17,20 @@ export function Navigation() {
     <div className="relative h-full w-[232px] bg-black/80">
       <div data-tauri-drag-region className="h-11 w-full" />
       <div className="scrollbar-hide flex h-full flex-col gap-6 overflow-y-auto pb-32">
-        <div className="flex flex-col px-2">
+        <div className="flex flex-col pr-2">
           <NavLink
             to="/"
             preventScrollReset={true}
             className={({ isActive }) =>
               twMerge(
-                'flex h-10 items-center gap-2.5 rounded-md px-2',
-                isActive ? 'bg-white/5 text-white' : 'text-white/80'
+                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
+                isActive
+                  ? 'border-fuchsia-500 bg-white/5 text-white'
+                  : 'border-transparent text-white/80'
               )
             }
           >
-            <span className="inline-flex h-7 w-7 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
               <SpaceIcon className="h-4 w-4 text-white" />
             </span>
             Space
@@ -38,12 +40,14 @@ export function Navigation() {
             preventScrollReset={true}
             className={({ isActive }) =>
               twMerge(
-                'flex h-10 items-center gap-2.5 rounded-md px-2',
-                isActive ? 'bg-white/5 text-white' : 'text-white/80'
+                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
+                isActive
+                  ? 'border-fuchsia-500 bg-white/5 text-white'
+                  : 'border-transparent text-white/80'
               )
             }
           >
-            <span className="inline-flex h-7 w-7 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
               <BellIcon className="h-4 w-4 text-white" />
             </span>
             Notifications
@@ -53,21 +57,23 @@ export function Navigation() {
             preventScrollReset={true}
             className={({ isActive }) =>
               twMerge(
-                'flex h-10 items-center gap-2.5 rounded-md px-2',
-                isActive ? 'bg-white/5 text-white' : 'text-white/80'
+                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
+                isActive
+                  ? 'border-fuchsia-500 bg-white/5 text-white'
+                  : 'border-transparent text-white/80'
               )
             }
           >
-            <span className="inline-flex h-7 w-7 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
               <SettingsIcon className="h-4 w-4 text-white" />
             </span>
             Settings
           </NavLink>
         </div>
         <Collapsible.Root open={chats} onOpenChange={toggleChats}>
-          <div className="flex flex-col gap-1 px-2">
+          <div className="flex flex-col gap-1 pr-2">
             <Collapsible.Trigger asChild>
-              <button className="flex items-center gap-1 px-3">
+              <button className="flex items-center gap-1 pl-[20px] pr-4">
                 <div
                   className={twMerge(
                     'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',