feat: screenshot whole page, hide certain elements, screenshot fixed size (#180)

* feat: screenshot whole page, hide certain elements, screenshot fixed size

* refactor: use variants instead of groups and custom rules

* feat: scaled header, smaller body, weird padding/margin changes

* feat: consistent sizing & style regardless of zoom

* feat: use downloadBlob instead of hand-rolled image saving

* fix: be type safe is toBlob returns Promise<null>

* fix: revoke object url when it should be

* fix: animation scheduling

---------

Co-authored-by: Razboy20 <razboy20@gmail.com>

src/views/components/common/LogoIcon.tsx

@@ -46,7 +46,7 @@ export function LargeLogo({ className }: { className?: string }): JSX.Element {
     return (
         <div className={clsx('flex items-center gap-2', className)}>
             <LogoIcon className='h-12 w-12' />
-            <div className='hidden flex-col text-[1.35rem] font-medium leading-[1em] md:flex'>
+            <div className='hidden flex-col text-[1.35rem] font-medium leading-[1em] md:flex screenshot:flex'>
                 <p className='text-nowrap text-ut-burntorange'>UT Registration</p>
                 <p className='text-ut-orange'>Plus</p>
             </div>

src/views/components/common/ScheduleTotalHoursAndCourses.tsx

@@ -27,7 +27,7 @@ export default function ScheduleTotalHoursAndCourses({
             </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='hidden text-ut-black capitalize sm:inline'>
+                <Text variant='h4' as='span' className='hidden text-ut-black capitalize screenshot:inline sm:inline'>
                     {totalCourses} {totalCourses === 1 ? 'Course' : 'Courses'}
                 </Text>
             </Text>