feat: proper injected styles (#164)

Longhorn-Developers · Mar 14, 2024 · e919e96 · e919e96
1 parent 442be8c
commit e919e96
Show file tree

Hide file tree

Showing 15 changed files with 517 additions and 117 deletions.
diff --git a/src/pages/popup/index.tsx b/src/pages/popup/index.tsx
@@ -1,3 +1,5 @@
+import 'uno.css';
+
 import PopupMain from '@views/components/PopupMain';
 import React from 'react';
 import { createRoot } from 'react-dom/client';

diff --git a/src/views/components/CourseCatalogMain.tsx b/src/views/components/CourseCatalogMain.tsx
@@ -6,7 +6,6 @@ import RecruitmentBanner from '@views/components/injected/RecruitmentBanner/Recr
 import TableHead from '@views/components/injected/TableHead';
 import TableRow from '@views/components/injected/TableRow/TableRow';
 // import TableSubheading from '@views/components/injected/TableSubheading/TableSubheading';
-import { useKeyPress } from '@views/hooks/useKeyPress';
 import useSchedules from '@views/hooks/useSchedules';
 import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
 import getCourseTableRows from '@views/lib/getCourseTableRows';
@@ -54,11 +53,7 @@ export default function CourseCatalogMain({ support }: Props): JSX.Element {
         setSelectedCourse(course);
     };
 
-    const handleClearSelectedCourse = () => {
-        setSelectedCourse(null);
-    };
-
-    useKeyPress('Escape', handleClearSelectedCourse);
+    // useKeyPress('Escape', handleClearSelectedCourse);
 
     const [activeSchedule] = useSchedules();
 
@@ -87,7 +82,7 @@ export default function CourseCatalogMain({ support }: Props): JSX.Element {
                 activeSchedule={activeSchedule}
                 show={showPopup}
                 onClose={() => setShowPopup(false)}
-                afterLeave={handleClearSelectedCourse}
+                afterLeave={() => setSelectedCourse(null)}
             />
             <AutoLoad addRows={addRows} />
         </ExtensionRoot>

diff --git a/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx b/src/views/components/calendar/CalendarCourseCell/CalendarCourseCell.tsx
@@ -69,7 +69,7 @@ export default function CalendarCourseCell({
             >
                 <Text
                     variant='h1-course'
-                    className={clsx('leading-tight truncate', {
+                    className={clsx('leading-tight! truncate', {
                         '-my-0.8': timeAndLocation,
                         'text-wrap': !timeAndLocation,
                     })}

diff --git a/src/views/components/calendar/CalendarGrid/CalendarGrid.module.scss b/src/views/components/calendar/CalendarGrid/CalendarGrid.module.scss
@@ -87,7 +87,6 @@
         margin-bottom: 0;
 
         /* Type scale/small */
-        font-family: 'Roboto Flex';
         font-size: 14.22px;
         font-style: normal;
         font-weight: 500;

diff --git a/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx b/src/views/components/calendar/CalendarHeader/CalenderHeader.tsx
@@ -40,8 +40,8 @@ export default function CalendarHeader(): JSX.Element {
                         <div className='flex items-center gap-2'>
                             <LogoIcon />
                             <div className='flex flex-col whitespace-nowrap'>
-                                <Text className='text-lg text-ut-burntorange font-medium'>UT Registration</Text>
-                                <Text className='text-lg 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>
@@ -52,7 +52,7 @@ export default function CalendarHeader(): JSX.Element {
                             totalHours={activeSchedule.hours}
                             totalCourses={activeSchedule.courses.length}
                         />
-                        <Text variant='h4' className='text-xs text-gray font-medium leading-normal'>
+                        <Text variant='h4' className='text-xs! text-gray font-medium! leading-normal!'>
                             LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
                         </Text>
                     </div>

diff --git a/src/views/components/common/Dialog/Dialog.tsx b/src/views/components/common/Dialog/Dialog.tsx
@@ -4,6 +4,8 @@ import clsx from 'clsx';
 import type { PropsWithChildren } from 'react';
 import React, { Fragment } from 'react';
 
+import ExtensionRoot from '../ExtensionRoot/ExtensionRoot';
+
 export interface _DialogProps {
     className?: string;
     title?: JSX.Element;
@@ -20,39 +22,41 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
 
     return (
         <Transition show={open} as={HDialog} {...rest}>
-            <Transition.Child
-                as={Fragment}
-                enter='transition duration-300 ease-out'
-                enterFrom='opacity-0'
-                enterTo='opacity-100'
-                leave='transition duration-150 ease-in delay-25'
-                leaveFrom='opacity-100'
-                leaveTo='opacity-0'
-            >
-                <div className={clsx('fixed inset-0 z-50 bg-neutral-500/25')} />
-            </Transition.Child>
-            <Transition.Child
-                as={Fragment}
-                enter='transition duration-400 ease-[cubic-bezier(0.15,0.3,0.2,1)]'
-                enterFrom='transform scale-95 opacity-0'
-                enterTo='transform scale-100 opacity-100'
-                leave='transition duration-250 ease-[cubic-bezier(0.23,0.01,0.92,0.72)]'
-                leaveFrom='transform scale-100 opacity-100'
-                leaveTo='transform scale-95 opacity-0'
-            >
-                <div className='fixed inset-0 z-50 flex items-center justify-center'>
-                    <HDialog.Panel
-                        className={clsx(
-                            'z-99 max-h-[80vh] flex flex-col overflow-y-scroll rounded bg-white shadow-xl',
-                            className
-                        )}
-                    >
-                        {props.title && <HDialog.Title>{props.title}</HDialog.Title>}
-                        {props.description && <HDialog.Description>{props.description}</HDialog.Description>}
-                        {children}
-                    </HDialog.Panel>
-                </div>
-            </Transition.Child>
+            <ExtensionRoot>
+                <Transition.Child
+                    as={Fragment}
+                    enter='transition duration-300 ease-out'
+                    enterFrom='opacity-0'
+                    enterTo='opacity-100'
+                    leave='transition duration-150 ease-in delay-25'
+                    leaveFrom='opacity-100'
+                    leaveTo='opacity-0'
+                >
+                    <div className={clsx('fixed inset-0 z-50 bg-neutral-500/25')} />
+                </Transition.Child>
+                <Transition.Child
+                    as={Fragment}
+                    enter='transition duration-400 ease-[cubic-bezier(0.15,0.3,0.2,1)]'
+                    enterFrom='transform scale-95 opacity-0'
+                    enterTo='transform scale-100 opacity-100'
+                    leave='transition duration-250 ease-[cubic-bezier(0.23,0.01,0.92,0.72)]'
+                    leaveFrom='transform scale-100 opacity-100'
+                    leaveTo='transform scale-95 opacity-0'
+                >
+                    <div className='fixed inset-0 z-50 flex items-center justify-center'>
+                        <HDialog.Panel
+                            className={clsx(
+                                'z-99 max-h-[80vh] flex flex-col overflow-y-auto rounded bg-white shadow-xl',
+                                className
+                            )}
+                        >
+                            {props.title && <HDialog.Title>{props.title}</HDialog.Title>}
+                            {props.description && <HDialog.Description>{props.description}</HDialog.Description>}
+                            {children}
+                        </HDialog.Panel>
+                    </div>
+                </Transition.Child>
+            </ExtensionRoot>
         </Transition>
     );
 }
diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss b/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
@@ -1,5 +1,15 @@
 @import 'src/views/styles/base.module.scss';
 
+@layer base {
+    .extensionRoot {
+        @import 'tailwind-compat';
+    }
+
+    span {
+        font-family: inherit;
+    }
+}
+
 .extensionRoot {
     @apply font-sans h-full;
     color: #303030;

diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
@@ -1,4 +1,4 @@
-import '@unocss/reset/tailwind-compat.css';
+// import '@unocss/reset/tailwind-compat.css';
 import 'uno.css';
 
 import React from 'react';