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>

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: {},
+};

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>

src/views/components/calendar/CalendarFooter.tsx

@@ -58,13 +58,7 @@ export default function CalendarFooter(): JSX.Element {
                 ))}
             </div>
             <div>
-                <Button
+                <Button variant='minimal' size='small' icon={GearSix} color='ut-black' onClick={handleOpenOptions} />
-                    className='h-fit w-fit !p-0'
-                    variant='minimal'
-                    icon={GearSix}
-                    color='ut-black'
-                    onClick={handleOpenOptions}
-                />
             </div>
         </footer>
     );

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}
                 />
             )}

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='min-w-full w-0 flex flex-col items-center gap-y-spacing-2'>
-            <div className='m0 w-full flex justify-between'>
+            <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}
                 />

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