wip: ui

src/shared/notes/actions/more.tsx

@@ -30,9 +30,9 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
           <DropdownMenu.Trigger asChild>
             <button
               type="button"
-              className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-white/80"
+              className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
             >
-              <HorizontalDotsIcon className="h-5 w-5 text-white/80 group-hover:text-fuchsia-400" />
+              <HorizontalDotsIcon className="h-5 w-5 group-hover:text-interor-600" />
             </button>
           </DropdownMenu.Trigger>
         </Tooltip.Trigger>
@@ -49,7 +49,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
             <button
               type="button"
               onClick={() => copyLink()}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
             >
               Copy shareable link
             </button>
@@ -58,7 +58,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
             <button
               type="button"
               onClick={() => copyID()}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
             >
               Copy ID
             </button>
@@ -66,7 +66,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
           <DropdownMenu.Item asChild>
             <Link
               to={`/users/${pubkey}`}
-              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10"
+              className="inline-flex h-10 items-center rounded-md px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
             >
               View profile
             </Link>

src/shared/notes/actions/reaction.tsx

@@ -62,12 +62,12 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
       <Popover.Trigger asChild>
         <button
           type="button"
-          className="group inline-flex h-7 w-7 items-center justify-center text-white/80"
+          className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
         >
           {reaction ? (
             <img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" />
           ) : (
-            <ReactionIcon className="h-5 w-5 text-white/80 group-hover:text-red-400" />
+            <ReactionIcon className="h-5 w-5 group-hover:text-red-400" />
           )}
         </button>
       </Popover.Trigger>

src/shared/notes/actions/reply.tsx

@@ -21,9 +21,9 @@ export function NoteReply({
         <button
           type="button"
           onClick={() => setReply(id, pubkey, root)}
-          className="group inline-flex h-7 w-7 items-center justify-center text-white/80"
+          className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
         >
-          <ReplyIcon className="h-5 w-5 text-white/80 group-hover:text-green-500" />
+          <ReplyIcon className="h-5 w-5 group-hover:text-green-500" />
         </button>
       </Tooltip.Trigger>
       <Tooltip.Portal>

src/shared/notes/actions/repost.tsx

@@ -44,12 +44,12 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
           <AlertDialog.Trigger asChild>
             <button
               type="button"
-              className="group inline-flex h-7 w-7 items-center justify-center text-white/80"
+              className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
             >
               <RepostIcon
                 className={twMerge(
                   'h-5 w-5 group-hover:text-blue-500',
-                  isRepost ? 'text-blue-500' : 'text-white/80'
+                  isRepost ? 'text-blue-500' : ''
                 )}
               />
             </button>
@@ -62,7 +62,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
-      <AlertDialog.Portal className="relative z-10">
+      <AlertDialog.Portal>
         <AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
         <AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
           <div className="relative h-min w-full max-w-md rounded-xl bg-white/10 backdrop-blur-xl">
@@ -84,7 +84,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
               <button
                 type="button"
                 onClick={() => submit()}
-                className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium leading-none text-white outline-none hover:bg-fuchsia-500"
+                className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium leading-none text-white outline-none hover:bg-interor-500"
               >
                 {isLoading ? (
                   <LoaderIcon className="h-4 w-4 animate-spin text-white" />

src/shared/notes/actions/zap.tsx

@@ -93,9 +93,9 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="group inline-flex h-7 w-7 items-center justify-center text-white/80"
+          className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300"
         >
-          <ZapIcon className="h-5 w-5 text-white/80 group-hover:text-orange-400" />
+          <ZapIcon className="h-5 w-5 group-hover:text-orange-400" />
         </button>
       </Dialog.Trigger>
       <Dialog.Portal>
@@ -186,7 +186,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
                         <button
                           type="button"
                           onClick={() => createZapRequest()}
-                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-fuchsia-500 px-4 font-medium text-white hover:bg-fuchsia-600"
+                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-interor-500 px-4 font-medium text-white hover:bg-interor-600"
                         >
                           {isCompleted ? (
                             <p>Successfully tipped</p>
@@ -210,7 +210,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
                         <button
                           type="button"
                           onClick={() => createZapRequest()}
-                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-fuchsia-500 px-4 font-medium hover:bg-fuchsia-600"
+                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-interor-500 px-4 font-medium hover:bg-interor-600"
                         >
                           <p>Create Lightning invoice</p>
                         </button>