From 5b1109e0ec67b4ea0894513911ba46225e768cb7 Mon Sep 17 00:00:00 2001
From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com>
Date: Sun, 21 Jul 2024 19:45:33 +0800
Subject: [PATCH] refactor: layout style and button (#392)

* feat: add glass shadow style

* refactor: layout style and buttons
---
 components/shared/Header.tsx    | 75 +++++++++++++++++++--------------
 components/shared/Sidebar.tsx   | 62 +++++++++++++++------------
 containers/layout/AppLayout.tsx |  2 +-
 hooks/useRequest.ts             |  2 +-
 pages/index.tsx                 |  5 +--
 tailwind.config.js              | 10 +++++
 6 files changed, 91 insertions(+), 65 deletions(-)

diff --git a/components/shared/Header.tsx b/components/shared/Header.tsx
index a13db383..ef341948 100644
--- a/components/shared/Header.tsx
+++ b/components/shared/Header.tsx
@@ -1,67 +1,78 @@
 import { useState } from "react";
+import type { IconNameV2 } from "@/components/shared/Icon/v2/icons";
+import Icon from "@/components/shared/Icon";
+import IconV2 from "@/components/shared/Icon/v2";
+import Button from "@/components/shared/Button";
+import Badge from "@/components/shared/Badge";
+import UserInfoModal from "@/components/lobby/UserInfoModal";
 import { cn } from "@/lib/utils";
-import useAuth from "@/hooks/context/useAuth";
-import useUser from "@/hooks/useUser";
-import UserInfoModal from "../lobby/UserInfoModal";
-import Button from "./Button";
-import Badge from "./Badge";
-import Icon from "./Icon";
-import type { IconName } from "./Icon/icons";
 
 enum HeaderActions {
-  HELP = "HELP",
-  REMIND = "REMIND",
+  CHAT = "CHAT",
+  NOTIFICATION = "NOTIFICATION",
   PROFILE = "PROFILE",
 }
 
-export default function Header() {
-  const { currentUser } = useAuth();
-  const { logout } = useUser();
+interface ButtonProps {
+  type: HeaderActions;
+  iconName: IconNameV2;
+  isActive: boolean;
+  onClick: () => void;
+}
 
+export default function Header() {
   const [openProfile, setOpenProfile] = useState(false);
 
-  const buttons = [
+  const buttons: ButtonProps[] = [
+    {
+      iconName: "chatDefault",
+      type: HeaderActions.CHAT,
+      isActive: false,
+      onClick: () => {},
+    },
+    {
+      iconName: "notificationDefault",
+      type: HeaderActions.NOTIFICATION,
+      isActive: false,
+      onClick: () => {},
+    },
     {
-      Icon: "player" as IconName,
+      iconName: "player",
       type: HeaderActions.PROFILE,
-      click: () => {
+      isActive: openProfile,
+      onClick: () => {
         setOpenProfile(true);
       },
-      active: openProfile,
     },
   ];
 
   return (
-    <header className="flex flex-row items-center justify-between p-[10px_15px] bg-dark1E">
+    <header className="flex flex-row items-center justify-between px-8 py-2 bg-white/8 glass-shadow">
       <div className="flex items-center gap-3">
         <Icon name="logo" className="bg-transparent" />
+        <h2 className="text-primary-100 text-2xl">遊戲微服務大平台</h2>
       </div>
-      <div className="header___actions flex gap-6">
-        {buttons.map((ButtonProps) => (
+      <div className="header___actions flex gap-5">
+        {buttons.map(({ type, iconName, isActive, onClick }) => (
           <Badge
             dot
-            key={ButtonProps.type}
+            key={type}
             placement="top-right"
-            count={ButtonProps.type !== HeaderActions.HELP ? 1 : 0}
-            size="xLarge"
-            className={cn("top-1 right-1", {
-              "right-2": ButtonProps.type === HeaderActions.REMIND,
-            })}
+            className={cn("top-1 right-1")}
           >
             <Button
-              className="relative bg-transparent hover:shadow-none p-0"
-              onClick={ButtonProps.click}
+              className="relative bg-transparent hover:shadow-none p-2.5"
+              onClick={onClick}
             >
-              <Icon
-                name={ButtonProps.Icon}
-                className={cn("[&_*]:stroke-white", {
-                  "fill-blue": ButtonProps.active,
+              <IconV2
+                name={iconName}
+                className={cn("w-5 h-5 [&_*]:stroke-white", {
+                  "fill-blue": isActive,
                 })}
               />
             </Button>
           </Badge>
         ))}
-        {currentUser && <Button onClick={logout}>登出</Button>}
       </div>
       {openProfile && (
         <UserInfoModal
diff --git a/components/shared/Sidebar.tsx b/components/shared/Sidebar.tsx
index b1c0dfb7..477852e5 100644
--- a/components/shared/Sidebar.tsx
+++ b/components/shared/Sidebar.tsx
@@ -1,31 +1,36 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { cn } from "@/lib/utils";
 
-import Button from "./Button";
-import Icon from "@/components/shared/Icon";
-import type { IconName } from "./Icon/icons";
+import type { IconNameV2 } from "@/components/shared/Icon/v2/icons";
+import Icon from "@/components/shared/Icon/v2";
+import Button from "@/components/shared/Button";
+import useAuth from "@/hooks/context/useAuth";
+import useUser from "@/hooks/useUser";
+import { cn } from "@/lib/utils";
 
 enum SidebarRoutes {
   HOME = "/",
   ROOMS = "/rooms",
 }
 
+interface ButtonProps {
+  text: string;
+  iconName: IconNameV2;
+  route: SidebarRoutes;
+}
+
 export default function Sidebar() {
-  const router = useRouter();
-  const { pathname } = router;
+  const { pathname } = useRouter();
+  const { currentUser } = useAuth();
+  const { logout } = useUser();
 
-  const buttons: {
-    text: string;
-    iconName: IconName;
-    route: SidebarRoutes;
-  }[] = [
+  const buttons: ButtonProps[] = [
     { text: "遊戲大廳", iconName: "home", route: SidebarRoutes.HOME },
     { text: "遊戲房間", iconName: "arcade", route: SidebarRoutes.ROOMS },
   ];
 
   return (
-    <nav className="flex flex-col shrink-0 justify-start bg-dark29 rounded-[10px] w-[71px] gap-5">
+    <nav className="flex flex-col shrink-0 justify-start bg-white/8 glass-shadow my-6 ms-1.5 py-6 rounded-2xl w-18 gap-5">
       {buttons.map((ButtonProps) => (
         <Link
           href={ButtonProps.route}
@@ -33,25 +38,28 @@ export default function Sidebar() {
           className="flex justify-center items-center"
         >
           <Button
-            className={cn(
-              "bg-transparent px-0 justify-center opacity-[0.3] hover:shadow-none hover:opacity-100",
-              {
-                "opacity-1": pathname === ButtonProps.route,
-              }
-            )}
+            className={cn("bg-transparent p-3 rounded-full hover:shadow-none", {
+              "bg-primary-200/20": pathname === ButtonProps.route,
+            })}
           >
-            <div className="w-full flex flex-col items-center gap-1">
-              <Icon
-                name={ButtonProps.iconName}
-                className={{
-                  "[&_*]:stroke-[#2F88FF]": pathname === ButtonProps.route,
-                }}
-              />
-              <span className={cn("text-xs")}>{ButtonProps.text}</span>
-            </div>
+            <Icon
+              name={ButtonProps.iconName}
+              className={cn("w-6 h-6 stroke-primary-400", {
+                "stroke-primary-200": pathname === ButtonProps.route,
+              })}
+            />
           </Button>
         </Link>
       ))}
+      {currentUser && (
+        <Button
+          className="mt-auto bg-transparent px-0 justify-center opacity-[0.3] hover:shadow-none hover:opacity-100"
+          onClick={logout}
+        >
+          <Icon className="stroke-primary-400" name="logOut" />
+          <span className="text-xs">登出</span>
+        </Button>
+      )}
     </nav>
   );
 }
diff --git a/containers/layout/AppLayout.tsx b/containers/layout/AppLayout.tsx
index 3aef4a5a..af19e560 100644
--- a/containers/layout/AppLayout.tsx
+++ b/containers/layout/AppLayout.tsx
@@ -9,7 +9,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <Header />
       <div className="container__ flex flex-grow gap-5">
         <Sidebar />
-        <main className="flex-grow w-full h-full">{children}</main>
+        <main className="flex-grow">{children}</main>
       </div>
       <Footer />
     </div>
diff --git a/hooks/useRequest.ts b/hooks/useRequest.ts
index b6df2ba1..00adcc78 100644
--- a/hooks/useRequest.ts
+++ b/hooks/useRequest.ts
@@ -36,7 +36,7 @@ const useRequest = () => {
           toast: {
             show: true,
             options: {
-              position: "bottom-left",
+              position: "bottom-right",
             },
           },
         }
diff --git a/pages/index.tsx b/pages/index.tsx
index 64f83cb5..043cbfa3 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -13,10 +13,7 @@ export default function Home() {
   return (
     <>
       <h1 className="text-white">遊戲大廳！</h1>
-      <div
-        className="px-[18px] mt-[12px] mb-[22px]"
-        style={{ width: "calc(100vw - 71px)" }}
-      >
+      <div className="px-[18px] mt-[12px] mb-[22px] w-[calc(100vw-100px)]">
         <Carousel
           itemWidth={332}
           itemHeight={158}
diff --git a/tailwind.config.js b/tailwind.config.js
index 39f17db7..30dd5f66 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,9 @@ module.exports = {
       body: ['"Noto Sans TC"', "Roboto"],
     },
     extend: {
+      width: {
+        18: "4.5rem" /** 72px */,
+      },
       opacity: {
         4: 0.04,
         8: 0.08,
@@ -128,6 +131,13 @@ module.exports = {
           "background-image":
             "linear-gradient(145.51deg, #06020B -7.4%, #2C1B47 154.79%)",
         },
+        ".glass-shadow": {
+          "box-shadow": `
+            0 8px 6px rgba(0, 0, 0, 0.05),
+            0 1px 1px rgba(255, 255, 255, 0.25),
+            0 -1px 1px rgba(255, 255, 255, 0.1)
+          `,
+        },
       });
     }),
     plugin(({ addUtilities }) => {