feat(ui): calendar sidebar redesign (#464)

* feat: update calendar sidebar, footer, and header with Figma design

* chore: run lint

* feat: update header with Figma design

* chore: run lint

* chore: remove unused vars

* chore: fix types

* fix: adjust sidebar minimum width

* fix: update LogoIcon layout to ensure text is always displayed

* feat: add spacing constants

* fix: add sidebar styling with spacing system and sticky header

* fix: update spacing constants to use rem units

* refactor: replace padding with spacing system and colors with UTRP theme

* refactor: rename ImportantLinks to ResourceLinks

* refactor: simplify CalendarHeader button component by using icon prop

* feat: add sidebar open and close transition

* refactor: rename unused var

* fix: update social icon color

* feat: improve layout and spacing in calendar components

* refactor: remove unused GearSix icon and options handler

* feat: update calendar components with new icons and improved spacing

* fix: correct class name

* refactor: organize social links into array and update link styling

* refactor: remove unused import

* fix: adjust gap spacing in radio button

* fix: update divider component to use theme offwhite1

* fix: increase size of outward arrow icon

* feat: add getSpacingInPx function to convert rem to pixels

* fix: update gap spacing in CalendarSchedules component to use spacing system

* fix: rollback footer social icons to original icons

* fix: update Calendar styles to use theme offwhite1 and adjust padding to account for scrollbar

* fix: update LargeLogo component to use gap-spacing-3

* fix: update button variants to 'minimal' and adjust styles for consistency

* fix: adjust padding in Calendar component for better layout consistency

* fix: increase size of arrow icon

* fix: add shrink-0 to radio buttons

src/views/components/calendar/CalendarFooter.tsx

@@ -1,3 +1,5 @@
+import { GearSix } from '@phosphor-icons/react';
+import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
 import React from 'react';
 
 import DiscordIcon from '~icons/bi/discord';
@@ -5,36 +7,65 @@ import GithubIcon from '~icons/ri/github-fill';
 import InstagramIcon from '~icons/ri/instagram-line';
 import LinkedinIcon from '~icons/ri/linkedin-box-fill';
 
+import { Button } from '../common/Button';
 import Link from '../common/Link';
 
+interface SocialLink {
+    icon: React.FC<React.SVGProps<SVGSVGElement>>;
+    url: string;
+}
+
+const socialLinks: SocialLink[] = [
+    {
+        icon: InstagramIcon,
+        url: 'https://www.instagram.com/longhorndevelopers',
+    },
+    {
+        icon: DiscordIcon,
+        url: 'https://discord.gg/7pQDBGdmb7',
+    },
+    {
+        icon: GithubIcon,
+        url: 'https://github.com/Longhorn-Developers',
+    },
+    {
+        icon: LinkedinIcon,
+        url: 'https://www.linkedin.com/company/longhorn-developers/posts/?feedView=all',
+    },
+];
+
+/**
+ * Opens the options page in a new tab.
+ * @returns A promise that resolves when the options page is opened.
+ */
+const handleOpenOptions = async (): Promise<void> => {
+    const url = chrome.runtime.getURL('/options.html');
+    await openTabFromContentScript(url);
+};
+
 /**
  * The footer section of the calendar's sidebar
  * @returns
  */
 export default function CalendarFooter(): JSX.Element {
     return (
-        <footer className='min-w-full w-0 pl-4.5 space-y-2'>
-            <div className='flex gap-2'>
-                <Link className='linkanimate' href='https://www.instagram.com/longhorndevelopers'>
-                    <InstagramIcon className='h-6 w-6' />
-                </Link>
-                <Link className='linkanimate' href='https://discord.gg/7pQDBGdmb7'>
-                    <DiscordIcon className='h-6 w-6' />
-                </Link>
-                <Link className='linkanimate' href='https://github.com/Longhorn-Developers'>
-                    <GithubIcon className='h-6 w-6' />
-                </Link>
-                <Link
-                    className='linkanimate'
-                    href='https://www.linkedin.com/company/longhorn-developers/posts/?feedView=all'
-                >
-                    <LinkedinIcon className='h-6 w-6 -mx-0.75' />
-                </Link>
+        <footer className='min-w-full w-0 flex items-center justify-between bg-white px-spacing-8 pt-spacing-4'>
+            <div className='flex gap-spacing-5'>
+                {socialLinks.map(({ icon: Icon, url }) => (
+                    <Link className='linkanimate' href={url}>
+                        <Icon className='h-6 w-6' />
+                    </Link>
+                ))}
+            </div>
+            <div>
+                <Button
+                    className='h-fit w-fit !p-0'
+                    variant='minimal'
+                    icon={GearSix}
+                    color='ut-black'
+                    onClick={handleOpenOptions}
+                />
             </div>
-            <p className='text-2.5 text-ut-gray font-light tracking-wide'>
-                UT Registration Plus is a project under Longhorn Developers, a student-led organization aimed at
-                addressing issues at UT Austin.
-            </p>
         </footer>
     );
 }