From 36bcdd25224261e3efb54dc0cdd0f8d22502737d Mon Sep 17 00:00:00 2001
From: Abhinav Chadaga <abhinav.chadaga@utexas.edu>
Date: Mon, 19 Feb 2024 21:15:41 -0600
Subject: [PATCH] change grade distribution colors to match updated figma

---
 src/shared/util/themeColors.ts                | 14 ++++++++++
 .../GradeDistribution.tsx                     | 27 +++++++++----------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/shared/util/themeColors.ts b/src/shared/util/themeColors.ts
index f52cba4c..17571b8f 100644
--- a/src/shared/util/themeColors.ts
+++ b/src/shared/util/themeColors.ts
@@ -16,6 +16,20 @@ export const colors = {
         red: '#af2e2d',
         black: '#1a2024',
     },
+    gradeDistribution: {
+        a: '#22c55e',
+        aminus: '#a3e635',
+        bplus: '#84CC16',
+        b: '#FDE047',
+        bminus: '#FACC15',
+        cplus: '#F59E0B',
+        c: '#FB923C',
+        cminus: '#F97316',
+        dplus: '#EA580C', // TODO (achadaga): copilot generated, get actual color from Isaiah
+        d: '#DC2626',
+        dminus: '#B91C1C',
+        f: '#B91C1C',
+    },
 } as const;
 
 type NestedKeys<T> = {
diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
index aadb75e7..b86699c3 100644
--- a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
+++ b/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
@@ -5,12 +5,12 @@ import HighchartsReact from 'highcharts-react-official';
 import React from 'react';
 import { Course } from 'src/shared/types/Course';
 import { Distribution, LetterGrade } from 'src/shared/types/Distribution';
+import { colors } from 'src/shared/util/themeColors';
 import {
     NoDataError,
     queryAggregateDistribution,
     querySemesterDistribution,
 } from 'src/views/lib/database/queryDistribution';
-import colors from 'src/views/styles/colors.module.scss';
 
 interface GradeDistributionProps {
     course: Course;
@@ -23,20 +23,19 @@ enum DataStatus {
     ERROR = 'ERROR',
 }
 
-// TODO: Use tailwind colors here
 const GRADE_COLORS: Record<LetterGrade, string> = {
-    A: colors.turtle_pond,
-    'A-': colors.turtle_pond,
-    'B+': colors.cactus,
-    B: colors.cactus,
-    'B-': colors.cactus,
-    'C+': colors.sunshine,
-    C: colors.sunshine,
-    'C-': colors.sunshine,
-    'D+': colors.tangerine,
-    D: colors.tangerine,
-    'D-': colors.tangerine,
-    F: colors.speedway_brick,
+    A: colors.gradeDistribution.a,
+    'A-': colors.gradeDistribution.aminus,
+    'B+': colors.gradeDistribution.bplus,
+    B: colors.gradeDistribution.b,
+    'B-': colors.gradeDistribution.bminus,
+    'C+': colors.gradeDistribution.cplus,
+    C: colors.gradeDistribution.c,
+    'C-': colors.gradeDistribution.cminus,
+    'D+': colors.gradeDistribution.dplus,
+    D: colors.gradeDistribution.d,
+    'D-': colors.gradeDistribution.dminus,
+    F: colors.gradeDistribution.f,
 };
 
 interface State {