From ee2b7c40b9aade029c674be3410f45b4d32d8710 Mon Sep 17 00:00:00 2001
From: Som Gupta <78577376+knownotunknown@users.noreply.github.com>
Date: Sat, 23 Mar 2024 19:22:49 -0500
Subject: [PATCH] refactor: updated injected popup to match figma (#189)

* refactor: updated injected popup to match figma

* style: ran prettier

* style: fixed pr comments

* style: ran prettier

* refactor: tailwind style

---------

Co-authored-by: Razboy20 <razboy20@gmail.com>
---
 .../GradeDistribution.tsx                     | 50 +++++++++++++++++--
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
index 6b9e65e8..1bb26766 100644
--- a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
+++ b/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
@@ -98,13 +98,51 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
         subtitle: { text: undefined },
         legend: { enabled: false },
         xAxis: {
-            title: { text: 'Grades' },
+            labels: {
+                y: 20,
+                style: {
+                    fontSize: '0.6875rem',
+                    fontWeight: '500',
+                    letterSpacing: '0',
+                    lineHeight: 'normal',
+                    fontStyle: 'normal',
+                },
+            },
+            title: {
+                text: 'Grades',
+                style: {
+                    color: '#333F48',
+                    fontSize: '0.80rem',
+                    fontWeight: '400',
+                },
+            },
             categories: ['A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'D-', 'F'],
+            tickInterval: 1,
+            tickWidth: 1.5,
+            tickLength: 10,
+            tickColor: '#9CADB7',
             crosshair: true,
+            lineColor: '#9CADB7',
         },
         yAxis: {
+            labels: {
+                style: {
+                    fontSize: '0.80rem',
+                    fontWeight: '400',
+                    color: '#333F48',
+                    lineHeight: '100%',
+                    fontStyle: 'normal',
+                },
+            },
             min: 0,
-            title: { text: 'Students' },
+            title: {
+                text: 'Students',
+                style: {
+                    color: '#333F48',
+                    fontSize: '0.80rem',
+                    fontWeight: '400',
+                },
+            },
         },
         chart: {
             style: { fontFamily: 'Roboto Flex, Roboto Flex Local', fontWeight: '600' },
@@ -155,10 +193,12 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
             {status === DataStatus.ERROR && <Text variant='p'>Error fetching grade distribution data</Text>}
             {status === DataStatus.FOUND && (
                 <>
-                    <div className='w-full flex items-center justify-center gap-[12px]'>
-                        <Text variant='p'>Grade distribution for {`${course.department} ${course.number}`}</Text>
+                    <div className='flex flex-wrap content-center items-center self-stretch justify-center gap-3'>
+                        <Text variant='small'>
+                            Grade Distribution for {course.department} {course.number}
+                        </Text>
                         {/* <select
-                            className='border border rounded-[4px] border-solid px-[12px] py-[8px]'
+                            className='flex items-center py-1 px-1 gap-1 border border rounded border-solid'
                             onChange={handleSelectSemester}
                         >
                             {Object.keys(distributions)