From 843cb5b4430885527592feee33656dfae50c95c2 Mon Sep 17 00:00:00 2001 From: Ethan Date: Sun, 19 Jan 2025 18:34:20 -0600 Subject: [PATCH] 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/shared/types/Spacing.ts | 12 +++ ....stories.tsx => ResourceLinks.stories.tsx} | 8 +- src/views/components/calendar/Calendar.tsx | 90 ++++++++++++++----- .../components/calendar/CalendarFooter.tsx | 73 ++++++++++----- .../components/calendar/CalendarHeader.tsx | 43 ++++----- .../components/calendar/CalendarSchedules.tsx | 19 ++-- .../components/calendar/ResourceLinks.tsx | 73 +++++++++++++++ src/views/components/common/Divider.tsx | 2 +- src/views/components/common/LogoIcon.tsx | 4 +- .../components/common/ScheduleListItem.tsx | 16 ++-- .../common/ScheduleTotalHoursAndCourses.tsx | 41 +++------ 11 files changed, 267 insertions(+), 114 deletions(-) rename src/stories/components/{ImportantLinks.stories.tsx => ResourceLinks.stories.tsx} (59%) create mode 100644 src/views/components/calendar/ResourceLinks.tsx diff --git a/src/shared/types/Spacing.ts b/src/shared/types/Spacing.ts index ee20deb4..02157262 100644 --- a/src/shared/types/Spacing.ts +++ b/src/shared/types/Spacing.ts @@ -12,3 +12,15 @@ export const spacing = { 'spacing-7': '1.5rem', 'spacing-8': '2rem', } as const; + +type SpacingKey = keyof typeof spacing; + +/** + * Converts a spacing value from rem to pixels + * @param key - The spacing key to convert + * @returns The spacing value in pixels + */ +export function getSpacingInPx(key: SpacingKey): number { + const remValue = parseFloat(spacing[key]); + return remValue * 16; // 1rem = 16px +} diff --git a/src/stories/components/ImportantLinks.stories.tsx b/src/stories/components/ResourceLinks.stories.tsx similarity index 59% rename from src/stories/components/ImportantLinks.stories.tsx rename to src/stories/components/ResourceLinks.stories.tsx index 8ad7ea21..d839a2b6 100644 --- a/src/stories/components/ImportantLinks.stories.tsx +++ b/src/stories/components/ResourceLinks.stories.tsx @@ -1,15 +1,15 @@ import type { Meta, StoryObj } from '@storybook/react'; -import ImportantLinks from '@views/components/calendar/ImportantLinks'; +import ResourceLinks from '@views/components/calendar/ResourceLinks'; const meta = { - title: 'Components/Common/ImportantLinks', - component: ImportantLinks, + title: 'Components/Common/ResourceLinks', + component: ResourceLinks, parameters: { layout: 'centered', }, tags: ['autodocs'], argTypes: {}, -} satisfies Meta; +} satisfies Meta; export default meta; type Story = StoryObj; diff --git a/src/views/components/calendar/Calendar.tsx b/src/views/components/calendar/Calendar.tsx index 65252788..edd8b009 100644 --- a/src/views/components/calendar/Calendar.tsx +++ b/src/views/components/calendar/Calendar.tsx @@ -1,21 +1,28 @@ +import { Sidebar } from '@phosphor-icons/react'; import type { CalendarTabMessages } from '@shared/messages/CalendarMessages'; import type { Course } from '@shared/types/Course'; +import { CRX_PAGES } from '@shared/types/CRXPages'; +import { openReportWindow } from '@shared/util/openReportWindow'; import CalendarBottomBar from '@views/components/calendar/CalendarBottomBar'; import CalendarGrid from '@views/components/calendar/CalendarGrid'; import CalendarHeader from '@views/components/calendar/CalendarHeader'; import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules'; -import ImportantLinks from '@views/components/calendar/ImportantLinks'; +import ResourceLinks from '@views/components/calendar/ResourceLinks'; import Divider from '@views/components/common/Divider'; import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup'; import { CalendarContext } from '@views/contexts/CalendarContext'; import useCourseFromUrl from '@views/hooks/useCourseFromUrl'; import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule'; import { MessageListener } from 'chrome-extension-toolkit'; +import clsx from 'clsx'; import React, { useEffect, useState } from 'react'; -import CalendarFooter from './CalendarFooter'; -import TeamLinks from './TeamLinks'; +import OutwardArrowIcon from '~icons/material-symbols/arrow-outward'; +import { Button } from '../common/Button'; +import { LargeLogo } from '../common/LogoIcon'; +import Text from '../common/Text/Text'; +import CalendarFooter from './CalendarFooter'; /** * Calendar page component */ @@ -54,25 +61,68 @@ export default function Calendar(): JSX.Element { return (
- { - setShowSidebar(!showSidebar); - }} - /> -
- {showSidebar && ( -
-
- - - - - -
- +
+
+
+ +
- )} + + + + +
+
+ { + setShowSidebar(!showSidebar); + }} + />
diff --git a/src/views/components/calendar/CalendarFooter.tsx b/src/views/components/calendar/CalendarFooter.tsx index 44708b31..17141e4a 100644 --- a/src/views/components/calendar/CalendarFooter.tsx +++ b/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>; + 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 => { + 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 ( -