www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Changed academic average bar graph colors #160

Merged
dlslo merged 2 commits from darren/change-graph-colors into main 2023-02-04 16:39:17 -05:00
Conversation 1 Commits 2 Files Changed 3 +19 -2
3 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages/_app.css
View File

@ -10,6 +10,7 @@ body {
--lighter-pink: #FFE7E7;
--orange: #F5917B;
--light-orange: #FFC4A9;
--lighter-orange: #ffddcd;
--navy: #252D41;
--light-navy: #354265;
--dark-navy: #141D34;
@ -36,8 +37,11 @@ body {
--dark--primary-accent: var(--pink);
--dark--primary-accent-light: var(--light-pink);
--dark--primary-accent-lighter: var(--lighter-pink);
--dark--primary-accent-dark: #dc538e;
--dark--primary-accent-darker: #c8417c;
e26chiu commented 2023-02-04 12:45:39 -05:00
Review
Copy Link

Make sure you define the default value for primary-accent-dark and primary-accent-darker in body so that these colours can be properly displayed.

Make sure you define the default value for `primary-accent-dark` and `primary-accent-darker` in body so that these colours can be properly displayed.
--dark--secondary-accent: var(--orange);
--dark--secondary-accent-light: var(--light-orange);
--dark--secondary-accent-lighter: var(--lighter-orange);
--dark--translucent-accent: rgba(239, 131, 157, 0.75);
--dark--primary-heading: #FFC48D;
--dark--secondary-heading: var(--pink);
@ -54,8 +58,11 @@ body {
--primary-accent: var(--dark--primary-accent);
--primary-accent-light: var(--dark--primary-accent-light);
--primary-accent-lighter: var(--dark--primary-accent-lighter);
--primary-accent-dark: var(--dark--primary-accent-dark);
--primary-accent-darker: var(--dark--primary-accent-darker);
--secondary-accent: var(--dark--secondary-accent);
--secondary-accent-light: var(--dark--secondary-accent-light);
--secondary-accent-lighter: var(--dark--secondary-accent-lighter);
--translucent-accent: var(--dark--translucent-accent);
--primary-heading: var(--dark--primary-heading);
--secondary-heading: var(--dark--secondary-heading);

8
pages/academics.tsx
View File

@ -275,9 +275,13 @@ export default function Academics() {
height={400}
keys={A16Keys}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
Color.secondaryAccentLighter,
Color.secondaryAccentLight,
Color.primaryAccentLight,
Color.primaryAccent,
Color.primaryAccentDark,
Color.primaryAccentDarker,
]}
data={A16}
margin={barGraphMargin}

6
utils/Color.ts
View File

@ -5,8 +5,11 @@ const colorNames = [
"primaryAccent",
"primaryAccentLight",
"primaryAccentLighter",
"primaryAccentDark",
"primaryAccentDarker",
"secondaryAccent",
"secondaryAccentLight",
"secondaryAccentLighter",
"primaryHeading",
"secondaryHeading",
"link",
@ -26,8 +29,11 @@ export const Color: { [key in ColorName]: string } = {
primaryAccent: "var(--primary-accent)",
primaryAccentLight: "var(--primary-accent-light)",
primaryAccentLighter: "var(--primary-accent-lighter)",
primaryAccentDark: "var(--primary-accent-dark)",
primaryAccentDarker: "var(--primary-accent-darker)",
secondaryAccent: "var(--secondary-accent)",
secondaryAccentLight: "var(--secondary-accent-light)",
secondaryAccentLighter: "var(--secondary-accent-lighter)",
primaryHeading: "var(--primary-heading)",
secondaryHeading: "var(--secondary-heading)",
link: "var(--link)",