feat: proper injected styles (#164)
This commit is contained in:
Razboy20
GitHub
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
})}
|
||||
|
||||
@@ -87,7 +87,6 @@
|
||||
margin-bottom: 0;
|
||||
|
||||
/* Type scale/small */
|
||||
font-family: 'Roboto Flex';
|
||||
font-size: 14.22px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import '@unocss/reset/tailwind-compat.css';
|
||||
// import '@unocss/reset/tailwind-compat.css';
|
||||
import 'uno.css';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
388
src/views/components/common/ExtensionRoot/_tailwind-compat.css
Normal file
388
src/views/components/common/ExtensionRoot/_tailwind-compat.css
Normal file
@@ -0,0 +1,388 @@
|
||||
/*
|
||||
Please read: https://github.com/unocss/unocss/blob/main/packages/reset/tailwind-compat.md
|
||||
*/
|
||||
|
||||
/*
|
||||
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
||||
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
||||
2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color`
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box; /* 1 */
|
||||
border-width: 0; /* 2 */
|
||||
border-style: solid; /* 2 */
|
||||
border-color: var(--un-default-border-color, #e5e7eb); /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use a consistent sensible line-height in all browsers.
|
||||
2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
3. Use a more readable tab size.
|
||||
4. Use the user's configured `sans` font-family by default.
|
||||
5. Use the user's configured `sans` font-feature-settings by default.
|
||||
6. Use the user's configured `sans` font-variation-settings by default.
|
||||
7. Disable tap highlights on iOS.
|
||||
*/
|
||||
|
||||
html,
|
||||
:host {
|
||||
line-height: 1.5; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
-moz-tab-size: 4; /* 3 */
|
||||
tab-size: 4; /* 3 */
|
||||
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
|
||||
font-feature-settings: normal; /* 5 */
|
||||
font-variation-settings: normal; /* 6 */
|
||||
-webkit-tap-highlight-color: transparent; /* 7 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Remove the margin in all browsers.
|
||||
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0; /* 1 */
|
||||
line-height: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Add the correct height in Firefox.
|
||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||
3. Ensure horizontal rules are visible by default.
|
||||
*/
|
||||
|
||||
hr {
|
||||
height: 0; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
border-top-width: 1px; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct text decoration in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
abbr:where([title]) {
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the default font size and weight for headings.
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Reset links to optimize for opt-in styling instead of opt-out.
|
||||
*/
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct font weight in Edge and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use the user's configured `mono` font-family by default.
|
||||
2. Use the user's configured `mono` font-feature-settings by default.
|
||||
3. Use the user's configured `mono` font-variation-settings by default.
|
||||
4. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
|
||||
font-feature-settings: normal; /* 2 */
|
||||
font-variation-settings: normal; /* 3 */
|
||||
font-size: 1em; /* 4 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
3. Remove gaps between table borders by default.
|
||||
*/
|
||||
|
||||
table {
|
||||
text-indent: 0; /* 1 */
|
||||
border-color: inherit; /* 2 */
|
||||
border-collapse: collapse; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Change the font styles in all browsers.
|
||||
2. Remove the margin in Firefox and Safari.
|
||||
3. Remove default padding in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-feature-settings: inherit; /* 1 */
|
||||
font-variation-settings: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
font-weight: inherit; /* 1 */
|
||||
line-height: inherit; /* 1 */
|
||||
color: inherit; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
padding: 0; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the inheritance of text transform in Edge and Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Remove default button styles.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
/* Will affect the button style of most component libraries, so disable it */
|
||||
/* https://github.com/unocss/unocss/issues/2127 */
|
||||
/* background-color: transparent; !* 2 *! */
|
||||
background-image: none; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Use the modern Firefox focus style for all focusable elements.
|
||||
*/
|
||||
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
||||
*/
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct vertical alignment in Chrome and Firefox.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/*
|
||||
Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the odd appearance in Chrome and Safari.
|
||||
2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/*
|
||||
Removes the default spacing for appropriate elements.
|
||||
*/
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
dd,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
figure,
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dialog {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent resizing textareas horizontally by default.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
||||
2. Set the default placeholder color to the user's configured gray 400 color.
|
||||
*/
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
opacity: 1; /* 1 */
|
||||
color: #9ca3af; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Set the default cursor for buttons.
|
||||
*/
|
||||
|
||||
button,
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
Make sure disabled buttons don't get the pointer cursor.
|
||||
*/
|
||||
|
||||
:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
||||
This can trigger a poorly considered lint error in some tools but is included by design.
|
||||
*/
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas,
|
||||
audio,
|
||||
iframe,
|
||||
embed,
|
||||
object {
|
||||
display: block; /* 1 */
|
||||
vertical-align: middle; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
*/
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Make elements with the HTML hidden attribute stay hidden by default.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@@ -39,7 +39,7 @@ export default function ScheduleDropdown(props: Props) {
|
||||
</Text>
|
||||
</p>
|
||||
</div>
|
||||
<Text className='text-2xl text-ut-burntorange font-normal'>
|
||||
<Text className='text-ut-burntorange text-2xl! font-normal!'>
|
||||
{open ? <DropdownArrowDown /> : <DropdownArrowUp />}
|
||||
</Text>
|
||||
</Disclosure.Button>
|
||||
|
||||
@@ -1,67 +1,64 @@
|
||||
@use 'src/views/styles/colors.module.scss';
|
||||
@use 'src/views/styles/fonts.module.scss';
|
||||
|
||||
@layer theme {
|
||||
.text {
|
||||
font-family: 'Roboto Flex', sans-serif;
|
||||
line-height: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.mini {
|
||||
font-size: 0.79rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.88875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.p {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.025rem;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.h3-course {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 400;
|
||||
line-height: 100%; /* 0.6875rem */
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 1.26563rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.h2-course {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03125rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 1.42375rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.h1-course {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 1.60188rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text {
|
||||
line-height: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.mini {
|
||||
font-size: 0.79rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.88875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.p {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.025rem;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.h3-course {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 400;
|
||||
line-height: 100%; /* 0.6875rem */
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 1.26563rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.h2-course {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03125rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 1.42375rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.h1-course {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 1.60188rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -70,7 +70,7 @@ export default function Description({ course }: DescriptionProps): JSX.Element {
|
||||
<li key={line}>
|
||||
<Text
|
||||
variant='p'
|
||||
className={clsx({ 'font-bold text-ut-burntorange': isKeywordPresent })}
|
||||
className={clsx({ 'font-bold! text-ut-burntorange': isKeywordPresent })}
|
||||
>
|
||||
{line}
|
||||
</Text>
|
||||
|
||||
@@ -106,7 +106,7 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
|
||||
title: { text: 'Number of Students' },
|
||||
},
|
||||
chart: {
|
||||
style: { fontFamily: 'Roboto Flex', fontWeight: '600' },
|
||||
style: { fontFamily: 'Roboto Flex, Roboto Flex Local', fontWeight: '600' },
|
||||
spacingBottom: 25,
|
||||
spacingTop: 25,
|
||||
height: 250,
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { Course, ScrapedRow } from '@shared/types/Course';
|
||||
import type { UserSchedule } from '@shared/types/UserSchedule';
|
||||
import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
|
||||
import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
@@ -85,20 +86,22 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
|
||||
}
|
||||
|
||||
return ReactDOM.createPortal(
|
||||
<div className='relative'>
|
||||
<button
|
||||
className='m1 h-6 w-6 flex items-center justify-center rounded bg-ut-burntorange color-white!'
|
||||
onClick={onClick}
|
||||
>
|
||||
<RowIcon color='ut-white' />
|
||||
</button>
|
||||
{conflicts.length > 0 && (
|
||||
<ConflictsWithWarning
|
||||
className='invisible absolute left-13 top--3 text-white group-hover:visible'
|
||||
conflicts={conflicts}
|
||||
/>
|
||||
)}
|
||||
</div>,
|
||||
<ExtensionRoot>
|
||||
<div className='relative'>
|
||||
<button
|
||||
className='m1 h-6 w-6 flex items-center justify-center rounded bg-ut-burntorange color-white!'
|
||||
onClick={onClick}
|
||||
>
|
||||
<RowIcon color='ut-white' />
|
||||
</button>
|
||||
{conflicts.length > 0 && (
|
||||
<ConflictsWithWarning
|
||||
className='invisible absolute left-13 top--3 text-white group-hover:visible'
|
||||
conflicts={conflicts}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</ExtensionRoot>,
|
||||
container
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user