From dd8187d6da9847178c60ec7e5c2f15635f0d8e40 Mon Sep 17 00:00:00 2001
From: Aaron Park <aaronj.park0304@gmail.com>
Date: Thu, 20 Nov 2025 13:40:17 -0600
Subject: [PATCH] style: UTRP-14: Add a bigger "hitbox" to calendar sidebar
 buttons (#563)

* fix(sidebar): increase sidebar button hitbox

* chore(ui): change hitbox area for plus button

* chore(ui): update size of hitbox area

* fix: fix pnpm version conflict

* fix: pnpm version conflict

* chore(ui): update size of hitbox area for the social links

* feat: calendar footer story

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
Co-authored-by: Samuel Gunter <29130894+Samathingamajig@users.noreply.github.com>
Co-authored-by: Derek <derex1987@gmail.com>
---
 .../components/CalendarFooter.stories.tsx     | 19 +++++++++++++++++++
 src/views/components/calendar/Calendar.tsx    |  3 ++-
 .../components/calendar/CalendarFooter.tsx    |  8 +-------
 .../CalendarHeader/CalendarHeader.tsx         |  3 ++-
 .../components/calendar/CalendarSchedules.tsx |  7 ++++---
 src/views/components/common/Link.tsx          |  2 +-
 6 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 src/stories/components/CalendarFooter.stories.tsx

diff --git a/src/stories/components/CalendarFooter.stories.tsx b/src/stories/components/CalendarFooter.stories.tsx
new file mode 100644
index 00000000..1a126a4f
--- /dev/null
+++ b/src/stories/components/CalendarFooter.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CalendarFooter from '@views/components/calendar/CalendarFooter';
+import React from 'react';
+
+const meta = {
+    title: 'Components/Calendar/CalendarFooter',
+    component: CalendarFooter,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof CalendarFooter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};
diff --git a/src/views/components/calendar/Calendar.tsx b/src/views/components/calendar/Calendar.tsx
index 0c26f21c..1998eccb 100644
--- a/src/views/components/calendar/Calendar.tsx
+++ b/src/views/components/calendar/Calendar.tsx
@@ -114,11 +114,12 @@ export default function Calendar(): ReactNode {
                             <LargeLogo />
                             <Button
                                 variant='minimal'
+                                size='small'
                                 color='theme-black'
                                 onClick={() => {
                                     setShowSidebar(!showSidebar);
                                 }}
-                                className='h-fit screenshot:hidden !p-0'
+                                className='screenshot:hidden'
                                 icon={Sidebar}
                             />
                         </div>
diff --git a/src/views/components/calendar/CalendarFooter.tsx b/src/views/components/calendar/CalendarFooter.tsx
index 17141e4a..59fc0fc0 100644
--- a/src/views/components/calendar/CalendarFooter.tsx
+++ b/src/views/components/calendar/CalendarFooter.tsx
@@ -58,13 +58,7 @@ export default function CalendarFooter(): JSX.Element {
                 ))}
             </div>
             <div>
-                <Button
-                    className='h-fit w-fit !p-0'
-                    variant='minimal'
-                    icon={GearSix}
-                    color='ut-black'
-                    onClick={handleOpenOptions}
-                />
+                <Button variant='minimal' size='small' icon={GearSix} color='ut-black' onClick={handleOpenOptions} />
             </div>
         </footer>
     );
diff --git a/src/views/components/calendar/CalendarHeader/CalendarHeader.tsx b/src/views/components/calendar/CalendarHeader/CalendarHeader.tsx
index 9969f8f6..78ed0a2f 100644
--- a/src/views/components/calendar/CalendarHeader/CalendarHeader.tsx
+++ b/src/views/components/calendar/CalendarHeader/CalendarHeader.tsx
@@ -33,9 +33,10 @@ export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: Calenda
             {!sidebarOpen && (
                 <Button
                     variant='minimal'
+                    size='small'
                     color='theme-black'
                     onClick={onSidebarToggle}
-                    className='h-fit w-fit screenshot:hidden !p-0'
+                    className='screenshot:hidden'
                     icon={Sidebar}
                 />
             )}
diff --git a/src/views/components/calendar/CalendarSchedules.tsx b/src/views/components/calendar/CalendarSchedules.tsx
index 5e603244..d7e10ab5 100644
--- a/src/views/components/calendar/CalendarSchedules.tsx
+++ b/src/views/components/calendar/CalendarSchedules.tsx
@@ -26,15 +26,16 @@ export function CalendarSchedules() {
     };
 
     return (
-        <div className='min-w-full w-0 flex flex-col items-center gap-y-spacing-3'>
-            <div className='m0 w-full flex justify-between'>
+        <div className='min-w-full w-0 flex flex-col items-center gap-y-spacing-2'>
+            <div className='m0 w-full flex justify-between items-center'>
                 <Text variant='h3' className='text-nowrap text-theme-black'>
                     MY SCHEDULES
                 </Text>
                 <Button
                     variant='minimal'
+                    size='small'
                     color='theme-black'
-                    className='h-fit w-fit !p-0 btn'
+                    className='!p-0 btn'
                     onClick={handleAddSchedule}
                     icon={Plus}
                 />
diff --git a/src/views/components/common/Link.tsx b/src/views/components/common/Link.tsx
index 46c71c93..dc9d401f 100644
--- a/src/views/components/common/Link.tsx
+++ b/src/views/components/common/Link.tsx
@@ -34,7 +34,7 @@ export default function Link(props: PropsWithChildren<Props>): JSX.Element {
             tabIndex={isDisabled ? -1 : 0}
             className={clsx(
                 {
-                    'underline cursor-pointer': !isDisabled,
+                    'underline cursor-pointer p-2': !isDisabled,
                     'cursor-not-allowed color-ut-gray': isDisabled,
                 },
                 className