Merge pull request #1908 from AtCoder-NoviSteps/#1906

🎨 Improve grade colors (#1906)

Author: KATO-Hiro

src/lib/components/GradeLabel.svelte

@@ -46,7 +46,7 @@
     {#if taskGrade !== TaskGrade.PENDING}
       {grade}
     {:else}
-      {'??'}
+      {'−'}
     {/if}
   </div>
 </div>

src/lib/utils/task.ts

@@ -265,17 +265,17 @@ export const getTaskGradeLabel = (taskGrade: TaskGrade | string) => {
 // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
 export const toChangeTextColorIfNeeds = (grade: string): string => {
   const gradeToWhiteText = [
-    `${getTaskGradeLabel(TaskGrade.D1)}`,
+    `${getTaskGradeLabel(TaskGrade.Q4)}`,
+    `${getTaskGradeLabel(TaskGrade.Q3)}`,
+    `${getTaskGradeLabel(TaskGrade.Q2)}`,
     `${getTaskGradeLabel(TaskGrade.D2)}`,
-    `${getTaskGradeLabel(TaskGrade.D3)}`,
     `${getTaskGradeLabel(TaskGrade.D4)}`,
     `${getTaskGradeLabel(TaskGrade.D5)}`,
+    `${getTaskGradeLabel(TaskGrade.D6)}`,
   ];
 
   if (gradeToWhiteText.includes(grade)) {
     return 'text-white';
-  } else if (getTaskGradeLabel(grade) === TaskGrade.D6) {
-    return 'text-atcoder-bronze';
   } else {
     return 'text-black';
   }

src/test/lib/utils/task_grade.test.ts

@@ -475,14 +475,15 @@ describe('Task grade', () => {
   });
 
   describe('to change text color if needs', () => {
-    describe('when task grades from 11Q to 1Q are given ', () => {
+    describe('when task grades with black text color are given ', () => {
       const testCases: TestCasesForTaskGrade = [
         { taskGrade: TaskGrade.Q11, expected: 'text-black' },
         { taskGrade: TaskGrade.Q10, expected: 'text-black' },
         { taskGrade: TaskGrade.Q6, expected: 'text-black' },
         { taskGrade: TaskGrade.Q5, expected: 'text-black' },
-        { taskGrade: TaskGrade.Q2, expected: 'text-black' },
         { taskGrade: TaskGrade.Q1, expected: 'text-black' },
+        { taskGrade: TaskGrade.D1, expected: 'text-black' },
+        { taskGrade: TaskGrade.D3, expected: 'text-black' },
       ];
 
       runTests(
@@ -494,11 +495,12 @@ describe('Task grade', () => {
       );
     });
 
-    describe('when task grades from 1D to 5D are given', () => {
+    describe('when task grades with white text color are given', () => {
       const testCases: TestCasesForTaskGrade = [
-        { taskGrade: TaskGrade.D1, expected: 'text-white' },
+        { taskGrade: TaskGrade.Q4, expected: 'text-white' },
+        { taskGrade: TaskGrade.Q3, expected: 'text-white' },
+        { taskGrade: TaskGrade.Q2, expected: 'text-white' },
         { taskGrade: TaskGrade.D2, expected: 'text-white' },
-        { taskGrade: TaskGrade.D3, expected: 'text-white' },
         { taskGrade: TaskGrade.D4, expected: 'text-white' },
         { taskGrade: TaskGrade.D5, expected: 'text-white' },
       ];
@@ -514,7 +516,7 @@ describe('Task grade', () => {
 
     describe('when task grades 6D is given', () => {
       const testCases: TestCasesForTaskGrade = [
-        { taskGrade: TaskGrade.D6, expected: 'text-atcoder-bronze' },
+        { taskGrade: TaskGrade.D6, expected: 'text-white' },
       ];
 
       runTests(

tailwind.config.ts

@@ -33,22 +33,22 @@ const config = {
           900: '#159957',
         },
         atcoder: {
-          Q11: '#e4d3da',
-          Q10: '#e3cad8',
-          Q9: '#e4cde0',
-          Q8: '#e4cbe8',
-          Q7: '#ddbbe6',
-          Q6: '#d9afe5',
-          Q5: '#f7cc52',
-          Q4: '#f1dd72',
-          Q3: '#cde030',
-          Q2: '#6dd452',
-          Q1: '#41c7ad',
-          D1: '#1c85b6',
-          D2: '#7f36be',
-          D3: '#e68e2e',
-          D4: '#e36223',
-          D5: '#e60d00',
+          Q11: '#e4e3e3',
+          Q10: '#e4dfdc',
+          Q9: '#dde3dc',
+          Q8: '#dde7e7',
+          Q7: '#dddceb',
+          Q6: '#e8e7dc',
+          Q5: '#dda0dd',
+          Q4: '#da70d6',
+          Q3: '#9370DB',
+          Q2: '#7f6000',
+          Q1: '#01fb02',
+          D1: '#72C6ef',
+          D2: '#002eff',
+          D3: '#ffff02',
+          D4: '#ff9900',
+          D5: '#ff1000',
           D6: '#432414',
           gray: '',
           brown: '',