From db4b1f5fdeaaa3a37895a4bb57bc95dc80caac5e Mon Sep 17 00:00:00 2001
From: Johnny <yourselfhosted@gmail.com>
Date: Sat, 5 Jul 2025 11:26:59 +0800
Subject: [PATCH] chore: tweak styles

---
 .../HomeSidebar/HomeSidebarDrawer.tsx         |  13 +-
 web/src/components/MemoContent/CodeBlock.tsx  |   4 +-
 .../ActionButton/AddMemoRelationPopover.tsx   |   8 +-
 .../ActionButton/LocationSelector.tsx         |  25 ++-
 .../MemoEditor/ActionButton/MarkdownMenu.tsx  |   4 +-
 .../MemoEditor/ActionButton/TagSelector.tsx   |   4 +-
 .../ActionButton/UploadAttachmentButton.tsx   |   4 +-
 .../components/MemoEditor/Editor/index.tsx    |   4 +-
 web/src/components/MemoEditor/index.tsx       |   6 +-
 web/src/components/MemoView.tsx               |   2 +-
 web/src/components/Navigation.tsx             |   4 +-
 web/src/components/NavigationDrawer.tsx       |   6 +-
 web/src/components/ReactionView.tsx           |   2 +-
 .../Settings/MemoRelatedSettings.tsx          |  14 +-
 web/src/components/ui/button.tsx              |   4 +-
 web/src/components/ui/input.tsx               |   2 +-
 web/src/index.css                             |  20 ++
 web/src/layouts/HomeLayout.tsx                |   8 +-
 web/src/layouts/RootLayout.tsx                |   5 +-
 web/src/main.tsx                              |   2 +-
 web/src/pages/Setting.tsx                     |   2 +-
 web/src/pages/UserProfile.tsx                 |   4 +-
 web/src/style.css                             | 187 ++++++++++--------
 23 files changed, 179 insertions(+), 155 deletions(-)
 create mode 100644 web/src/index.css

