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
71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
import clsx from 'clsx';
|
|
import type { SVGProps } from 'react';
|
|
import React from 'react';
|
|
|
|
interface LogoIconProps {
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Renders the logo icon.
|
|
*
|
|
* @param props - The SVG props.
|
|
* @returns The rendered logo icon.
|
|
*/
|
|
export function LogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
|
|
return (
|
|
<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
|
|
<circle cx='20' cy='20' r='20' fill='#BF5700' />
|
|
<circle cx='20' cy='20' r='15.5' stroke='white' strokeWidth='3' />
|
|
<rect x='18' y='10' width='4' height='19.5489' fill='white' />
|
|
<rect x='10' y='22' width='4' height='19.5489' transform='rotate(-90 10 22)' fill='white' />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Renders the small logo.
|
|
*
|
|
* @param className - The class name for the logo container.
|
|
* @returns The rendered small logo.
|
|
*/
|
|
export function SmallLogo({ className }: LogoIconProps): JSX.Element {
|
|
return (
|
|
<div className={clsx('flex items-center gap-2', className)}>
|
|
<LogoIcon />
|
|
<div className='mt-1 flex flex-col text-lg font-medium leading-[1em]'>
|
|
<p className='text-nowrap text-ut-burntorange'>UT Registration</p>
|
|
<p className='text-ut-burntorange'>
|
|
Plus{' '}
|
|
<span className='text-xs'>
|
|
{import.meta.env.VITE_BETA_BUILD ? `(${import.meta.env.VITE_PACKAGE_VERSION})` : ''}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Renders the large logo.
|
|
*
|
|
* @param className - The class name for the logo container.
|
|
* @returns The rendered large logo.
|
|
*/
|
|
export function LargeLogo({ className }: LogoIconProps): JSX.Element {
|
|
return (
|
|
<div className={clsx('flex items-center gap-spacing-3', className)}>
|
|
<LogoIcon className='h-12 w-12' />
|
|
<div className='mt-1 flex flex-col text-[1.35rem] font-medium leading-[1em] screenshot:flex'>
|
|
<p className='text-nowrap text-ut-burntorange'>UT Registration</p>
|
|
<p className='text-ut-burntorange'>
|
|
Plus{' '}
|
|
<span className='text-sm'>
|
|
{import.meta.env.VITE_BETA_BUILD ? `(${import.meta.env.VITE_PACKAGE_VERSION})` : ''}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|