From 7be6ac6a4a35a982f48e08686c4dcc2c1870bac5 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Wed, 11 Sep 2024 10:52:58 +0200
Subject: [PATCH] Use new colors for grade status chip

---
 .../components/dashboard/GradeStatusChip.tsx     | 16 ++++++----------
 tailwind.config.js                               | 14 ++++++++++++--
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/lms/static/scripts/frontend_apps/components/dashboard/GradeStatusChip.tsx b/lms/static/scripts/frontend_apps/components/dashboard/GradeStatusChip.tsx
index 6ee62f16ab..c6c0d1e77c 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/GradeStatusChip.tsx
+++ b/lms/static/scripts/frontend_apps/components/dashboard/GradeStatusChip.tsx
@@ -24,16 +24,12 @@ export default function GradeStatusChip({ grade }: GradeStatusChipProps) {
 
   return (
     <div
-      className={classnames('rounded font-bold inline-block px-2 py-0.5', {
-        // We would usually use our standard `green-success` and `red-error`
-        // colors here, but they don't have enough contrast when used with
-        // white text and a small font.
-        // Instead, we use slightly darker shades of green and red.
-        'bg-[#008558] text-white': grade === 100,
-        'bg-[#D7373A] text-white': grade === 0,
-        'bg-green-200 text-green-900': grade >= 80 && grade < 100,
-        'bg-amber-100 text-amber-900': grade >= 50 && grade < 80,
-        'bg-red-200 text-red-900': grade >= 1 && grade < 50,
+      className={classnames('rounded inline-block font-bold px-2 py-0.5', {
+        'bg-grade-success text-white': grade === 100,
+        'bg-grade-success-light text-grade-success': grade >= 80 && grade < 100,
+        'bg-grade-warning-light text-grade-warning': grade >= 50 && grade < 80,
+        'bg-grade-error-light text-grade-error': grade >= 1 && grade < 50,
+        'bg-grade-error text-white': grade === 0,
         'bg-grey-3 text-grey-7': gradeIsInvalid,
       })}
     >
diff --git a/tailwind.config.js b/tailwind.config.js
index 1ca591664f..df6a16c26e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,7 +3,7 @@ import tailwindConfig from '@hypothesis/frontend-shared/lib/tailwind.preset.js';
 const successGreen =
   tailwindConfig.theme?.extend?.colors?.green?.success ?? '#00a36d';
 
-export default {
+export default /** @type {Partial<import('tailwindcss').Config>} */ ({
   presets: [tailwindConfig],
   content: [
     './lms/static/scripts/frontend_apps/**/*.{js,ts,tsx}',
@@ -17,6 +17,16 @@ export default {
       animation: {
         gradeSubmitSuccess: 'gradeSubmitSuccess 2s ease-out forwards',
       },
+      colors: {
+        grade: {
+          success: '#005c3d',
+          'success-light': '#dfebe7',
+          error: '#891b1d',
+          'error-light': '#f0e2e3',
+          warning: '#774903',
+          'warning-light': '#fef7ec',
+        },
+      },
       fontFamily: {
         sans: [
           '"Helvetica Neue"',
@@ -37,4 +47,4 @@ export default {
       },
     },
   },
-};
+});