wip: new ui

src/app/auth/unlock.tsx

@@ -81,65 +81,61 @@ export function UnlockScreen() {
   return (
     <div className="flex h-full w-full items-center justify-center">
       <div className="mx-auto w-full max-w-md">
-        <div className="mb-8 text-center">
-          <h1 className="text-xl font-semibold text-zinc-100">
-            Enter password to unlock
-          </h1>
+        <div className="mb-6 text-center">
+          <h1 className="text-2xl font-semibold text-white">Enter password to unlock</h1>
         </div>
-        <div className="flex flex-col gap-4">
-          <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3">
-            <div className="flex flex-col gap-1">
-              <div className="relative">
-                <input
-                  {...register('password', { required: true })}
-                  type={passwordInput}
-                  className="relative w-full rounded-lg bg-zinc-800 py-3 text-center text-zinc-100 !outline-none placeholder:text-zinc-400"
-                />
-                <button
-                  type="button"
-                  onClick={() => showPassword()}
-                  className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
-                >
-                  {passwordInput === 'password' ? (
-                    <EyeOffIcon
-                      width={20}
-                      height={20}
-                      className="text-zinc-500 group-hover:text-zinc-100"
-                    />
-                  ) : (
-                    <EyeOnIcon
-                      width={20}
-                      height={20}
-                      className="text-zinc-500 group-hover:text-zinc-100"
-                    />
-                  )}
-                </button>
-              </div>
-              <span className="text-sm text-red-400">
-                {errors.password && <p>{errors.password.message}</p>}
-              </span>
-            </div>
-            <div className="flex flex-col items-center justify-center">
+        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1">
+            <div className="relative">
+              <input
+                {...register('password', { required: true })}
+                type={passwordInput}
+                className="relative w-full rounded-lg bg-white/10 py-3 text-center text-white !outline-none placeholder:text-white/10"
+              />
               <button
-                type="submit"
-                disabled={!isDirty || !isValid}
-                className="inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600"
+                type="button"
+                onClick={() => showPassword()}
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
               >
-                {loading ? (
-                  <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+                {passwordInput === 'password' ? (
+                  <EyeOffIcon
+                    width={20}
+                    height={20}
+                    className="text-white/50 group-hover:text-white"
+                  />
                 ) : (
-                  'Continue →'
+                  <EyeOnIcon
+                    width={20}
+                    height={20}
+                    className="text-white/50 group-hover:text-white"
+                  />
                 )}
               </button>
-              <Link
-                to="/auth/reset"
-                className="inline-flex h-12 items-center justify-center text-center text-sm text-zinc-400"
-              >
-                Reset password
-              </Link>
             </div>
-          </form>
-        </div>
+            <span className="text-sm text-red-400">
+              {errors.password && <p>{errors.password.message}</p>}
+            </span>
+          </div>
+          <div className="flex flex-col items-center justify-center">
+            <button
+              type="submit"
+              disabled={!isDirty || !isValid}
+              className="inline-flex h-12 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600"
+            >
+              {loading ? (
+                <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+              ) : (
+                'Continue →'
+              )}
+            </button>
+            <Link
+              to="/auth/reset"
+              className="inline-flex h-14 items-center justify-center text-center text-white/50"
+            >
+              Reset password
+            </Link>
+          </div>
+        </form>
       </div>
     </div>
   );

src/app/space/components/blocks/following.tsx

@@ -125,13 +125,12 @@ export function FollowingBlock() {
   );
 
   return (
-    <div className="relative w-[400px] shrink-0 border-r border-zinc-900">
+    <div
+      ref={parentRef}
+      className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20"
+    >
       <TitleBar title="Your Circle" />
-      <div
-        ref={parentRef}
-        className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"
-        style={{ contain: 'strict' }}
-      >
+      <div className="h-full">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
             <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">

src/app/space/index.tsx

@@ -57,12 +57,11 @@ export function SpaceScreen() {
     <div className="scrollbar-hide flex h-full w-full flex-nowrap overflow-x-auto overflow-y-hidden">
       <FollowingBlock />
       {status === 'loading' ? (
-        <div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900">
+        <div className="flex w-[350px] shrink-0 flex-col">
           <div
             data-tauri-drag-region
-            className="group flex h-11 w-full items-center justify-between overflow-hidden border-b border-zinc-900 px-3"
+            className="group flex h-11 w-full items-center justify-between overflow-hidden px-3"
           />
-
           <div className="flex w-full flex-1 items-center justify-center p-3">
             <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
           </div>
@@ -71,18 +70,17 @@ export function SpaceScreen() {
         blocks.map((block: Block) => renderBlock(block))
       )}
       {isFetching && (
-        <div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900">
+        <div className="flex w-[350px] shrink-0 flex-col">
           <div
             data-tauri-drag-region
-            className="group flex h-11 w-full items-center justify-between overflow-hidden border-b border-zinc-900 px-3"
+            className="group flex h-11 w-full items-center justify-between overflow-hidden px-3"
           />
-
           <div className="flex w-full flex-1 items-center justify-center p-3">
             <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
           </div>
         </div>
       )}
-      <div className="flex w-[350px] shrink-0 flex-col border-r border-zinc-900">
+      <div className="flex w-[350px] shrink-0 flex-col">
         <div className="inline-flex h-full w-full items-center justify-center">
           <AddBlock />
         </div>