feat: tailwind version of Button component

still WIP, need to figure out icon spacing exactly

src/views/components/common/Button/Button.tsx

@@ -5,18 +5,18 @@ import styles from './Button.module.scss';
 interface Props {
     className?: string;
     style?: React.CSSProperties;
-    type?: 'filled' | 'outline' | 'single';
+    variant?: 'filled' | 'outline' | 'single';
     onClick?: () => void;
-    iconOnly?: boolean;
-    showSymbol?: boolean;
-    symbol?: React.ReactNode;
+    icon?: React.ReactNode;
     disabled?: boolean;
     title?: string;
     testId?: string;
-    primaryColor?: string;
-    secondaryColor?: string;
+    useScss?: boolean;
 }
 
+const BUTTON_BASE_CLASS =
+    'm-2.5 h-10 w-auto flex cursor-pointer content-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 font-500 leading-normal font-sans btn-transition';
+
 /**
  * A reusable button component that follows the design system of the extension.
  * @returns
@@ -24,35 +24,39 @@ interface Props {
 export function Button({
     className,
     style,
-    type,
+    variant,
     onClick,
-    iconOnly,
-    showSymbol,
-    symbol,
+    icon,
     disabled,
     title,
     testId,
-    primaryColor,
-    secondaryColor,
     children,
+    useScss = false,
 }: React.PropsWithChildren<Props>): JSX.Element {
     return (
         <button
             style={
                 {
                     ...style,
-                    '--color-primary': primaryColor ?? '#333F48',
-                    '--color-secondary': secondaryColor ?? '#FFFFFF',
+                    '--color-primary': '#333F48',
+                    '--color-secondary': '#FFFFFF',
                 } as React.CSSProperties
             }
             data-testid={testId}
-            className={classNames(styles.button, className, styles[type ?? 'filled'], {
-                [styles.disabled]: disabled,
+            className={classNames(useScss ? styles.button : BUTTON_BASE_CLASS, className, {
+                [styles[variant]]: useScss,
+                [styles.disabled]: disabled && useScss,
+                'disabled:(cursor-not-allowed opacity-50)': disabled && !useScss,
+                'color-white border-none': variant === 'filled' && !useScss,
+                'border-current border-solid border-1 bg-white': variant === 'outline' && !useScss,
+                'bg-white border-none': variant === 'single' && !useScss,
             })}
             title={title}
+            disabled={disabled}
             onClick={disabled ? undefined : onClick}
         >
-            {!iconOnly && children}
+            {icon}
+            {children}
         </button>
     );
 }

src/views/components/common/ExtensionRoot/ExtensionRoot.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styles from './ExtensionRoot.module.scss';
 
 import 'uno.css';
+import '@unocss/reset/tailwind-compat.css';
 
 interface Props {
     testId?: string;

src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx

@@ -83,7 +83,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
             <Button
                 onClick={openRateMyProfessorURL}
                 disabled={!course.instructors.length}
-                type='primary'
+                variant='primary'
                 className={styles.button}
                 title='Search for this professor on RateMyProfessor'
             >
@@ -94,7 +94,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
             </Button>
             <Button
                 onClick={openSyllabiURL}
-                type='secondary'
+                variant='secondary'
                 className={styles.button}
                 title='Search for syllabi for this course'
             >
@@ -105,7 +105,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
             </Button>
             <Button
                 onClick={openTextbookURL}
-                type='tertiary'
+                variant='tertiary'
                 className={styles.button}
                 title='Search for textbooks for this course'
             >
@@ -118,7 +118,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
                 disabled={!activeSchedule}
                 onClick={isCourseSaved ? handleRemoveCourse : handleSaveCourse}
                 title={isCourseSaved ? 'Remove this course from your schedule' : 'Add this course to your schedule'}
-                type={isCourseSaved ? 'danger' : 'success'}
+                variant={isCourseSaved ? 'danger' : 'success'}
                 className={styles.button}
             >
                 <Text size='medium' weight='regular' color='white'>

src/views/components/injected/TableRow/TableRow.tsx

@@ -84,7 +84,7 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
 
     return ReactDOM.createPortal(
         <>
-            <Button className={styles.rowButton} onClick={onClick} type='secondary'>
+            <Button className={styles.rowButton} onClick={onClick} variant='secondary'>
                 <Icon name='bar_chart' color='white' size='medium' />
             </Button>
             {conflicts.length > 0 && (