From a61bddf0e8a76c89d4963d9e580fb063309bee92 Mon Sep 17 00:00:00 2001
From: Abdulrahman Alshahrani <62489819+Abdomash@users.noreply.github.com>
Date: Mon, 20 Jan 2025 13:03:06 -0600
Subject: [PATCH] feat(ui): redesign grade distribution tooltip (#485)

* feat(ui): redesign grade distribution tooltip

* chore: prettier

* fix: use theme color for graph background

---------

Co-authored-by: Derek Chen <derex1987@gmail.com>
Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
---
 .../GradeDistribution.tsx                     | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
index 4d2a514c..ddd2b19c 100644
--- a/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
+++ b/src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
@@ -140,7 +140,7 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
             tickWidth: 1,
             tickLength: 10,
             tickColor: '#9CADB7',
-            crosshair: true,
+            crosshair: { color: extendedColors.theme.offwhite2 },
             lineColor: '#9CADB7',
         },
         yAxis: {
@@ -173,12 +173,24 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
         credits: { enabled: false },
         accessibility: { enabled: true },
         tooltip: {
-            headerFormat: '<span style="font-size:small; font-weight:bold">{point.key}</span><table>',
-            pointFormat:
-                '<td style="color:{black};padding:0;font-size:small; font-weight:bold;"><b>{point.y:.0f} Students</b></td>',
-            footerFormat: '</table>',
+            headerFormat: '<span style="display:block; font-weight:700;">{point.key}</span>',
+            pointFormat: '<span style="display:block; font-weight:500;">{point.y:.0f} Students</span>',
             shared: true,
             useHTML: true,
+            style: {
+                color: 'var(--Other-Colors-UTRP-Black, #1A2024)',
+                textAlign: 'center',
+                fontFamily: 'Roboto Flex, Roboto Flex Local',
+                fontSize: '0.88875rem',
+                lineHeight: 'normal',
+            },
+            backgroundColor: 'white',
+            borderRadius: 4,
+            shadow: {
+                offsetX: 0,
+                offsetY: 1,
+                color: 'rgba(51, 63, 72, 0.30)',
+            },
         },
         plotOptions: {
             bar: { pointPadding: 0.2, borderWidth: 0 },