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
2025-01-19 18:34:20 -06:00
parent 52347fd56d
commit 843cb5b443
11 changed files with 267 additions and 114 deletions
--- a/src/views/components/calendar/ResourceLinks.tsx
+++ b/src/views/components/calendar/ResourceLinks.tsx
@@ -0,0 +1,73 @@
+import Text from '@views/components/common/Text/Text';
+import clsx from 'clsx';
+import React from 'react';
+
+import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
+
+type Props = {
+    className?: string;
+};
+
+interface LinkItem {
+    text: string;
+    url: string;
+}
+
+const links: LinkItem[] = [
+    {
+        text: "Spring '25 Course Schedule",
+        url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20252/',
+    },
+    {
+        text: 'Course Schedule Archives',
+        url: 'https://registrar.utexas.edu/schedules/archive',
+    },
+    {
+        text: 'My Degree Audit (IDA)',
+        url: 'https://utdirect.utexas.edu/apps/degree/audits/',
+    },
+    // {
+    //     text: "Summer '24 Course Schedule",
+    //     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20246/',
+    // },
+    // {
+    //     text: "'24-'25 Academic Calendar",
+    //     url: 'https://registrar.utexas.edu/calendars/24-25',
+    // },
+    {
+        text: 'Registration Info Sheet (RIS)',
+        url: 'https://utdirect.utexas.edu/registrar/ris.WBX',
+    },
+    {
+        text: 'Register for Courses',
+        url: 'https://utdirect.utexas.edu/registration/chooseSemester.WBX',
+    },
+];
+
+/**
+ * The "Resources" section of the calendar website
+ * @returns
+ */
+export default function ResourceLinks({ className }: Props): JSX.Element {
+    return (
+        <article className={clsx(className, 'flex flex-col gap-spacing-3')}>
+            <Text className='text-theme-black uppercase' variant='h3'>
+                RESOURCES
+            </Text>
+            <div className='flex flex-col gap-spacing-3'>
+                {links.map(link => (
+                    <a
+                        key={link.text}
+                        href={link.url}
+                        className='flex items-center gap-spacing-2 text-ut-burntorange underline-offset-2 hover:underline'
+                        target='_blank'
+                        rel='noreferrer'
+                    >
+                        <Text variant='p'>{link.text}</Text>
+                        <OutwardArrowIcon className='h-4 w-4' />
+                    </a>
+                ))}
+            </div>
+        </article>
+    );
+}