chore: update some styles

web/src/components/FloatingNavButton.tsx

@@ -31,14 +31,14 @@ const FloatingNavButton = () => {
         </div>
         <Menu placement="top-end">
           <button
-            className="w-full text-left text-sm flex flex-row justify-center items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
+            className="w-full text-left text-sm flex flex-row justify-start items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
             onClick={handleScrollToTop}
           >
             <Icon.ArrowUpToLine className="w-4 h-auto mr-1 opacity-70" />
             {t("router.back-to-top")}
           </button>
           <button
-            className="w-full text-left text-sm flex flex-row justify-center items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
+            className="w-full text-left text-sm flex flex-row justify-start items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
             onClick={() => navigateTo("/")}
           >
             <Icon.Home className="w-4 h-auto mr-1 opacity-70" />

web/src/components/Header.tsx

@@ -107,8 +107,8 @@ const Header = () => {
               id={navLink.id}
               className={({ isActive }) =>
                 classNames(
-                  "px-4 pr-5 py-2 rounded-full border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
-                  isActive ? "bg-white dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
+                  "px-4 pr-5 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-700",
+                  isActive ? "bg-white drop-shadow-sm dark:bg-zinc-700 border-gray-200 dark:border-zinc-600" : "border-transparent"
                 )
               }
             >

web/src/components/UserBanner.tsx

@@ -35,7 +35,7 @@ const UserBanner = () => {
       <Dropdown
         className="w-auto"
         trigger={
-          <div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-lg hover:shadow hover:bg-white dark:hover:bg-zinc-700">
+          <div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl hover:shadow hover:bg-white dark:hover:bg-zinc-700">
             <UserAvatar className="shadow" avatarUrl={user?.avatarUrl} />
             <span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
             {user?.role === User_Role.HOST ? (

web/src/layouts/Root.tsx

@@ -10,7 +10,7 @@ function Root() {
       </div>
       <div className="w-full max-w-6xl mx-auto flex flex-row justify-center items-start sm:px-4">
         <Header />
-        <main className="w-auto max-w-full sm:max-w-[calc(100%-14rem)] flex-grow shrink flex flex-col justify-start items-start">
+        <main className="w-full sm:max-w-[calc(100%-14rem)] flex-grow shrink flex flex-col justify-start items-start">
           <Outlet />
         </main>
       </div>

web/src/less/base-dialog.less

@@ -10,7 +10,7 @@
   }
 
   > .dialog-container {
-    @apply max-w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-200 p-4 rounded-lg;
+    @apply max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-200 p-4 rounded-lg;
 
     > .dialog-header-container {
       @apply flex flex-row justify-between items-center w-full mb-4;

web/src/less/memo-editor.less

@@ -37,7 +37,7 @@
       @apply h-8;
 
       > .current-value-container {
-        @apply rounded-full px-3;
+        @apply rounded-xl px-3;
 
         > .value-text {
           @apply text-sm w-full mr-1;
@@ -48,12 +48,8 @@
     > .buttons-container {
       @apply grow-0 shrink-0 flex flex-row justify-end items-center;
 
-      > .cancel-btn {
-        @apply mr-4 text-sm text-gray-500 hover:opacity-80 dark:text-gray-300;
-      }
-
       > .confirm-btn {
-        @apply border-none select-none rounded-full flex flex-row justify-center items-center shadow cursor-pointer px-4 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
+        @apply border-none select-none rounded-xl flex flex-row justify-center items-center shadow cursor-pointer px-4 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
       }
     }
   }

web/src/less/setting.less

@@ -1,5 +1,5 @@
 .setting-page-wrapper {
-  @apply flex flex-row justify-start items-start relative w-full h-full p-4 rounded-lg bg-white dark:bg-zinc-700 dark:text-gray-200 sm:gap-x-4;
+  @apply flex flex-row justify-start items-start relative w-full h-full shadow p-4 rounded-lg bg-white dark:bg-zinc-700 dark:text-gray-200 sm:gap-x-4;
 
   > .section-selector-container {
     @apply hidden sm:flex flex-col justify-start items-start sm:w-40 h-auto sm:h-full shrink-0 pb-2 border-r dark:border-r-zinc-600;

web/src/pages/DailyReview.tsx

@@ -96,7 +96,7 @@ const DailyReview = () => {
   return (
     <section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
-      <div className="w-full flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
+      <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
         <div className="relative w-full flex flex-row justify-between items-center">
           <p
             className="px-2 py-1 flex flex-row justify-start items-center cursor-pointer select-none rounded opacity-80 hover:bg-gray-100 dark:hover:bg-zinc-700"

web/src/pages/Home.tsx

@@ -7,7 +7,7 @@ import MobileHeader from "@/components/MobileHeader";
 const Home = () => {
   return (
     <div className="w-full flex flex-row justify-start items-start">
-      <div className="grow shrink w-auto max-w-full px-4 lg:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
+      <div className="w-full px-4 lg:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
         <MobileHeader />
         <div className="w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800 rounded-lg">
           <MemoEditor className="mb-2" cacheKey="home-memo-editor" />

web/src/pages/Resources.tsx

@@ -63,9 +63,9 @@ const Resources = () => {
   return (
     <section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
-      <div className="w-full flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
+      <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
         <div className="relative w-full flex flex-row justify-between items-center">
-          <p className="px-2 py-1 flex flex-row justify-start items-center select-none rounded opacity-80">
+          <p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">
             <Icon.Paperclip className="w-5 h-auto mr-1" /> {t("common.resources")}
           </p>
         </div>
@@ -95,7 +95,7 @@ const Resources = () => {
                           {resources.map((resource) => {
                             return (
                               <div key={resource.id} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start">
-                                <div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border dark:border-zinc-900 overflow-clip rounded cursor-pointer hover:shadow hover:opacity-80">
+                                <div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border dark:border-zinc-900 overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80">
                                   <ResourceIcon resource={resource} strokeWidth={0.5} />
                                 </div>
                                 <div className="w-full max-w-full flex flex-row justify-between items-center mt-1 px-1">
@@ -134,7 +134,7 @@ const Resources = () => {
                           {unusedResources.map((resource) => {
                             return (
                               <div key={resource.id} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start">
-                                <div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border dark:border-zinc-900 overflow-clip rounded cursor-pointer hover:shadow hover:opacity-80">
+                                <div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border dark:border-zinc-900 overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80">
                                   <ResourceIcon resource={resource} strokeWidth={0.5} />
                                 </div>
                                 <div className="w-full max-w-full flex flex-row justify-between items-center mt-1 px-1">