feat: match calendar designs & add functionality (#176)

* feat: match calendar designs

* refactor: update breakpoints
This commit is contained in:
Razboy20
2024-03-18 10:06:23 -05:00
committed by GitHub
parent dc77cc27da
commit 8027c3d1bf
14 changed files with 132 additions and 61 deletions

View File

@@ -1,3 +1,4 @@
import clsx from 'clsx';
import type { SVGProps } from 'react';
import React from 'react';
@@ -12,24 +13,24 @@ export function LogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
);
}
export function SmallLogo(): JSX.Element {
export function SmallLogo({ className }: { className?: string }): JSX.Element {
return (
<div className='flex items-center gap-2'>
<div className={clsx('flex items-center gap-2', className)}>
<LogoIcon />
<div className='flex flex-col text-lg font-medium leading-[1em]'>
<p className='text-ut-burntorange'>UT Registration</p>
<p className='text-nowrap text-ut-burntorange'>UT Registration</p>
<p className='text-ut-orange'>Plus</p>
</div>
</div>
);
}
export function LargeLogo(): JSX.Element {
export function LargeLogo({ className }: { className?: string }): JSX.Element {
return (
<div className='flex items-center gap-2'>
<div className={clsx('flex items-center gap-2', className)}>
<LogoIcon className='h-12 w-12' />
<div className='flex flex-col text-[1.35rem] font-medium leading-[1em]'>
<p className='text-ut-burntorange'>UT Registration</p>
<div className='hidden flex-col text-[1.35rem] font-medium leading-[1em] md:flex'>
<p className='text-nowrap text-ut-burntorange'>UT Registration</p>
<p className='text-ut-orange'>Plus</p>
</div>
</div>

View File

@@ -21,13 +21,13 @@ export default function ScheduleTotalHoursAndCourses({
totalCourses,
}: ScheduleTotalHoursAndCoursesProps): JSX.Element {
return (
<div className='min-w-64 flex items-center gap-2.5 whitespace-nowrap'>
<Text className='text-ut-burntorange uppercase' variant='h1' as='span'>
<div className='min-w-full w-0 flex items-center gap-2.5 whitespace-nowrap'>
<Text className='truncate text-ut-burntorange uppercase' variant='h1' as='span'>
{`${scheduleName}: `}
</Text>
<Text variant='h3' as='div' className='flex flex-row items-center gap-2 text-theme-black'>
{totalHours} {totalHours === 1 ? 'Hour' : 'Hours'}
<Text variant='h4' as='span' className='text-ut-black capitalize'>
<Text variant='h4' as='span' className='hidden text-ut-black capitalize sm:inline'>
{totalCourses} {totalCourses === 1 ? 'Course' : 'Courses'}
</Text>
</Text>