DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change grade distribution colors to match updated figma

Browse Source
This commit is contained in:
Abhinav Chadaga
2024-02-19 21:15:41 -06:00
parent 11a50df88d
commit 36bcdd2522
2 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/shared/util/themeColors.ts
View File

@@ -16,6 +16,20 @@ export const colors = {
red: '#af2e2d', red: '#af2e2d',
black: '#1a2024', black: '#1a2024',
}, },
gradeDistribution: {
a: '#22c55e',
aminus: '#a3e635',
bplus: '#84CC16',
b: '#FDE047',
bminus: '#FACC15',
cplus: '#F59E0B',
c: '#FB923C',
cminus: '#F97316',
dplus: '#EA580C', // TODO (achadaga): copilot generated, get actual color from Isaiah
d: '#DC2626',
dminus: '#B91C1C',
f: '#B91C1C',
},
} as const; } as const;
type NestedKeys<T> = { type NestedKeys<T> = {

27
src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
View File

@@ -5,12 +5,12 @@ import HighchartsReact from 'highcharts-react-official';
import React from 'react'; import React from 'react';
import { Course } from 'src/shared/types/Course'; import { Course } from 'src/shared/types/Course';
import { Distribution, LetterGrade } from 'src/shared/types/Distribution'; import { Distribution, LetterGrade } from 'src/shared/types/Distribution';
import { colors } from 'src/shared/util/themeColors';
import { import {
NoDataError, NoDataError,
queryAggregateDistribution, queryAggregateDistribution,
querySemesterDistribution, querySemesterDistribution,
} from 'src/views/lib/database/queryDistribution'; } from 'src/views/lib/database/queryDistribution';
import colors from 'src/views/styles/colors.module.scss';
interface GradeDistributionProps { interface GradeDistributionProps {
course: Course; course: Course;
@@ -23,20 +23,19 @@ enum DataStatus {
ERROR = 'ERROR', ERROR = 'ERROR',
} }
// TODO: Use tailwind colors here
const GRADE_COLORS: Record<LetterGrade, string> = { const GRADE_COLORS: Record<LetterGrade, string> = {
A: colors.turtle_pond, A: colors.gradeDistribution.a,
'A-': colors.turtle_pond, 'A-': colors.gradeDistribution.aminus,
'B+': colors.cactus, 'B+': colors.gradeDistribution.bplus,
B: colors.cactus, B: colors.gradeDistribution.b,
'B-': colors.cactus, 'B-': colors.gradeDistribution.bminus,
'C+': colors.sunshine, 'C+': colors.gradeDistribution.cplus,
C: colors.sunshine, C: colors.gradeDistribution.c,
'C-': colors.sunshine, 'C-': colors.gradeDistribution.cminus,
'D+': colors.tangerine, 'D+': colors.gradeDistribution.dplus,
D: colors.tangerine, D: colors.gradeDistribution.d,
'D-': colors.tangerine, 'D-': colors.gradeDistribution.dminus,
F: colors.speedway_brick, F: colors.gradeDistribution.f,
}; };
interface State { interface State {