Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: alignment on calendar and header #109

Merged
merged 5 commits into from
Feb 26, 2024
Merged

feat: alignment on calendar and header #109

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5bf1e45
feat: corrected date updated text
DereC4 Feb 25, 2024
dbc751e
feat: whew alignment looks way better
DereC4 Feb 25, 2024
c6d6c12
feat: aligned the bars and made the latter half justify-end
DereC4 Feb 25, 2024
50c8604
fix: limt
DereC4 Feb 25, 2024
a463677
fix: removed broken divider vinson did u do this
DereC4 Feb 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 10 additions & 13 deletions src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotal
import Text from '@views/components/common/Text/Text';
import React from 'react';
import calIcon from 'src/assets/logo.png';

import MenuIcon from '~icons/material-symbols/menu';
import RedoIcon from '~icons/material-symbols/redo';
import SettingsIcon from '~icons/material-symbols/settings';
Expand All @@ -21,25 +20,24 @@ const CalendarHeader = () => (
<div className='flex flex-row gap-20'>
<div className='flex gap-10'>
<div className='flex gap-1'>
<Button variant='single' icon={MenuIcon} color='ut-gray' />
<div className='flex items-center'>
<Button className='self-center' variant='single' icon={MenuIcon} color='ut-gray' />
<div className='flex items-center gap-2'>
<img src={calIcon} className='max-w-[48px] min-w-[48px]' alt='UT Registration Plus Logo' />
<div className='flex flex-col whitespace-nowrap'>
<Text className='leading-trim font-roboto text-cap text-base text-ut-burntorange font-medium'>
UT Registration
</Text>
<Text className='leading-trim text-cap font-roboto text-base text-ut-orange font-medium'>
Plus
</Text>
<Text className='text-lg text-ut-burntorange font-medium'>UT Registration</Text>
<Text className='text-lg text-ut-orange font-medium'>Plus</Text>
</div>
</div>
</div>
<div className='flex flex-col'>
<Divider className='self-center' size='2.5rem' orientation='vertical' />
<div className='flex flex-col self-center'>
<ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
DATA UPDATED ON: 12:00 AM 02/01/2024
<Text variant='h4' className='text-gray text-xs font-medium leading-normal'>
DATA UPDATED ON: 12:00 AM 02/01/2024
</Text>
</div>
</div>
<div className='flex flex-row items-center space-x-8'>
<div className='flex flex-row justify-end items-center space-x-8'>
<div className='flex flex-row space-x-4'>
<CourseStatus size='small' status={Status.WAITLISTED} />
<CourseStatus size='small' status={Status.CLOSED} />
Expand All @@ -52,7 +50,6 @@ const CalendarHeader = () => (
</div>
</div>
</div>
<Divider type='solid' />
</div>
);

Expand Down
Loading