removed the necessity for hardcoded line height variables

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

@@ -0,0 +1,5 @@
+@import 'src/views/styles/base.module.scss';
+
+hr {
+    border: 1px solid $limestone;
+}

src/views/components/common/Divider/Divider.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Color } from 'src/views/styles/colors.module.scss';
+import styles from './Divider.module.scss';
+
+export type Props = {
+    color?: Color | React.CSSProperties['borderColor'];
+    type?: 'solid' | 'dashed' | 'dotted';
+    style?: React.CSSProperties;
+    className?: string;
+    testId?: string;
+};
+
+/**
+ * This is a reusable divider component that can be used to separate content
+ */
+export default function Divider(props: Props) {
+    const style = {
+        ...props.style,
+        borderColor: props.color,
+        borderStyle: props.type,
+    };
+
+    return <hr data-testid={props.testId} style={style} className={classnames(styles.divider, props.className)} />;
+}

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

@@ -1,11 +1,11 @@
-@import "src/views/styles/base.module.scss";
+@import 'src/views/styles/base.module.scss';
 
 .text {
     font-family: 'Inter', sans-serif;
     color: $charcoal;
+    line-height: initial;
 }
 
-
 .light_weight {
     font-weight: $light_weight;
 }
@@ -53,28 +53,3 @@
 .xx_large_size {
     font-size: $xx_large_size;
 }
-
-.x_small_line_height {
-    line-height: $x_small_line_height;
-}
-
-.small_line_height {
-    line-height: $small_line_height;
-}
-
-.medium_line_height {
-    line-height: $medium_line_height;
-}
-
-.large_line_height {
-    line-height: $large_line_height;
-}
-
-.x_large_line_height {
-    line-height: $x_large_line_height;
-}
-
-.xx_large_line_height {
-    line-height: $xx_large_line_height;
-}
-

src/views/components/common/Text/Text.tsx

@@ -27,15 +27,8 @@ export default function Text(props: PropsWithChildren<TextProps>) {
 
     const weightClass = `${props.weight ?? 'regular'}_weight`;
     const fontSizeClass = `${props.size ?? 'medium'}_size`;
-    const lineHightClass = `${props.size ?? 'medium'}_line_height`;
 
-    const className = classNames(
+    const className = classNames(styles.text, styles[weightClass], styles[fontSizeClass], props.className);
-        styles.text,
-        styles[weightClass],
-        styles[fontSizeClass],
-        styles[lineHightClass],
-        props.className
-    );
 
     if (props.span) {
         return (

src/views/components/injected/CoursePopup/CourseHeader/CourseHeader.module.scss

@@ -18,8 +18,19 @@
     .title {
         display: flex;
         align-items: center;
+        margin-right: 40px;
+
+        .courseName {
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            // underline
+        }
 
         .uniqueId {
+            flex: 1;
             margin-left: 8px;
         }
     }
@@ -27,4 +38,8 @@
     .instructors {
         margin-top: 8px;
     }
+
+    .meeting {
+        margin-top: 8px;
+    }
 }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Course } from 'src/shared/types/Course';
 import Card from 'src/views/components/common/Card/Card';
+import Divider from 'src/views/components/common/Divider/Divider';
 import Icon from 'src/views/components/common/Icon/Icon';
 import Link from 'src/views/components/common/Link/Link';
 import Text from 'src/views/components/common/Text/Text';
@@ -25,8 +26,10 @@ export default function CourseHeader({ course, onClose }: Props) {
     return (
         <Card className={styles.header}>
             <Icon className={styles.close} size='large' name='close' onClick={onClose} />
-            <Text className={styles.title} size='medium' weight='bold' color='black'>
+            <div className={styles.title}>
-                {course.courseName} ({course.department} {course.number})
+                <Text className={styles.courseName} size='large' weight='bold' color='black'>
+                    {course.courseName} ({course.department} {course.number})
+                </Text>
                 <Link
                     span
                     url={course.url}
@@ -37,7 +40,7 @@ export default function CourseHeader({ course, onClose }: Props) {
                 >
                     #{course.uniqueId}
                 </Link>
-            </Text>
+            </div>
             <Text size='medium' className={styles.instructors}>
                 {`with ${!course.instructors.length ? 'TBA' : ''}`}
                 {course.instructors.map((instructor, index) => {
@@ -60,9 +63,8 @@ export default function CourseHeader({ course, onClose }: Props) {
                     );
                 })}
             </Text>
-
             {course.schedule.meetings.map(meeting => (
-                <Text size='medium'>
+                <Text size='medium' className={styles.meeting}>
                     <Text span size='medium' weight='bold' color='black'>
                         {meeting.getDaysString({
                             format: 'long',

src/views/styles/fonts.module.scss

@@ -26,17 +26,10 @@ $black_weight: 900;
 $x_small_size: 8px;
 $small_size: 12px;
 $medium_size: 16px;
-$large_size: 24px;
+$large_size: 20px;
 $x_large_size: 32px;
 $xx_large_size: 48px;
 
-$x_small_line_height: 12px;
-$small_line_height: 16px;
-$medium_line_height: 20px;
-$large_line_height: 28px;
-$x_large_line_height: 36px;
-$xx_large_line_height: 52px;
-
 :export {
     light_weight: $light_weight;
     regular_weight: $regular_weight;
@@ -51,11 +44,4 @@ $xx_large_line_height: 52px;
     large_size: $large_size;
     x_large_size: $x_large_size;
     xx_large_size: $xx_large_size;
-
-    x_small_line_height: $x_small_line_height;
-    small_line_height: $small_line_height;
-    medium_line_height: $medium_line_height;
-    large_line_height: $large_line_height;
-    x_large_line_height: $x_large_line_height;
-    xx_large_line_height: $xx_large_line_height;
 }

src/views/styles/fonts.module.scss.d.ts

@@ -22,18 +22,6 @@ export interface ISizes {
     xx_large_size: number;
 }
 
-/**
- * the type for all the line height scss variables exported from fonts.module.scss
- */
-export interface LineHeight {
-    x_small_line_height: number;
-    small_line_height: number;
-    medium_line_height: number;
-    large_line_height: number;
-    x_large_line_height: number;
-    xx_large_line_height: number;
-}
-
 /** A utility type that removes the _weight postfix from the variable names for weights */
 export type Weight = keyof IWeights extends `${infer U}_weight` ? U : never;
 
@@ -44,7 +32,7 @@ export type Size = keyof ISizes extends `${infer U}_size` ? U : never;
  * This is a file that we need to create to tell typescript what the shape of the css modules is
  * when we import them into ts/tsx files
  */
-export type IFonts = IWeights & ISizes & LineHeight;
+export type IFonts = IWeights & ISizes;
 
 declare const fonts: IFonts;
 export default fonts;