diff --git a/web/src/components/HomeSidebar/HomeSidebarDrawer.tsx b/web/src/components/HomeSidebar/HomeSidebarDrawer.tsx
index b6bd7957d..890c2e070 100644
--- a/web/src/components/HomeSidebar/HomeSidebarDrawer.tsx
+++ b/web/src/components/HomeSidebar/HomeSidebarDrawer.tsx
@@ -2,7 +2,7 @@ import { MenuIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import HomeSidebar from "./HomeSidebar";
 
 const HomeSidebarDrawer = () => {
@@ -16,12 +16,15 @@ const HomeSidebarDrawer = () => {
   return (
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
-        <Button variant="ghost" className="bg-transparent! px-2">
-          <MenuIcon className="w-6 h-auto text-foreground" />
+        <Button variant="ghost">
+          <MenuIcon className="size-5 text-foreground" />
         </Button>
       </SheetTrigger>
-      <SheetContent side="right" className="w-full sm:w-80 bg-secondary">
-        <HomeSidebar className="px-4 py-4" />
+      <SheetContent side="right" className="w-80 max-w-full bg-background">
+        <SheetHeader>
+          <SheetTitle></SheetTitle>
+        </SheetHeader>
+        <HomeSidebar className="px-4" />
       </SheetContent>
     </Sheet>
   );
diff --git a/web/src/components/MemoContent/CodeBlock.tsx b/web/src/components/MemoContent/CodeBlock.tsx
index 64161a867..68cc5fa7c 100644
--- a/web/src/components/MemoContent/CodeBlock.tsx
+++ b/web/src/components/MemoContent/CodeBlock.tsx
@@ -59,8 +59,8 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
   }, [content]);
 
   return (
-    <div className="w-full my-1 bg-accent/10 border-l-4 border-accent rounded hover:shadow relative">
-      <div className="w-full px-2 py-1 flex flex-row justify-between items-center text-accent-foreground">
+    <div className="w-full my-1 bg-background border-2 border-l-4 border-secondary rounded-md relative">
+      <div className="w-full px-2 mt-1 flex flex-row justify-between items-center text-accent-foreground/60">
         <span className="text-sm font-mono">{formatedLanguage}</span>
         <CopyIcon className="w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleCopyButtonClick} />
       </div>
diff --git a/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx b/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
index 7e271baad..e6ec6d270 100644
--- a/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
+++ b/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
@@ -132,8 +132,8 @@ const AddMemoRelationPopover = (props: Props) => {
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
       <PopoverTrigger asChild>
-        <Button variant="ghost">
-          <LinkIcon />
+        <Button variant="ghost" size="icon">
+          <LinkIcon className="size-5" />
         </Button>
       </PopoverTrigger>
       <PopoverContent align="center">
@@ -166,7 +166,9 @@ const AddMemoRelationPopover = (props: Props) => {
             />
             <div className="max-h-[200px] overflow-y-auto">
               {filteredMemos.length === 0 ? (
-                <div className="py-6 text-center text-sm text-muted-foreground">{isFetching ? "Loading..." : t("reference.no-memos-found")}</div>
+                <div className="py-6 text-center text-sm text-muted-foreground">
+                  {isFetching ? "Loading..." : t("reference.no-memos-found")}
+                </div>
               ) : (
                 filteredMemos.map((memo) => (
                   <div
diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index e28735b53..8c504594e 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -96,19 +96,17 @@ const LocationSelector = (props: Props) => {
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
       <PopoverTrigger asChild>
-        <Button variant="ghost" asChild>
-          <div>
-            <MapPinIcon className="w-5 h-5 mx-auto shrink-0" />
-            {props.location && (
-              <>
-                <span className="ml-0.5 text-sm text-ellipsis whitespace-nowrap overflow-hidden max-w-32">
-                  {props.location.placeholder}
-                </span>
-                <XIcon className="w-5 h-5 mx-auto shrink-0 opacity-60 hover:opacity-80" onClick={removeLocation} />
-              </>
-            )}
-          </div>
-        </Button>
+        {props.location ? (
+          <Button variant="ghost">
+            <MapPinIcon className="size-5 shrink-0" />
+            <span className="ml-0.5 text-sm text-ellipsis whitespace-nowrap overflow-hidden max-w-32">{props.location.placeholder}</span>
+            <XIcon className="size-5 mx-auto shrink-0 opacity-60 hover:opacity-80" onClick={removeLocation} />
+          </Button>
+        ) : (
+          <Button variant="ghost" size="icon">
+            <MapPinIcon className="size-5 shrink-0" />
+          </Button>
+        )}
       </PopoverTrigger>
       <PopoverContent align="center">
         <div className="min-w-80 sm:w-lg p-1 flex flex-col justify-start items-start">
@@ -133,7 +131,6 @@ const LocationSelector = (props: Props) => {
             <Button
               className="shrink-0"
               color="primary"
-              size="sm"
               onClick={() => {
                 props.onChange(
                   Location.fromPartial({
diff --git a/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx b/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
index d5aee06ba..970e6ff0a 100644
--- a/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
+++ b/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
@@ -62,8 +62,8 @@ const MarkdownMenu = (props: Props) => {
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="ghost">
-          <SquareSlashIcon />
+        <Button variant="ghost" size="icon">
+          <SquareSlashIcon className="size-5" />
         </Button>
       </PopoverTrigger>
       <PopoverContent align="start" className="text-sm p-1">
diff --git a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
index 78d02a156..3fe4644f4 100644
--- a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
@@ -35,8 +35,8 @@ const TagSelector = observer((props: Props) => {
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="ghost">
-          <HashIcon />
+        <Button variant="ghost" size="icon">
+          <HashIcon className="size-5" />
         </Button>
       </PopoverTrigger>
       <PopoverContent align="start" sideOffset={2}>
diff --git a/web/src/components/MemoEditor/ActionButton/UploadAttachmentButton.tsx b/web/src/components/MemoEditor/ActionButton/UploadAttachmentButton.tsx
index 5e9b9aeeb..d5ab68f74 100644
--- a/web/src/components/MemoEditor/ActionButton/UploadAttachmentButton.tsx
+++ b/web/src/components/MemoEditor/ActionButton/UploadAttachmentButton.tsx
@@ -73,8 +73,8 @@ const UploadAttachmentButton = observer((props: Props) => {
   const isUploading = state.uploadingFlag || props.isUploading;
 
   return (
-    <Button className="relative" variant="ghost" disabled={isUploading}>
-      {isUploading ? <LoaderIcon className="w-5 h-5 animate-spin" /> : <PaperclipIcon className="w-5 h-5" />}
+    <Button className="relative" variant="ghost" size="icon" disabled={isUploading}>
+      {isUploading ? <LoaderIcon className="size-5 animate-spin" /> : <PaperclipIcon className="size-5" />}
       <input
         className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
         ref={fileInputRef}
diff --git a/web/src/components/MemoEditor/Editor/index.tsx b/web/src/components/MemoEditor/Editor/index.tsx
index a5c49c9e5..acecc18a5 100644
--- a/web/src/components/MemoEditor/Editor/index.tsx
+++ b/web/src/components/MemoEditor/Editor/index.tsx
@@ -213,9 +213,7 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
   };
 
   return (
-    <div
-      className={cn("flex flex-col justify-start items-start relative w-full h-auto max-h-[50vh] bg-inherit", className)}
-    >
+    <div className={cn("flex flex-col justify-start items-start relative w-full h-auto max-h-[50vh] bg-inherit", className)}>
       <textarea
         className="w-full h-full my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none placeholder:opacity-70 whitespace-pre-wrap break-words"
         rows={2}
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index b6a6c6012..90e8f1871 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -500,8 +500,8 @@ const MemoEditor = observer((props: Props) => {
         <Editor ref={editorRef} {...editorConfig} />
         <AttachmentListView attachmentList={state.attachmentList} setAttachmentList={handleSetAttachmentList} />
         <RelationListView relationList={referenceRelations} setRelationList={handleSetRelationList} />
-        <div className="relative w-full flex flex-row justify-between items-center py-1" onFocus={(e) => e.stopPropagation()}>
-          <div className="flex flex-row justify-start items-center opacity-80 -space-x-2">
+        <div className="relative w-full flex flex-row justify-between items-center py-1 gap-2" onFocus={(e) => e.stopPropagation()}>
+          <div className="flex flex-row justify-start items-center opacity-60 shrink-1">
             <TagSelector editorRef={editorRef} />
             <MarkdownMenu editorRef={editorRef} />
             <UploadAttachmentButton isUploading={state.isUploadingAttachment} />
@@ -516,7 +516,7 @@ const MemoEditor = observer((props: Props) => {
               }
             />
           </div>
-          <div className="shrink-0 -mr-1 flex flex-row justify-end items-center">
+          <div className="shrink-0 flex flex-row justify-end items-center gap-1">
             {props.onCancel && (
               <Button variant="ghost" className="opacity-60" disabled={state.isRequesting} onClick={handleCancelBtnClick}>
                 {t("common.cancel")}
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index e322a26c6..6283145d6 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -131,7 +131,7 @@ const MemoView: React.FC<Props> = observer((props: Props) => {
   ) : (
     <div
       className={cn(
-        "group relative flex flex-col justify-start items-start w-full px-4 py-3 mb-2 gap-2 bg-card rounded-lg border border-card hover:border-border",
+        "group relative flex flex-col justify-start items-start w-full px-4 py-3 mb-2 gap-2 bg-card rounded-lg border border-border",
         className,
       )}
     >
diff --git a/web/src/components/Navigation.tsx b/web/src/components/Navigation.tsx
index 21d3a0220..c865b339f 100644
--- a/web/src/components/Navigation.tsx
+++ b/web/src/components/Navigation.tsx
@@ -78,9 +78,9 @@ const Navigation = observer((props: Props) => {
           <NavLink
             className={({ isActive }) =>
               cn(
-                "px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-foreground hover:bg-secondary hover:border-border",
+                "px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-foreground hover:border-border",
                 collapsed ? "" : "w-full px-4",
-                isActive ? "bg-secondary drop-shadow-sm border-border" : "border-transparent",
+                isActive ? "bg-background border-border" : "border-transparent",
               )
             }
             key={navLink.id}
diff --git a/web/src/components/NavigationDrawer.tsx b/web/src/components/NavigationDrawer.tsx
index d991626d9..3411347db 100644
--- a/web/src/components/NavigationDrawer.tsx
+++ b/web/src/components/NavigationDrawer.tsx
@@ -23,12 +23,10 @@ const NavigationDrawer = observer(() => {
       <SheetTrigger asChild>
         <Button variant="ghost" className="px-2">
           <UserAvatar className="shrink-0 w-6 h-6 rounded-md" avatarUrl={avatarUrl} />
-          <span className="font-bold text-lg leading-10 ml-2 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-foreground">
-            {title}
-          </span>
+          <span className="font-bold text-lg leading-10 text-ellipsis overflow-hidden text-foreground">{title}</span>
         </Button>
       </SheetTrigger>
-      <SheetContent side="left" className="w-full sm:w-80 overflow-auto px-2 bg-secondary">
+      <SheetContent side="left" className="w-80 max-w-full overflow-auto px-2 bg-background">
         <Navigation />
       </SheetContent>
     </Sheet>
diff --git a/web/src/components/ReactionView.tsx b/web/src/components/ReactionView.tsx
index a21ed739b..d072db29f 100644
--- a/web/src/components/ReactionView.tsx
+++ b/web/src/components/ReactionView.tsx
@@ -73,7 +73,7 @@ const ReactionView = observer((props: Props) => {
               "h-7 border px-2 py-0.5 rounded-full flex flex-row justify-center items-center gap-1",
               "text-sm text-muted-foreground",
               currentUser && !readonly && "cursor-pointer",
-              hasReaction && "bg-primary/10 border-primary",
+              hasReaction && "bg-secondary border-border",
             )}
             onClick={handleReactionClick}
           >
diff --git a/web/src/components/Settings/MemoRelatedSettings.tsx b/web/src/components/Settings/MemoRelatedSettings.tsx
index fc376aea0..84b9c93a7 100644
--- a/web/src/components/Settings/MemoRelatedSettings.tsx
+++ b/web/src/components/Settings/MemoRelatedSettings.tsx
@@ -124,7 +124,7 @@ const MemoRelatedSettings = observer(() => {
         <div className="mt-2 w-full flex flex-row flex-wrap gap-1">
           {memoRelatedSetting.reactions.map((reactionType) => {
             return (
-              <Badge key={reactionType} variant="outline" className="h-8 flex items-center gap-1">
+              <Badge key={reactionType} variant="outline" className="h-9 flex items-center gap-1">
                 {reactionType}
                 <X
                   className="w-3 h-3 cursor-pointer hover:text-destructive"
@@ -140,10 +140,7 @@ const MemoRelatedSettings = observer(() => {
               value={editingReaction}
               onChange={(event) => setEditingReaction(event.target.value.trim())}
             />
-            <CheckIcon
-              className="w-5 h-5 text-muted-foreground cursor-pointer hover:text-primary"
-              onClick={() => upsertReaction()}
-            />
+            <CheckIcon className="w-5 h-5 text-muted-foreground cursor-pointer hover:text-primary" onClick={() => upsertReaction()} />
           </div>
         </div>
       </div>
@@ -158,7 +155,7 @@ const MemoRelatedSettings = observer(() => {
         <div className="mt-2 w-full flex flex-row flex-wrap gap-1">
           {memoRelatedSetting.nsfwTags.map((nsfwTag) => {
             return (
-              <Badge key={nsfwTag} variant="outline" className="h-8 flex items-center gap-1">
+              <Badge key={nsfwTag} variant="outline" className="h-9 flex items-center gap-1">
                 {nsfwTag}
                 <X
                   className="w-3 h-3 cursor-pointer hover:text-destructive"
@@ -174,10 +171,7 @@ const MemoRelatedSettings = observer(() => {
               value={editingNsfwTag}
               onChange={(event) => setEditingNsfwTag(event.target.value.trim())}
             />
-            <CheckIcon
-              className="w-5 h-5 text-muted-foreground cursor-pointer hover:text-primary"
-              onClick={() => upsertNsfwTags()}
-            />
+            <CheckIcon className="w-5 h-5 text-muted-foreground cursor-pointer hover:text-primary" onClick={() => upsertNsfwTags()} />
           </div>
         </div>
       </div>
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index c97663bc6..4bad92f34 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -18,9 +18,9 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-8 px-3 py-2 has-[>svg]:px-3",
+        default: "h-8 px-3",
         sm: "h-7 rounded-md gap-1 px-2 has-[>svg]:px-2",
-        lg: "h-9 rounded-md px-4 has-[>svg]:px-3",
+        lg: "h-9 rounded-md px-4",
         icon: "size-8",
       },
     },
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
index e9d0e8ac5..e3953d0e3 100644
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -7,7 +7,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-8 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className,
diff --git a/web/src/index.css b/web/src/index.css
new file mode 100644
index 000000000..7571624de
--- /dev/null
+++ b/web/src/index.css
@@ -0,0 +1,20 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "./style.css";
+
+@custom-variant dark (&: is(.dark *));
+
+@theme {
+  --default-transition-duration: 150ms;
+}
+
+@variant dark (&:is(.dark *));
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/web/src/layouts/HomeLayout.tsx b/web/src/layouts/HomeLayout.tsx
index 9c6dbf108..633f5d97a 100644
--- a/web/src/layouts/HomeLayout.tsx
+++ b/web/src/layouts/HomeLayout.tsx
@@ -16,13 +16,7 @@ const HomeLayout = observer(() => {
         </MobileHeader>
       )}
       {md && (
-        <div
-          className={cn(
-            "fixed top-0 left-16 shrink-0 h-svh transition-all",
-            "border-r border",
-            lg ? "w-72" : "w-56",
-          )}
-        >
+        <div className={cn("fixed top-0 left-16 shrink-0 h-svh transition-all", "border-x border-border", lg ? "w-72" : "w-56")}>
           <HomeSidebar className={cn("px-3 py-6")} />
         </div>
       )}
diff --git a/web/src/layouts/RootLayout.tsx b/web/src/layouts/RootLayout.tsx
index f8243731a..a091d0b49 100644
--- a/web/src/layouts/RootLayout.tsx
+++ b/web/src/layouts/RootLayout.tsx
@@ -49,10 +49,7 @@ const RootLayout = observer(() => {
     <div className="w-full min-h-full flex flex-row justify-center items-start sm:pl-16">
       {sm && (
         <div
-          className={cn(
-            "group flex flex-col justify-start items-start fixed top-0 left-0 select-none border-r border h-full bg-secondary",
-            "w-16 px-2",
-          )}
+          className={cn("group flex flex-col justify-start items-start fixed top-0 left-0 select-none h-full bg-secondary", "w-16 px-2")}
         >
           <Navigation collapsed={true} />
         </div>
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 13a5f6343..46b6dc126 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -4,10 +4,10 @@ import { createRoot } from "react-dom/client";
 import { Toaster } from "react-hot-toast";
 import { RouterProvider } from "react-router-dom";
 import "./i18n";
+import "./index.css";
 import router from "./router";
 import { initialUserStore } from "./store/v2/user";
 import { initialWorkspaceStore } from "./store/v2/workspace";
-import "./style.css";
 import "leaflet/dist/leaflet.css";
 
 const Main = observer(() => (
diff --git a/web/src/pages/Setting.tsx b/web/src/pages/Setting.tsx
index a2251774b..a38f0ec34 100644
--- a/web/src/pages/Setting.tsx
+++ b/web/src/pages/Setting.tsx
@@ -87,7 +87,7 @@ const Setting = observer(() => {
     <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8">
       {!md && <MobileHeader />}
       <div className="w-full px-4 sm:px-6">
-        <div className="w-full shadow flex flex-row justify-start items-start px-4 py-3 rounded-xl bg-background text-muted-foreground">
+        <div className="w-full shadow border border-border flex flex-row justify-start items-start px-4 py-3 rounded-xl bg-background text-muted-foreground">
           <div className="hidden sm:flex flex-col justify-start items-start w-40 h-auto shrink-0 py-2">
             <span className="text-sm mt-0.5 pl-3 font-mono select-none text-muted-foreground">{t("common.basic")}</span>
             <div className="w-full flex flex-col justify-start items-start mt-1">
diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx
index 92cf090cd..1d87e6958 100644
--- a/web/src/pages/UserProfile.tsx
+++ b/web/src/pages/UserProfile.tsx
@@ -92,9 +92,7 @@ const UserProfile = observer(() => {
                   <p className="w-full text-3xl text-foreground leading-tight font-medium opacity-80 truncate">
                     {user.displayName || user.username}
                   </p>
-                  <p className="w-full text-muted-foreground leading-snug whitespace-pre-wrap truncate line-clamp-6">
-                    {user.description}
-                  </p>
+                  <p className="w-full text-muted-foreground leading-snug whitespace-pre-wrap truncate line-clamp-6">{user.description}</p>
                 </div>
               </div>
               <PagedMemoList
diff --git a/web/src/style.css b/web/src/style.css
index 2130c7540..bb8a77143 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -1,87 +1,52 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme {
-  --default-transition-duration: 150ms;
-}
-
-@variant dark (&:is(.dark *));
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
 :root {
-  --radius: 0.5rem;
   --background: oklch(0.9818 0.0054 95.0986);
   --foreground: oklch(0.3438 0.0269 95.7226);
   --card: oklch(0.9818 0.0054 95.0986);
-  --card-foreground: oklch(0.1908 0.0020 106.5859);
-  --popover: oklch(1.0000 0 0);
-  --popover-foreground: oklch(0.2671 0.0196 98.9390);
+  --card-foreground: oklch(0.1908 0.002 106.5859);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.2671 0.0196 98.939);
   --primary: oklch(0.6171 0.1375 39.0427);
-  --primary-foreground: oklch(1.0000 0 0);
+  --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.9245 0.0138 92.9892);
   --secondary-foreground: oklch(0.4334 0.0177 98.6048);
-  --muted: oklch(0.9341 0.0153 90.2390);
+  --muted: oklch(0.9341 0.0153 90.239);
   --muted-foreground: oklch(0.6059 0.0075 97.4233);
   --accent: oklch(0.9245 0.0138 92.9892);
-  --accent-foreground: oklch(0.2671 0.0196 98.9390);
-  --destructive: oklch(0.1908 0.0020 106.5859);
-  --destructive-foreground: oklch(1.0000 0 0);
+  --accent-foreground: oklch(0.2671 0.0196 98.939);
+  --destructive: oklch(0.1908 0.002 106.5859);
+  --destructive-foreground: oklch(1 0 0);
   --border: oklch(0.8847 0.0069 97.3627);
   --input: oklch(0.7621 0.0156 98.3528);
-  --ring: oklch(0.5937 0.1673 253.0630);
+  --ring: oklch(0.5937 0.1673 253.063);
   --chart-1: oklch(0.5583 0.1276 42.9956);
   --chart-2: oklch(0.6898 0.1581 290.4107);
-  --chart-3: oklch(0.8816 0.0276 93.1280);
+  --chart-3: oklch(0.8816 0.0276 93.128);
   --chart-4: oklch(0.8822 0.0403 298.1792);
   --chart-5: oklch(0.5608 0.1348 42.0584);
-  --sidebar: oklch(0.9663 0.0080 98.8792);
-  --sidebar-foreground: oklch(0.3590 0.0051 106.6524);
+  --sidebar: oklch(0.9663 0.008 98.8792);
+  --sidebar-foreground: oklch(0.359 0.0051 106.6524);
   --sidebar-primary: oklch(0.6171 0.1375 39.0427);
   --sidebar-primary-foreground: oklch(0.9881 0 0);
   --sidebar-accent: oklch(0.9245 0.0138 92.9892);
-  --sidebar-accent-foreground: oklch(0.3250 0 0);
+  --sidebar-accent-foreground: oklch(0.325 0 0);
   --sidebar-border: oklch(0.9401 0 0);
   --sidebar-ring: oklch(0.7731 0 0);
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
 }
 
 .dark {
@@ -90,40 +55,98 @@
   --card: oklch(0.2679 0.0036 106.6427);
   --card-foreground: oklch(0.9818 0.0054 95.0986);
   --popover: oklch(0.3085 0.0035 106.6039);
-  --popover-foreground: oklch(0.9211 0.0040 106.4781);
+  --popover-foreground: oklch(0.9211 0.004 106.4781);
   --primary: oklch(0.6724 0.1308 38.7559);
-  --primary-foreground: oklch(1.0000 0 0);
+  --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.9818 0.0054 95.0986);
   --secondary-foreground: oklch(0.3085 0.0035 106.6039);
-  --muted: oklch(0.2213 0.0038 106.7070);
+  --muted: oklch(0.2213 0.0038 106.707);
   --muted-foreground: oklch(0.7713 0.0169 99.0657);
-  --accent: oklch(0.2130 0.0078 95.4245);
-  --accent-foreground: oklch(0.9663 0.0080 98.8792);
+  --accent: oklch(0.213 0.0078 95.4245);
+  --accent-foreground: oklch(0.9663 0.008 98.8792);
   --destructive: oklch(0.6368 0.2078 25.3313);
-  --destructive-foreground: oklch(1.0000 0 0);
+  --destructive-foreground: oklch(1 0 0);
   --border: oklch(0.3618 0.0101 106.8928);
   --input: oklch(0.4336 0.0113 100.2195);
-  --ring: oklch(0.5937 0.1673 253.0630);
+  --ring: oklch(0.5937 0.1673 253.063);
   --chart-1: oklch(0.5583 0.1276 42.9956);
   --chart-2: oklch(0.6898 0.1581 290.4107);
-  --chart-3: oklch(0.2130 0.0078 95.4245);
-  --chart-4: oklch(0.3074 0.0516 289.3230);
+  --chart-3: oklch(0.213 0.0078 95.4245);
+  --chart-4: oklch(0.3074 0.0516 289.323);
   --chart-5: oklch(0.5608 0.1348 42.0584);
   --sidebar: oklch(0.2357 0.0024 67.7077);
   --sidebar-foreground: oklch(0.8074 0.0142 93.0137);
-  --sidebar-primary: oklch(0.3250 0 0);
+  --sidebar-primary: oklch(0.325 0 0);
   --sidebar-primary-foreground: oklch(0.9881 0 0);
-  --sidebar-accent: oklch(0.1680 0.0020 106.6177);
+  --sidebar-accent: oklch(0.168 0.002 106.6177);
   --sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137);
   --sidebar-border: oklch(0.9401 0 0);
   --sidebar-ring: oklch(0.7731 0 0);
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.5rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
 }
 
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
 }