From 1fa67f451a5a148e65b3efa431699f4432648df7 Mon Sep 17 00:00:00 2001 From: Sriram Hariharan Date: Mon, 6 Mar 2023 23:28:08 -0600 Subject: [PATCH] auto generate classes using scss magic, some restyling and refactoring' --- src/views/components/CourseCatalogMain.tsx | 4 +- .../common/Button/Button.module.scss | 130 +++++------------- src/views/components/common/Button/Button.tsx | 8 +- .../injected/TableRow/TableRow.module.scss | 4 +- .../components/injected/TableRow/TableRow.tsx | 18 ++- 5 files changed, 52 insertions(+), 112 deletions(-) diff --git a/src/views/components/CourseCatalogMain.tsx b/src/views/components/CourseCatalogMain.tsx index 15c1e708..e8f06d20 100644 --- a/src/views/components/CourseCatalogMain.tsx +++ b/src/views/components/CourseCatalogMain.tsx @@ -66,10 +66,8 @@ export default function CourseCatalogMain({ support }: Props) { return ( ); diff --git a/src/views/components/common/Button/Button.module.scss b/src/views/components/common/Button/Button.module.scss index 74a07c75..3a7bbb92 100644 --- a/src/views/components/common/Button/Button.module.scss +++ b/src/views/components/common/Button/Button.module.scss @@ -16,123 +16,57 @@ align-items: center; justify-content: center; - &:active { - animation: ripple 1s ease-out; - } - - $primary: $burnt_orange; - $secondary: $charcoal; - $tertiary: $bluebonnet; - $danger: $speedway_brick; - $warning: $tangerine; - $success: $turtle_pond; - $info: $turquoise; - &:hover { background-color: #fff; color: #000; } - &.primary { - background-color: $primary; - color: #fff; + &.disabled { + cursor: not-allowed !important; + opacity: 0.5 !important; - &:hover { - background-color: lighten($primary, 10%); - } - - &:active, &:active { - background-color: darken($primary, 10%); + animation: none !important; } } - &.secondary { - background-color: $secondary; - color: #fff; - - &:hover { - background-color: lighten($secondary, 10%); - } - - &:active, - &:active { - background-color: darken($secondary, 10%); - } + &:active { + animation: click_animation 0.5s ease-in-out; } - &.tertiary { - background-color: $tertiary; - color: #fff; + @each $color, + $value + in ( + primary: $burnt_orange, + secondary: $charcoal, + tertiary: $bluebonnet, + danger: $speedway_brick, + warning: $tangerine, + success: $turtle_pond, + info: $turquoise + ) + { + &.#{$color} { + background-color: $value; + color: #fff; - &:hover { - background-color: lighten($tertiary, 10%); - } + &:hover { + background-color: lighten($value, 10%); + } - &:focus, - &:active { - background-color: darken($tertiary, 10%); - } - } + &:focus, + &:active { + background-color: darken($value, 10%); + } - &.danger { - background-color: $danger; - color: #fff; - - &:hover { - background-color: lighten($danger, 10%); - } - - &:focus, - &:active { - background-color: darken($danger, 10%); - } - } - - &.warning { - background-color: $warning; - color: #fff; - - &:hover { - background-color: lighten($warning, 10%); - } - - &:focus, - &:active { - background-color: darken($warning, 10%); - } - } - - &.success { - background-color: $success; - color: #fff; - - &:hover { - background-color: lighten($success, 10%); - } - - &:focus, - &:active { - background-color: darken($success, 10%); - } - } - - &.info { - background-color: $info; - color: #fff; - - &:hover { - background-color: lighten($info, 10%); - } - - &:focus, - &:active { - background-color: darken($info, 10%); + &.disabled { + background-color: $value !important; + } } } } -@keyframes ripple { +@keyframes click_animation { 0% { transform: scale(1); } diff --git a/src/views/components/common/Button/Button.tsx b/src/views/components/common/Button/Button.tsx index 270f0f8a..f7914526 100644 --- a/src/views/components/common/Button/Button.tsx +++ b/src/views/components/common/Button/Button.tsx @@ -7,6 +7,7 @@ interface Props { style?: React.CSSProperties; onClick?: () => void; type?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'info'; + disabled?: boolean; testId?: string; } @@ -20,14 +21,17 @@ export function Button({ type, testId, children, + disabled, onClick, }: React.PropsWithChildren): JSX.Element { return ( diff --git a/src/views/components/injected/TableRow/TableRow.module.scss b/src/views/components/injected/TableRow/TableRow.module.scss index 505eb220..dfc30169 100644 --- a/src/views/components/injected/TableRow/TableRow.module.scss +++ b/src/views/components/injected/TableRow/TableRow.module.scss @@ -1,8 +1,8 @@ @import 'src/views/styles/base.module.scss'; .selectedRow { - td { - background: green !important; + * { + background: $burnt_orange !important; color: white !important; } } diff --git a/src/views/components/injected/TableRow/TableRow.tsx b/src/views/components/injected/TableRow/TableRow.tsx index 722d91ac..0f9251af 100644 --- a/src/views/components/injected/TableRow/TableRow.tsx +++ b/src/views/components/injected/TableRow/TableRow.tsx @@ -1,16 +1,14 @@ import React, { useEffect, useState } from 'react'; import ReactDOM from 'react-dom'; import { Course, ScrapedRow } from 'src/shared/types/Course'; -import { SiteSupport } from 'src/views/lib/getSiteSupport'; +import {} from 'src/views/lib/getSiteSupport'; import { Button } from '../../common/Button/Button'; import Icon from '../../common/Icon/Icon'; import styles from './TableRow.module.scss'; interface Props { - support: SiteSupport; isSelected: boolean; - course: Course; - element: HTMLTableRowElement; + row: ScrapedRow; onClick: (...args: any[]) => any; } @@ -18,19 +16,25 @@ interface Props { * This component is injected into each row of the course catalog table. * @returns a react portal to the new td in the column or null if the column has not been created yet. */ -export default function TableRow({ support, course, element, isSelected, onClick }: Props): JSX.Element | null { +export default function TableRow({ row, isSelected, onClick }: Props): JSX.Element | null { const [container, setContainer] = useState(null); + const { element, course } = row; + useEffect(() => { const portalContainer = document.createElement('td'); const lastTableCell = element.querySelector('td:last-child'); lastTableCell!.after(portalContainer); setContainer(portalContainer); - }, []); + + return () => { + portalContainer.remove(); + }; + }, [element]); useEffect(() => { element.classList[isSelected ? 'add' : 'remove'](styles.selectedRow); - }, [course, isSelected, element.classList]); + }, [isSelected, element.classList]); if (!container) { return null;