From 90c238025088ccca65d7a18f2e449e54386bbb88 Mon Sep 17 00:00:00 2001
From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com>
Date: Fri, 24 Jan 2025 22:10:20 +0800
Subject: [PATCH 1/5] fix: button cannot appear as a descendant of button

---
 layout/ManageLayout.tsx       |  4 ++--
 shared/components/Sidebar.tsx | 30 ++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/layout/ManageLayout.tsx b/layout/ManageLayout.tsx
index 81421239..a3318dd0 100644
--- a/layout/ManageLayout.tsx
+++ b/layout/ManageLayout.tsx
@@ -29,11 +29,11 @@ export default function ManageLayout({ children }: React.PropsWithChildren) {
                 個人名片
               </Sidebar.Link>
               <Collapse>
-                <Sidebar.Button className="w-full p-0">
+                <Sidebar.Item>
                   <Collapse.Toggle className="w-full px-10 py-2" withIcon>
                     百寶箱
                   </Collapse.Toggle>
-                </Sidebar.Button>
+                </Sidebar.Item>
                 <Collapse.List className="*:my-2 *:aria-hidden:my-0">
                   <Collapse.Item>
                     <Sidebar.Link
diff --git a/shared/components/Sidebar.tsx b/shared/components/Sidebar.tsx
index c96cca0f..65d1ca68 100644
--- a/shared/components/Sidebar.tsx
+++ b/shared/components/Sidebar.tsx
@@ -92,7 +92,37 @@ function SidebarLink({
   );
 }
 
+interface SidebarItemProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  isActive?: boolean;
+  isDisabled?: boolean;
+}
+
+function SidebarItem({
+  children,
+  className,
+  isActive,
+  isDisabled,
+  ...props
+}: SidebarItemProps) {
+  return (
+    <div
+      className={cn(
+        defaultClass,
+        isActive && activeClass,
+        isDisabled && disableClass,
+        "w-full p-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
 Sidebar.Button = SidebarButton;
 Sidebar.Link = SidebarLink;
+Sidebar.Item = SidebarItem;
 
 export default Sidebar;

From e541470662ba24f7a69ed2bb269f13eb8f20c83c Mon Sep 17 00:00:00 2001
From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com>
Date: Fri, 24 Jan 2025 22:16:44 +0800
Subject: [PATCH 2/5] fix: prevent icon from intercepting button click events

---
 pages/manage/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/manage/index.tsx b/pages/manage/index.tsx
index 2c36f8b0..a5aa8e93 100644
--- a/pages/manage/index.tsx
+++ b/pages/manage/index.tsx
@@ -72,7 +72,7 @@ const Calendar = ({ date, onChange }: CalendarProps) => {
           className="p-0 flex items-center gap-3"
           onClick={() => setIsOpen(!isOpen)}
         >
-          <PiCalendarBlankBold className="size-5" />
+          <PiCalendarBlankBold className="size-5 pointer-events-none" />
           <div className="heading-sm text-basic-500">
             {date?.format('YYYY/MM/DD')}（{date?.format('dd')}）任務
           </div>

From edbf0b6d0d427a65ad2da56984c27c74d065d890 Mon Sep 17 00:00:00 2001
From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com>
Date: Sat, 25 Jan 2025 14:32:17 +0800
Subject: [PATCH 3/5] feat(shared): add button animation for UX

---
 shared/components/Button.tsx | 36 ++++++++++++++++++++++++++++++++++++
 tailwind.config.js           | 15 +++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/shared/components/Button.tsx b/shared/components/Button.tsx
index 592a0479..c3654d7a 100644
--- a/shared/components/Button.tsx
+++ b/shared/components/Button.tsx
@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import { cn } from '@/utils/cn';
 
 export enum ButtonColorEnum {
@@ -16,6 +17,11 @@ export enum ButtonSizeEnum {
   Medium = 'md',
 }
 
+export enum ButtonAnimationEnum {
+  Ripple = 'ripple',
+  None = 'none',
+}
+
 export interface ButtonProps
   extends Omit<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -24,6 +30,7 @@ export interface ButtonProps
   variant?: ButtonVariantEnum | `${ButtonVariantEnum}`;
   color?: ButtonColorEnum | `${ButtonColorEnum}`;
   size?: ButtonSizeEnum | `${ButtonSizeEnum}`;
+  animation?: ButtonAnimationEnum | `${ButtonAnimationEnum}`;
   isDisabled?: boolean;
   isSubmit?: boolean;
 }
@@ -34,14 +41,39 @@ function Button({
   variant,
   color = ButtonColorEnum.Primary,
   size = ButtonSizeEnum.Medium,
+  animation = ButtonAnimationEnum.Ripple,
   isDisabled = false,
   isSubmit = false,
+  onClick,
   ...props
 }: ButtonProps) {
+  const rippleRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (animation === ButtonAnimationEnum.None) {
+      onClick?.(e);
+      return;
+    }
+    const rect = e.currentTarget.getBoundingClientRect();
+    const ripple = document.createElement('span');
+    onClick?.(e);
+    ripple.className = cn(
+      'absolute size-10 rounded-full bg-basic-black/10 animate-button-ripple',
+      variant === ButtonVariantEnum.Solid &&
+        color !== ButtonColorEnum.White &&
+        'bg-basic-white/40'
+    );
+    ripple.style.top = `${((e.clientY - rect.top) / rect.height) * 100}%`;
+    ripple.style.left = `${((e.clientX - rect.left) / rect.width) * 100}%`;
+    rippleRef.current?.appendChild(ripple);
+    setTimeout(() => ripple.remove(), 1000);
+  };
+
   return (
     <button
       type={isSubmit ? 'submit' : 'button'}
       className={cn(
+        'relative overflow-hidden rounded-md',
         variant === ButtonVariantEnum.Solid && [
           'rounded-full transition-[box-shadow,color,background-color]',
           color === ButtonColorEnum.Primary &&
@@ -64,9 +96,13 @@ function Button({
         className
       )}
       disabled={isDisabled}
+      onClick={handleClick}
       {...props}
     >
       {children}
+      {animation !== ButtonAnimationEnum.None && (
+        <div ref={rippleRef} className="absolute inset-0 pointer-events-none" />
+      )}
     </button>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 578908e8..dce97b30 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -150,6 +150,21 @@ module.exports = {
             },
           },
         },
+        [`.animate-button-ripple`]: {
+          animation:
+            'button-ripple var(--animation-duration, 500ms) var(--animation-delay, 0ms) forwards cubic-bezier(0, 0, 0.2, 1)',
+          '@keyframes button-ripple': {
+            '0%': { transform: 'translate(-50%, -50%) scale(0)', opacity: 1 },
+            '75%': {
+              transform: 'translate(-50%, -50%) scale(4)',
+              opacity: 0.2,
+            },
+            '100%': {
+              transform: 'translate(-50%, -50%) scale(6)',
+              opacity: 0,
+            },
+          },
+        },
       });
       addUtilities({
         [`.animate-slide-x-in`]: {

From 04e4864e41d38662db9a245df83e14227e9126e2 Mon Sep 17 00:00:00 2001
From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com>
Date: Sat, 25 Jan 2025 14:32:47 +0800
Subject: [PATCH 4/5] feat(manage): add button padding for UX

---
 pages/manage/index.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/pages/manage/index.tsx b/pages/manage/index.tsx
index a5aa8e93..90bdd911 100644
--- a/pages/manage/index.tsx
+++ b/pages/manage/index.tsx
@@ -67,9 +67,9 @@ const Calendar = ({ date, onChange }: CalendarProps) => {
 
   return (
     <div ref={ref} className="relative">
-      <div className="mb-6 px-4 py-3.5 flex items-center justify-between bg-white rounded-xl shadow-lg shadow-basic-200/40">
+      <div className="mb-6 pl-1 pr-3 py-2 flex items-center justify-between bg-white rounded-xl shadow-lg shadow-basic-200/40">
         <Button
-          className="p-0 flex items-center gap-3"
+          className="px-3 py-2.5 flex items-center gap-3"
           onClick={() => setIsOpen(!isOpen)}
         >
           <PiCalendarBlankBold className="size-5 pointer-events-none" />
@@ -77,19 +77,19 @@ const Calendar = ({ date, onChange }: CalendarProps) => {
             {date?.format('YYYY/MM/DD')}（{date?.format('dd')}）任務
           </div>
         </Button>
-        <div className="flex items-center gap-2.5">
-          <Button className="p-0 body-lg text-basic-400" onClick={handleToday}>
+        <div className="flex items-center gap-0.5">
+          <Button className="px-1 py-2 body-lg text-basic-400" onClick={handleToday}>
             今日
           </Button>
           <Button
-            className="p-0"
+            className="p-1"
             isDisabled={date.isBefore(MIN_DATE) || date.isSame(MIN_DATE, 'day')}
             onClick={() => onChange(date.subtract(1, 'day'))}
           >
             <CiCircleChevLeft className="size-8 text-basic-400" />
           </Button>
           <Button
-            className="p-0"
+            className="p-1"
             isDisabled={date.isAfter(MAX_DATE) || date.isSame(MAX_DATE, 'day')}
             onClick={() => onChange(date.add(1, 'day'))}
           >

From c19924d6c4993328e654cf9fc851778b485601ee Mon Sep 17 00:00:00 2001
From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com>
Date: Sat, 25 Jan 2025 14:35:44 +0800
Subject: [PATCH 5/5] feat(layout): refactor main element padding to use
 tailwind classes

---
 layout/DefaultLayout.tsx | 9 ++-------
 tailwind.config.js       | 7 ++++---
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/layout/DefaultLayout.tsx b/layout/DefaultLayout.tsx
index 51e26711..05152656 100644
--- a/layout/DefaultLayout.tsx
+++ b/layout/DefaultLayout.tsx
@@ -9,7 +9,7 @@ import {
 
 function DefaultLayoutContent({ children }: React.PropsWithChildren) {
   const headerRef = useRef<HTMLDivElement>(null);
-  const { height, showPromotionBar, setHeight } = usePromotion();
+  const { showPromotionBar, setHeight } = usePromotion();
   const prevShowPromotionBar = useRef<boolean | null>(null);
 
   useEffect(() => {
@@ -41,12 +41,7 @@ function DefaultLayoutContent({ children }: React.PropsWithChildren) {
       <Header ref={headerRef}>
         <PromotionBar />
       </Header>
-      <main
-        className="min-h-screen-with-padding-top"
-        style={{ paddingTop: `${height}px` }}
-      >
-        {children}
-      </main>
+      <main className="min-h-screen-with-padding-top">{children}</main>
     </>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index dce97b30..d13ed08b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -189,9 +189,10 @@ module.exports = {
       });
       addUtilities({
         ['.min-h-screen-with-padding-top']: {
-          minHeight: 'calc(100vh - var(--padding-top, 0px))'
-        }
-      })
+          paddingTop: 'var(--padding-top, 0px)',
+          minHeight: 'calc(100vh - var(--padding-top, 0px))',
+        },
+      });
     }),
   ],
 };