wip: ui

src/shared/button.tsx

@@ -16,15 +16,15 @@ export function Button({
   switch (preset) {
     case 'small':
       preClass =
-        'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-fuchsia-500';
+        'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-interor-500';
       break;
     case 'publish':
       preClass =
-        'w-min h-9 px-4 bg-fuchsia-500 rounded-md text-sm font-medium text-white hover:bg-fuchsia-600';
+        'w-min h-9 px-4 bg-interor-500 rounded-md text-sm font-medium text-white hover:bg-interor-600';
       break;
     case 'large':
       preClass =
-        'h-11 w-full bg-fuchsia-500 rounded-lg font-medium text-white hover:bg-fuchsia-600';
+        'h-11 w-full bg-interor-500 rounded-lg font-medium text-white hover:bg-interor-600';
       break;
     case 'large-alt':
       preClass =

src/shared/composer/composer.tsx

@@ -150,7 +150,7 @@ export function Composer() {
         <button
           onClick={() => submit()}
           disabled={editor && editor.isEmpty}
-          className="inline-flex h-10 w-20 items-center justify-center rounded-lg bg-fuchsia-500 px-2 font-semibold hover:bg-fuchsia-600 disabled:opacity-50"
+          className="inline-flex h-10 w-20 items-center justify-center rounded-lg bg-interor-500 px-2 font-semibold hover:bg-interor-600 disabled:opacity-50"
         >
           {loading === true ? (
             <LoaderIcon className="h-5 w-5 animate-spin text-white" />

src/shared/layouts/app.tsx

@@ -5,9 +5,9 @@ import { Navigation } from '@shared/navigation';
 
 export function AppLayout() {
   return (
-    <div className="h-screen w-screen bg-zinc-50 text-zinc-50 dark:bg-zinc-950 dark:text-zinc-950">
-      <WindowTitlebar className="border-b border-zinc-200 dark:border-zinc-800" />
-      <div className="flex h-full">
+    <div className="flex h-screen w-screen flex-col">
+      <WindowTitlebar />
+      <div className="flex h-full min-h-0 w-full bg-zinc-50 text-zinc-50 dark:bg-zinc-950 dark:text-zinc-950">
         <div className="h-full shrink-0">
           <Navigation />
         </div>

src/shared/layouts/auth.tsx

@@ -3,9 +3,9 @@ import { WindowTitlebar } from 'tauri-controls';
 
 export function AuthLayout() {
   return (
-    <div className="relative h-screen w-screen bg-zinc-50 dark:bg-zinc-950">
-      <WindowTitlebar className="border-b border-zinc-200 dark:border-zinc-800" />
-      <div className="bg-zinc-100 dark:bg-zinc-900">
+    <div className="relative h-screen w-screen">
+      <WindowTitlebar />
+      <div className="bg-zinc-50 dark:bg-zinc-950">
         <Outlet />
       </div>
     </div>

src/shared/logout.tsx

@@ -54,7 +54,7 @@ export function Logout() {
               <button
                 type="button"
                 onClick={() => logout()}
-                className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-fuchsia-500"
+                className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-interor-500"
               >
                 Logout
               </button>

src/shared/notes/actions.tsx

@@ -28,7 +28,7 @@ export function NoteActions({
 
   return (
     <Tooltip.Provider>
-      <div className="-ml-1 mt-2 inline-flex w-full items-center">
+      <div className="-ml-1 mt-3 inline-flex w-full items-center">
         <div className="inline-flex items-center gap-2">
           <NoteReply id={id} pubkey={pubkey} root={root} />
           <NoteReaction id={id} pubkey={pubkey} />

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>

src/shared/notes/kinds/text.tsx

@@ -21,7 +21,7 @@ export function TextNote(props: { content?: string }) {
     return (
       <div>
         <ReactMarkdown
-          className="markdown"
+          className="prose prose-zinc max-w-none select-text dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-interor-500 hover:prose-a:text-interor-600 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-interor-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2"
           remarkPlugins={[remarkGfm]}
           disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
           unwrapDisallowed={true}

src/shared/user.tsx

@@ -359,13 +359,13 @@ export const User = memo(function User({
           <div className="flex items-center gap-2 px-3 py-3">
             <Link
               to={`/users/${pubkey}`}
-              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-fuchsia-500"
+              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-interor-500"
             >
               View profile
             </Link>
             <Link
               to={`/chats/${pubkey}`}
-              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-fuchsia-500"
+              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-interor-500"
             >
               Message
             </Link>

src/shared/userProfile.tsx

@@ -62,7 +62,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
             <button
               type="button"
               onClick={() => unfollowUser(pubkey)}
-              className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+              className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
             >
               Unfollow
             </button>
@@ -70,14 +70,14 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
             <button
               type="button"
               onClick={() => followUser(pubkey)}
-              className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+              className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
             >
               Follow
             </button>
           )}
           <Link
             to={`/chats/${pubkey}`}
-            className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500"
+            className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500"
           >
             Message
           </Link>

src/shared/widgets/eventLoader.tsx

@@ -42,29 +42,29 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
 
   return (
     <div className="mb-3 px-3">
-      <div className="h-max w-full rounded-lg border-t border-white/10 bg-white/20 p-3">
+      <div className="h-max w-full rounded-lg bg-zinc-100 p-3 dark:bg-zinc-900">
         <div className="flex flex-col items-center gap-3">
           {firstTime ? (
             <div>
               <span className="text-4xl">👋</span>
-              <h3 className="mt-2 font-semibold leading-tight">
+              <h3 className="mt-2 font-semibold leading-tight text-zinc-100 dark:text-zinc-900">
                 Hello, this is the first time you&apos;re using Lume
               </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-sm text-zinc-500">
                 Lume is downloading all events since the last 24 hours. It will auto
                 refresh when it done, please be patient
               </p>
             </div>
           ) : (
             <div className="text-center">
-              <h3 className="font-semibold leading-tight">
+              <h3 className="font-semibold leading-tight text-zinc-500">
                 Downloading all events while you&apos;re away...
               </h3>
             </div>
           )}
           <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-white/20">
             <div
-              className="flex flex-col justify-center overflow-hidden bg-fuchsia-500 transition-all duration-1000 ease-smooth"
+              className="flex flex-col justify-center overflow-hidden bg-interor-600 transition-all duration-1000 ease-smooth"
               role="progressbar"
               style={{ width: `${progress}%` }}
             />

src/shared/widgets/local/articles.tsx

@@ -72,7 +72,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
                 <button
                   onClick={() => fetchNextPage()}
                   disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
                 >
                   {isFetchingNextPage ? (
                     <>

src/shared/widgets/local/feeds.tsx

@@ -108,7 +108,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
                 <button
                   onClick={() => fetchNextPage()}
                   disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
                 >
                   {isFetchingNextPage ? (
                     <>

src/shared/widgets/local/files.tsx

@@ -74,7 +74,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
                 <button
                   onClick={() => fetchNextPage()}
                   disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
                 >
                   {isFetchingNextPage ? (
                     <>

src/shared/widgets/local/follows.tsx

@@ -107,7 +107,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
                 <button
                   onClick={() => fetchNextPage()}
                   disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
                 >
                   {isFetchingNextPage ? (
                     <>

src/shared/widgets/local/network.tsx

@@ -106,7 +106,7 @@ export function LocalNetworkWidget() {
       <div className="flex-1">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+            <div className="rounded-xl bg-zinc-100 px-3 py-3 backdrop-blur-xl dark:bg-zinc-900">
               <NoteSkeleton />
             </div>
           </div>
@@ -121,21 +121,21 @@ export function LocalNetworkWidget() {
                 <button
                   onClick={() => fetchNextPage()}
                   disabled={!hasNextPage || isFetchingNextPage}
-                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium hover:bg-interor-600 focus:outline-none"
                 >
                   {isFetchingNextPage ? (
                     <>
                       <span>Loading...</span>
-                      <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                      <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
                     </>
                   ) : hasNextPage ? (
                     <>
-                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
                       <span>Load more</span>
                     </>
                   ) : (
                     <>
-                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
                       <span>Nothing more to load</span>
                     </>
                   )}

src/shared/widgets/nostrBandUserProfile.tsx

@@ -94,7 +94,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
               <button
                 type="button"
                 onClick={() => unfollowUser(data.pubkey)}
-                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-interor-500 hover:text-white"
               >
                 <UnfollowIcon className="h-4 w-4" />
               </button>
@@ -102,7 +102,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
               <button
                 type="button"
                 onClick={() => followUser(data.pubkey)}
-                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-interor-500 hover:text-white"
               >
                 <FollowIcon className="h-4 w-4" />
               </button>

src/shared/widgets/tmp/feeds.tsx

@@ -78,7 +78,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
               type="submit"
               disabled={groups.length < 1}
               onClick={submit}
-              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
             >
               <span className="w-5" />
               <span>Add {groups.length} account to group feed</span>

src/shared/widgets/tmp/hashtag.tsx

@@ -62,7 +62,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
   };
 
   return (
-    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10 backdrop-blur-xl">
+    <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
       <div className="w-full px-5">
         <h3 className="mb-4 text-center text-lg font-semibold">
           Enter hashtag you want to follow
@@ -72,7 +72,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
             <input
               {...register('hashtag', { required: true, minLength: 1 })}
               placeholder="#bitcoin"
-              className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
+              className="relative h-11 w-full rounded-lg bg-zinc-100 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-white/50 dark:bg-zinc-900 dark:text-zinc-100"
             />
             <span className="text-sm text-red-400">
               {errors.hashtag && <p>{errors.hashtag.message}</p>}
@@ -82,7 +82,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
             <button
               type="submit"
               disabled={!isDirty || !isValid}
-              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium text-zinc-900 hover:bg-interor-600 focus:outline-none disabled:opacity-50 dark:text-zinc-100"
             >
               <span className="w-5" />
               <span>Create</span>
@@ -91,7 +91,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
             <button
               type="button"
               onClick={cancel}
-              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-zinc-100 px-6 font-medium leading-none text-zinc-900 backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50 dark:bg-zinc-900 dark:text-zinc-100"
             >
               Cancel
             </button>

src/shared/widgets/wrapper.tsx

@@ -20,10 +20,7 @@ export function WidgetWrapper({
       }}
       minWidth={420}
       minHeight={'100vh'}
-      className={twMerge(
-        'relative shrink-0 grow-0 bg-white/10 backdrop-blur-xl',
-        className
-      )}
+      className={twMerge('relative shrink-0 grow-0', className)}
       enable={{ right: true }}
     >
       {children}