some styling

src/background/handler/courseDataHandler.ts

@@ -5,7 +5,7 @@ const courseDataHandler: MessageHandler<CourseDataMessages> = {
     getDistribution({ data, sendResponse }) {
         const { course } = data;
 
-        const dummyData = Array.from({ length: 18 }, () => Math.floor(Math.random() * 100));
+        const dummyData = Array.from({ length: 12 }, () => Math.floor(Math.random() * 100));
 
         sendResponse(dummyData);
     },

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

@@ -25,6 +25,7 @@ export default function Link(props: PropsWithChildren<Props>) {
 
     return (
         <Text
+            color='bluebonnet'
             {...passedProps}
             className={classNames(
                 styles.link,

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

@@ -8,6 +8,8 @@
         list-style-type: disc;
         margin: 0px;
         padding-left: 20px;
+        max-height: 200px;
+        overflow-y: auto;
 
         li {
             padding: 0px 4px 4px;

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

@@ -52,7 +52,7 @@ export default function CourseHeader({ course, onClose }: Props) {
                     return (
                         <>
                             {numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''}
-                            <Link key={name} span size='medium' weight='semi_bold' color='bluebonnet' url={url}>
+                            <Link key={name} span size='medium' weight='normal' url={url}>
                                 {name}
                             </Link>
                             {numInstructors > 2 && !isLast ? ', ' : ''}
@@ -81,7 +81,6 @@ export default function CourseHeader({ course, onClose }: Props) {
                         span
                         size='medium'
                         weight='normal'
-                        color='bluebonnet'
                         url={getBuildingUrl(meeting.location?.building)}
                         disabled={!meeting.location?.building}
                     >

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import React, { useEffect, useState } from 'react';
 import HighchartsReact from 'highcharts-react-official';
 import Highcharts from 'highcharts';
@@ -73,7 +74,7 @@ export default function GradeDistribution({ course }: Props) {
             {
                 type: 'column',
                 name: 'Grades',
-                data: [],
+                data: Array.from({ length: 12 }, () => 0),
             },
         ],
     });
@@ -96,7 +97,16 @@ export default function GradeDistribution({ course }: Props) {
                             // eslint-disable-next-line no-nested-ternary
                             // color: i < 8 ? '#2ECC71' : i < 10 ? '#F1C40F' : '#E74C3C',
                             // eslint-disable-next-line no-nested-ternary
-                            color: i < 8 ? colors.cactus : i < 10 ? colors.sunshine : colors.speedway_brick,
+                            color:
+                                i < 3
+                                    ? colors.turtle_pond
+                                    : i < 5
+                                    ? colors.cactus
+                                    : i < 7
+                                    ? colors.sunshine
+                                    : i < 10
+                                    ? colors.tangerine
+                                    : colors.speedway_brick,
                         })),
                     },
                 ],