From 8a62d5861c65e685c0353e990d09990fedc365ae Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Sun, 25 Feb 2024 19:12:45 -0600
Subject: [PATCH] feat: alignment on calendar and header (#109)

* feat: corrected date updated text

* feat: whew alignment looks way better

* feat: aligned the bars and made the latter half justify-end

* fix: limt

* fix: removed broken divider vinson did u do this
---
 .../CalendarHeader/CalenderHeader.tsx         | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx b/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
index cfe7f020..38eb1493 100644
--- a/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
+++ b/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
@@ -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';
@@ -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} />
@@ -52,7 +50,6 @@ const CalendarHeader = () => (
                 </div>
             </div>
         </div>
-        <Divider type='solid' />
     </div>
 );