RecruitmentBanner, thank you Lukas

src/views/components/CourseCatalogMain.tsx

@@ -10,6 +10,7 @@ import Icon from './common/Icon/Icon';
 import Text from './common/Text/Text';
 import AutoLoad from './injected/AutoLoad/AutoLoad';
 import CoursePopup from './injected/CoursePopup/CoursePopup';
+import RecruitmentBanner from './injected/RecruitmentBanner/RecruitmentBanner';
 import TableHead from './injected/TableHead';
 import TableRow from './injected/TableRow/TableRow';
 
@@ -54,6 +55,7 @@ export default function CourseCatalogMain({ support }: Props) {
 
     return (
         <ExtensionRoot>
+            <RecruitmentBanner />
             <TableHead>Plus</TableHead>
             {rows.map(row => {
                 if (!row.course) {

src/views/components/common/Link/Link.tsx

@@ -4,7 +4,7 @@ import { bMessenger } from 'src/shared/messages';
 import Text, { TextProps } from '../Text/Text';
 import styles from './Link.module.scss';
 
-type Props = TextProps & {
+type Props = Omit<TextProps, 'span'> & {
     url?: string;
     disabled?: boolean;
 };
@@ -27,6 +27,7 @@ export default function Link(props: PropsWithChildren<Props>) {
         <Text
             color='bluebonnet'
             {...passedProps}
+            span
             className={classNames(
                 styles.link,
                 {

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

@@ -31,7 +31,6 @@ export default function CourseHeader({ course, onClose }: Props) {
                     {course.courseName} ({course.department} {course.number})
                 </Text>
                 <Link
-                    span
                     url={course.url}
                     className={styles.uniqueId}
                     size='medium'
@@ -55,7 +54,7 @@ export default function CourseHeader({ course, onClose }: Props) {
                     return (
                         <>
                             {numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''}
-                            <Link key={name} span size='medium' weight='normal' url={url}>
+                            <Link key={name} size='medium' weight='normal' url={url}>
                                 {name}
                             </Link>
                             {numInstructors > 2 && !isLast ? ', ' : ''}
@@ -80,7 +79,6 @@ export default function CourseHeader({ course, onClose }: Props) {
                     </Text>
                     {' in '}
                     <Link
-                        span
                         size='medium'
                         weight='normal'
                         url={getBuildingUrl(meeting.location?.building)}

src/views/components/injected/RecruitmentBanner/RecruitmentBanner.module.scss

@@ -0,0 +1,8 @@
+@import 'src/views/styles/base.module.scss';
+
+.container {
+    background-color: $burnt_orange;
+    color: white;
+    text-align: center;
+    padding: 12px;
+}

src/views/components/injected/RecruitmentBanner/RecruitmentBanner.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import Link from '../../common/Link/Link';
+import Text from '../../common/Text/Text';
+import styles from './RecruitmentBanner.module.scss';
+
+const DISCORD_URL = 'https://discord.gg/qjcvgyVJbT';
+const GITHUB_URL = 'https://github.com/sghsri/UT-Registration-Plus';
+
+const RECRUIT_FROM_DEPARTMENTS = ['C S', 'ECE', 'MIS', 'CSE', 'EE', 'ITD'];
+
+/**
+ * This adds a new column to the course catalog table header.
+ * @returns a react portal to the new column or null if the column has not been created yet.
+ */
+export default function RecruitmentBanner() {
+    const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+    const shouldShowBanner = (): boolean => {
+        const params = ['fos_fl', 'fos_cn'];
+        let department = '';
+        params.forEach(p => {
+            const param = new URLSearchParams(window.location.search).get(p);
+            if (param) {
+                department = param;
+            }
+        });
+        if (!department) {
+            return false;
+        }
+        return RECRUIT_FROM_DEPARTMENTS.includes(department);
+    };
+
+    useEffect(() => {
+        if (!shouldShowBanner()) {
+            return;
+        }
+        const container = document.createElement('div');
+        container.setAttribute('id', 'ut-registration-plus-table-head');
+
+        const table = document.querySelector('table');
+        table!.before(container);
+        setContainer(container);
+    }, []);
+
+    if (!container) {
+        return null;
+    }
+
+    return createPortal(
+        <div className={styles.container}>
+            <Text color='white'>
+                Interested in helping us develop UT Registration Plus? Check out our{' '}
+                <Link color='white' url={DISCORD_URL}>
+                    Discord Server
+                </Link>{' '}
+                and{' '}
+                <Link color='white' url={GITHUB_URL}>
+                    GitHub
+                </Link>
+                !
+            </Text>
+        </div>,
+        container
+    );
+}