feat(ui): calendar header redesign (#479)

* feat(ui): calendar header redesign (WIP)

* feat(ui): calendar header redesign (WIP)

* chore: use path alias

* feat(ui): calendar header redesign

* implement Isaiah changes

* refactor to prevent unnecessary recreations of resize observer

* clean up resize observer and remove unnecessary checks

* remove offwhite border from toolbar

* merge

* complete toolbar

* update screenreader functionality

* ensure truncation works

* merge

* finish new toolbar

* remove unused screen size hook and .mjs file

* add in export button with options

* add static size for export button dropdown to prevent shrinking on smaller viewports

* change schedule section min width to prevent shrinkage

* change text for schedule section to match small caps

* fix truncating issues with small caps

* remove hidden overflow

* add padding

* add min height for hader

* reserve scrollbar width

* tmp

* add sticky positioning to header

* fix inert prop issue

* remove pnpm lock file

* fix scrollbar appearing too early

* fix vertical stickiness

* fix(ui): fix header spacing

* fix(ui): update total hours and courses to be h4

* fix(ui): reduce top spacing on header

* fix(ui): remove header top padding

* fix(ui): stop bottom scrollbar from shifting layout

* feat: add functionality to header and fix screenshot spacing

* feat: add functionality to header and fix screenshot spacing

* fix(ui): allow scrollbar in header and adjust padding to compensate for reserved space

* fix(ui): make export options container hug children

* fix(ui): add offwhite border

* chore: add back lock file from main branch :)

* feat(ui): add reduced motion for accessability

* feat(ui): change right scrollbar on calendar grid to be hidden when not necessary

* chore: make all buttons except export invisible

* chore: remove all buttons except export and adjust hardcoded pixel widths for responsiveness

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
Co-authored-by: Razboy20 <razboy20@gmail.com>

src/views/components/common/Button.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 
 interface Props {
     className?: string;
+    ref?: React.ForwardedRef<HTMLButtonElement>;
     style?: React.CSSProperties;
     variant?: 'filled' | 'outline' | 'minimal';
     size?: 'regular' | 'small' | 'mini';
@@ -24,6 +25,7 @@ interface Props {
  */
 export function Button({
     className,
+    ref,
     style,
     variant = 'filled',
     size = 'regular',
@@ -42,6 +44,7 @@ export function Button({
 
     return (
         <button
+            ref={ref}
             style={
                 {
                     color: colorHex,

src/views/components/common/ScheduleTotalHoursAndCourses.tsx

@@ -24,17 +24,24 @@ export default function ScheduleTotalHoursAndCourses({
     totalCourses,
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className='min-w-full flex flex-col items-start whitespace-nowrap'>
-            <Text className='truncate text-ut-burntorange' variant='h1' as='span'>
-                {`${scheduleName} `}
-            </Text>
-            <Text variant='h3' as='div' className='flex flex-row items-center gap-2.5 text-theme-black'>
-                <Text variant='h4' as='span' className='hidden text-ut-black uppercase screenshot:inline sm:inline'>
-                    {totalHours} {totalHours === 1 ? 'Hour' : 'Hours'}
+        <div className='w-full flex flex-col items-start'>
+            <div className='max-w-full overflow-hidden'>
+                <Text className='block w-full truncate text-ut-burntorange' variant='h1' as='span'>
+                    {scheduleName}
                 </Text>
-
-                <Text variant='h4' as='span' className='hidden text-ut-black uppercase screenshot:inline sm:inline'>
-                    {totalCourses} {totalCourses === 1 ? 'Course' : 'Courses'}
+            </div>
+            <Text variant='h3' as='div' className='flex flex-row items-center gap-2.5 text-theme-black'>
+                <Text variant='h4' as='span' className='inline text-theme-black'>
+                    {totalHours}&nbsp;
+                    <Text variant='h3' as='span' className='inline text-theme-black font-all-small-caps!'>
+                        {totalHours === 1 ? 'Hour' : 'Hours'}
+                    </Text>
+                </Text>
+                <Text variant='h4' as='span' className='inline text-theme-black'>
+                    {totalCourses}&nbsp;
+                    <Text variant='h3' as='span' className='inline text-theme-black font-all-small-caps!'>
+                        {totalCourses === 1 ? 'Course' : 'Courses'}
+                    </Text>
                 </Text>
             </Text>
         </div>

src/views/components/common/Text/Text.tsx

@@ -1,10 +1,9 @@
 import type { PropsOf, ReactTag } from '@headlessui/react/dist/types';
+import styles from '@views/components/common/Text/Text.module.scss';
 import clsx from 'clsx';
 import type { ElementType, ReactNode, Ref } from 'react';
 import React from 'react';
 
-import styles from './Text.module.scss';
-
 type PropsWeControl = 'as' | 'children';
 type CleanProps<TTag extends ReactTag, TOmitableProps extends PropertyKey = never> = Omit<
     PropsOf<TTag>,