chore: fix some arbitrary style values

src/assets/insideJokes.tsx

@@ -1,3 +1,5 @@
+import { colors } from '@shared/types/ThemeColors';
+
 const splashText: string[] = [
     "You can't fail classes you're not in, that's for sure.",
     'Steer clear of O-Chem, unless you fancy a challenge.',
@@ -67,7 +69,7 @@ const splashText: string[] = [
     'You are filled with DETERMINATION',
     '60k+ users!',
     'Almost Turing complete',
-    '#BF5700',
+    colors.ut.burntorange,
     'The waitlist is a lie!',
     `He's a CS Major, but he showers regularly. 🧢`,
     'A CS major walks into a bar. The bar is empty because it is a CS major.',

src/shared/types/ThemeColors.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 import type { theme } from 'unocss/preset-mini';
 
 import type { HexColor } from './Color';

src/shared/util/tests/themeColors.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/themeColors';
 import { describe, expect, it } from 'vitest';
 

src/views/components/calendar/utils.ts

@@ -102,6 +102,7 @@ export const saveCalAsPng = () => {
     rootNode.style.height = '754px';
     document.body.appendChild(rootNode);
 
+    // eslint-disable-next-line no-restricted-syntax
     const clonedNode = document.querySelector('#root')!.cloneNode(true) as HTMLDivElement;
     clonedNode.style.backgroundColor = 'white';
     (clonedNode.firstChild as HTMLDivElement).classList.add('screenshot-in-progress');

src/views/components/common/LogoIcon.tsx

@@ -1,3 +1,4 @@
+import { colors } from '@shared/types/ThemeColors';
 import clsx from 'clsx';
 import type { SVGProps } from 'react';
 import React from 'react';
@@ -10,7 +11,7 @@ import React from 'react';
 export function LogoIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
     return (
         <svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
-            <circle cx='20' cy='20' r='20' fill='#BF5700' />
+            <circle cx='20' cy='20' r='20' fill={colors.ut.burntorange} />
             <circle cx='20' cy='20' r='15.5' stroke='white' strokeWidth='3' />
             <rect x='18' y='10' width='4' height='19.5489' fill='white' />
             <rect x='10' y='22' width='4' height='19.5489' transform='rotate(-90 10 22)' fill='white' />

src/views/components/common/Prompt.tsx

@@ -50,8 +50,11 @@ function PromptDialog({ isOpen, onClose, title, content, children }: PromptDialo
                     leaveTo='opacity-0 scale-95'
                 >
                     <div className='fixed inset-0 w-screen flex items-center justify-center'>
+                        {/* eslint-disable-next-line no-restricted-syntax */}
                         <DialogPanel className='h-[200] w-[431px] flex flex-col rounded bg-white p-6'>
+                            {/* eslint-disable-next-line no-restricted-syntax */}
                             <DialogTitle className='mb-[10px]'>{title}</DialogTitle>
+                            {/* eslint-disable-next-line no-restricted-syntax */}
                             <Description className='mb-[13px]'>{content}</Description>
                             <div className='flex items-center justify-end gap-2'>{children}</div>
                         </DialogPanel>

src/views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup.tsx

@@ -30,6 +30,7 @@ function CourseCatalogInjectedPopup({ course, ...rest }: CourseCatalogInjectedPo
     const [activeSchedule] = useSchedules();
 
     return (
+        // eslint-disable-next-line no-restricted-syntax
         <Dialog className='max-w-[780px] overflow-y-hidden px-4' {...rest} initialFocus={emptyRef}>
             <div className='hidden' ref={emptyRef} />
             <HeadingAndActions course={course} onClose={rest.onClose as () => void} activeSchedule={activeSchedule} />

src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx

@@ -1,6 +1,6 @@
 import type { Course } from '@shared/types/Course';
 import type { Distribution, LetterGrade } from '@shared/types/Distribution';
-import { extendedColors } from '@shared/types/ThemeColors';
+import { colors, extendedColors } from '@shared/types/ThemeColors';
 import Text from '@views/components/common/Text/Text';
 import {
     NoDataError,
@@ -129,7 +129,7 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
             title: {
                 text: 'Grades',
                 style: {
-                    color: '#333F48',
+                    color: colors.ut.black,
                     fontSize: '0.80rem',
                     fontWeight: '400',
                 },
@@ -138,16 +138,16 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
             tickInterval: 1,
             tickWidth: 1.5,
             tickLength: 10,
-            tickColor: '#9CADB7',
+            tickColor: colors.ut.gray,
             crosshair: true,
-            lineColor: '#9CADB7',
+            lineColor: colors.ut.gray,
         },
         yAxis: {
             labels: {
                 style: {
                     fontSize: '0.80rem',
                     fontWeight: '400',
-                    color: '#333F48',
+                    color: colors.ut.black,
                     lineHeight: '100%',
                     fontStyle: 'normal',
                 },
@@ -156,7 +156,7 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
             title: {
                 text: 'Students',
                 style: {
-                    color: '#333F48',
+                    color: colors.ut.black,
                     fontSize: '0.80rem',
                     fontWeight: '400',
                 },

src/views/lib/CourseCatalogScraper.ts

@@ -26,7 +26,10 @@ const TableDataSelector = {
  * The selectors that we use to scrape the course details page for an individual course (https://utdirect.utexas.edu/apps/registrar/course_schedule/20239/52700/)
  */
 const DetailsSelector = {
+    // eslint-disable-next-line no-restricted-syntax
     COURSE_NAME: '#details h2',
+
+    // eslint-disable-next-line no-restricted-syntax
     COURSE_DESCRIPTION: '#details p',
 } as const;
 

src/views/lib/getSiteSupport.ts

@@ -29,22 +29,29 @@ export default function getSiteSupport(url: string): SiteSupportType | null {
     if (isExtensionPopup()) {
         return SiteSupport.EXTENSION_POPUP;
     }
+
     if (isExtensionPage('my_calendar.html')) {
         return SiteSupport.MY_CALENDAR;
     }
+
     if (url.includes('utexas.collegescheduler.com')) {
         return SiteSupport.UT_PLANNER;
     }
+
     if (url.includes('utdirect.utexas.edu/apps/registrar/course_schedule')) {
         if (url.includes('results')) {
             return SiteSupport.COURSE_CATALOG_LIST;
         }
+
+        // eslint-disable-next-line no-restricted-syntax
         if (document.querySelector('#details')) {
             return SiteSupport.COURSE_CATALOG_DETAILS;
         }
     }
+
     if (url.includes('utdirect.utexas.edu') && (url.includes('waitlist') || url.includes('classlist'))) {
         return SiteSupport.WAITLIST;
     }
+
     return null;
 }

src/views/lib/loadNextCourseCatalogPage.ts

@@ -1,6 +1,8 @@
 import getCourseTableRows from './getCourseTableRows';
 
+// eslint-disable-next-line no-restricted-syntax
 const NEXT_PAGE_BUTTON_SELECTOR = '#next_nav_link';
+// eslint-disable-next-line no-restricted-syntax
 const PREV_PAGE_BUTTON_SELECTOR = '#prev_nav_link';
 
 /**

src/views/lib/populateSearchInputs.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 /**
  * The course schedule page has a search form that allows users to search for courses by department and course level.
  * The problem is that once the user triggers a search and refreshes the page,