Use new colors for grade status chip (#6674)

hypothesis · Sep 11, 2024 · cf198ae · cf198ae
1 parent 737cf16
commit cf198ae
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git 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
@@ -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 {
       },
     },
   },
-};
+});