feat: PopupCourseBlock Component (#79)

Co-authored-by: Razboy20 <Razboy20@users.noreply.github.com>
Co-authored-by: Razboy20 <razboy20@gmail.com>

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

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

src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx

@@ -0,0 +1,61 @@
+import clsx from 'clsx';
+import React, { useState } from 'react';
+import { Course, Status } from '@shared/types/Course';
+import { StatusIcon } from '@shared/util/icons';
+import { CourseColors, getCourseColors, pickFontColor } from '@shared/util/colors';
+import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
+import Text from '../Text/Text';
+
+/**
+ * Props for PopupCourseBlock
+ */
+export interface PopupCourseBlockProps {
+    className?: string;
+    course: Course;
+    colors: CourseColors;
+}
+
+/**
+ * The "course block" to be used in the extension popup.
+ *
+ * @param props PopupCourseBlockProps
+ */
+export default function PopupCourseBlock({ className, course, colors }: PopupCourseBlockProps): JSX.Element {
+    // whiteText based on secondaryColor
+    const fontColor = pickFontColor(colors.primaryColor);
+
+    return (
+        <div
+            style={{
+                backgroundColor: colors.primaryColor,
+            }}
+            className={clsx('h-full w-full inline-flex items-center justify-center gap-1 rounded pr-3', className)}
+        >
+            <div
+                style={{
+                    backgroundColor: colors.secondaryColor,
+                }}
+                className='flex cursor-move items-center self-stretch rounded rounded-r-0'
+            >
+                <DragIndicatorIcon className='h-6 w-6 text-white' />
+            </div>
+            <Text
+                className={clsx('flex-1 py-3.5 text-ellipsis whitespace-nowrap overflow-hidden', fontColor)}
+                variant='h1-course'
+            >
+                <span className='px-0.5 font-450'>{course.uniqueId}</span> {course.department} {course.number} &ndash;{' '}
+                {course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}
+            </Text>
+            {course.status !== Status.OPEN && (
+                <div
+                    style={{
+                        backgroundColor: colors.secondaryColor,
+                    }}
+                    className='ml-1 flex items-center justify-center justify-self-end rounded p-1px text-white'
+                >
+                    <StatusIcon status={course.status} className='h-5 w-5' />
+                </div>
+            )}
+        </div>
+    );
+}

src/views/components/common/Text/Text.module.scss

@@ -1,65 +1,67 @@
 @use 'src/views/styles/colors.module.scss';
 @use 'src/views/styles/fonts.module.scss';
 
-.text {
-    font-family: 'Roboto Flex', sans-serif;
-    line-height: normal;
-    font-style: normal;
-}
+@layer theme {
+    .text {
+        font-family: 'Roboto Flex', sans-serif;
+        line-height: normal;
+        font-style: normal;
+    }
 
-.mini {
-    font-size: 0.79rem;
-    font-weight: 500;
-}
+    .mini {
+        font-size: 0.79rem;
+        font-weight: 500;
+    }
 
-.small {
-    font-size: 0.88875rem;
-    font-weight: 500;
-}
+    .small {
+        font-size: 0.88875rem;
+        font-weight: 500;
+    }
 
-.p {
-    font-size: 1rem;
-    font-weight: 400;
-    letter-spacing: 0.025rem;
-}
+    .p {
+        font-size: 1rem;
+        font-weight: 400;
+        letter-spacing: 0.025rem;
+    }
 
-.h4 {
-    font-size: 1.125rem;
-    font-weight: 500;
-}
+    .h4 {
+        font-size: 1.125rem;
+        font-weight: 500;
+    }
 
-.h3-course {
-    font-size: 0.6875rem;
-    font-weight: 400;
-    line-height: 100%; /* 0.6875rem */
-}
+    .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;
-}
+    .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-course {
+        font-size: 1rem;
+        font-weight: 500;
+        letter-spacing: 0.03125rem;
+        text-transform: capitalize;
+    }
 
-.h2 {
-    font-size: 1.42375rem;
-    font-weight: 500;
-}
+    .h2 {
+        font-size: 1.42375rem;
+        font-weight: 500;
+    }
 
-.h1-course {
-    font-size: 1rem;
-    font-weight: 600;
-    text-transform: capitalize;
-}
+    .h1-course {
+        font-size: 1rem;
+        font-weight: 600;
+        text-transform: capitalize;
+    }
 
-.h1 {
-    font-size: 1.60188rem;
-    font-weight: 700;
-    text-transform: uppercase;
+    .h1 {
+        font-size: 1.60188rem;
+        font-weight: 700;
+        text-transform: uppercase;
+    }
 }