843cb5b443
* 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
72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { GearSix } from '@phosphor-icons/react';
|
|
import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
|
|
import React from 'react';
|
|
|
|
import DiscordIcon from '~icons/bi/discord';
|
|
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 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>
|
|
</footer>
|
|
);
|
|
}
|