diff --git a/src/controls/Button.jsx b/src/controls/Button.jsx index 8b8916540..f1da57e65 100644 --- a/src/controls/Button.jsx +++ b/src/controls/Button.jsx @@ -17,8 +17,8 @@ export const buttonStyles = { }, primaryBlue: { standard: { - backgroundColor: colors.BLUE_PRIMARY, - borderColor: colors.BLUE_PRIMARY, + backgroundColor: colors.BLUE, + borderColor: colors.BLUE, color: colors.WHITE, }, hover: { @@ -42,8 +42,8 @@ export const buttonStyles = { secondaryBlue: { standard: { backgroundColor: "transparent", - borderColor: colors.BLUE_PRIMARY, - color: colors.BLUE_PRIMARY, + borderColor: colors.BLUE, + color: colors.BLUE, }, hover: { backgroundColor: colors.BLUE_PRESSED, diff --git a/src/data/countries.js b/src/data/countries.js index dcd6e6fa5..bd652d604 100644 --- a/src/data/countries.js +++ b/src/data/countries.js @@ -42,7 +42,7 @@ export const COUNTRY_BASELINE_POLICIES = { }; export const STATUS_COLORS = { - OK: colors.BLUE_95, + OK: colors.BLUE_LIGHT, ERROR: colors.DARK_RED, Pending: colors.LIGHT_GRAY, }; diff --git a/src/forms/FormInput.jsx b/src/forms/FormInput.jsx index 9ee3884cd..1effc869a 100644 --- a/src/forms/FormInput.jsx +++ b/src/forms/FormInput.jsx @@ -88,12 +88,12 @@ export default function FormItem(props) { fontSize: 15, fontWeight: 300, padding: 10, - boxShadow: `0px 0px 0px ${style.colors.BLUE_PRIMARY}`, + boxShadow: `0px 0px 0px ${style.colors.BLUE}`, ...inputStyle, }} // While focusing, make the bottom border blue from left to right whileFocus={{ - boxShadow: focusStyle || `0px 5px 0px ${style.colors.BLUE_PRIMARY}`, + boxShadow: focusStyle || `0px 5px 0px ${style.colors.BLUE}`, }} /> diff --git a/src/layout/Header.jsx b/src/layout/Header.jsx index 7b6966d89..fcc71604f 100644 --- a/src/layout/Header.jsx +++ b/src/layout/Header.jsx @@ -43,7 +43,7 @@ export default function Header() { <>
- (e.currentTarget.style.backgroundColor = style.colors.BLUE_PRIMARY) + (e.currentTarget.style.backgroundColor = style.colors.BLUE) } > {isAuthenticated && user && user.picture ? ( @@ -429,7 +429,7 @@ function PageLinks() { cursor: "pointer", }} whileHover={{ - color: style.colors.BLUE_PRIMARY, + color: style.colors.BLUE, }} transition={{ duration: 0.2, @@ -459,7 +459,7 @@ function LeftNavigationMenu(props) { left: 0, width: "100vw", height: "100vh", - backgroundColor: style.colors.BLUE_PRIMARY, + backgroundColor: style.colors.BLUE, zIndex: -1, paddingTop: 100, }} @@ -508,7 +508,7 @@ function LeftNavigationMenu(props) { color: style.colors.WHITE, }} whileHover={{ - color: style.colors.BLUE_PRIMARY, + color: style.colors.BLUE, }} animate={ isOpen diff --git a/src/layout/MarkdownFormatter.jsx b/src/layout/MarkdownFormatter.jsx index b46832029..db5a35659 100644 --- a/src/layout/MarkdownFormatter.jsx +++ b/src/layout/MarkdownFormatter.jsx @@ -423,7 +423,7 @@ export function MarkdownFormatter({ markdown, backgroundColor, dict, pSize }) { fontFamily: "Roboto Serif", fontSize: mobile ? 16 : 18, borderBottom: "1px solid black", - backgroundColor: style.colors.BLUE_PRIMARY, + backgroundColor: style.colors.BLUE, textAlign: "center", verticalAlign: "middle", color: "white", diff --git a/src/layout/PageHeader.jsx b/src/layout/PageHeader.jsx index 595b5497d..e26689a0b 100644 --- a/src/layout/PageHeader.jsx +++ b/src/layout/PageHeader.jsx @@ -45,7 +45,7 @@ export default function PageHeader({ >

{title} diff --git a/src/layout/Section.jsx b/src/layout/Section.jsx index 392037427..ad782119b 100644 --- a/src/layout/Section.jsx +++ b/src/layout/Section.jsx @@ -24,9 +24,7 @@ export default function Section({ }[displayCategory]; let titleColor = null; if ( - [style.colors.BLUE_PRIMARY, style.colors.BLUE_PRESSED].includes( - backgroundColor, - ) + [style.colors.BLUE, style.colors.BLUE_PRESSED].includes(backgroundColor) ) { titleColor = style.colors.WHITE; } @@ -87,9 +85,7 @@ export function SectionTop({ height, backgroundColor, title }) { }[displayCategory]; let titleColor = null; if ( - [style.colors.BLUE_PRIMARY, style.colors.BLUE_PRESSED].includes( - backgroundColor, - ) + [style.colors.BLUE, style.colors.BLUE_PRESSED].includes(backgroundColor) ) { titleColor = style.colors.WHITE; } @@ -135,9 +131,7 @@ export function SectionBottom({ height, backgroundColor, children }) { }[displayCategory]; let titleColor = null; if ( - [style.colors.BLUE_PRIMARY, style.colors.BLUE_PRESSED].includes( - backgroundColor, - ) + [style.colors.BLUE, style.colors.BLUE_PRESSED].includes(backgroundColor) ) { titleColor = style.colors.WHITE; } diff --git a/src/layout/SmallForm.jsx b/src/layout/SmallForm.jsx index 851032319..cbe11a64c 100644 --- a/src/layout/SmallForm.jsx +++ b/src/layout/SmallForm.jsx @@ -118,14 +118,14 @@ export default function SmallForm(props) { fontSize: 20, fontWeight: 300, padding: 10, - boxShadow: `0px 0px 0px ${style.colors.BLUE_PRIMARY}`, + boxShadow: `0px 0px 0px ${style.colors.BLUE}`, ...inputStyle, }} // While focussing, make the bottom border blue from left to right whileFocus={{ boxShadow: isFormSubmitted ? `0px 5px 0px ${style.colors.TEAL_ACCENT}` - : `0px 5px 0px ${style.colors.BLUE_PRIMARY}`, + : `0px 5px 0px ${style.colors.BLUE}`, }} />

diff --git a/src/layout/TextBox.jsx b/src/layout/TextBox.jsx index 9fa2b047b..ac67415be 100644 --- a/src/layout/TextBox.jsx +++ b/src/layout/TextBox.jsx @@ -49,11 +49,11 @@ export default function TextBox({ fontSize: fontSize || 20, fontWeight: 300, padding: 10, - boxShadow: `0px 0px 0px ${style.colors.BLUE_PRIMARY}`, + boxShadow: `0px 0px 0px ${style.colors.BLUE}`, }} // While focussing, make the bottom border blue from left to right whileFocus={{ - boxShadow: `0px 5px 0px ${style.colors.BLUE_PRIMARY}`, + boxShadow: `0px 5px 0px ${style.colors.BLUE}`, }} /> diff --git a/src/pages/About.jsx b/src/pages/About.jsx index 2bb423de6..072113377 100644 --- a/src/pages/About.jsx +++ b/src/pages/About.jsx @@ -31,7 +31,7 @@ export default function About() { @@ -45,14 +45,14 @@ export default function About() { return ; })} -
+

Team

{Object.keys(staff).map((member, index) => { return ; })}
-
+

Advisory board

diff --git a/src/pages/BlogPage.jsx b/src/pages/BlogPage.jsx index 2ed7ea059..ddd3afa85 100644 --- a/src/pages/BlogPage.jsx +++ b/src/pages/BlogPage.jsx @@ -464,7 +464,7 @@ function Authorship({ post }) { const countryId = useCountryId(); const authorNames = post.authors.map((author) => ( - +

More on

diff --git a/src/pages/Donate.jsx b/src/pages/Donate.jsx index 80f3885fe..d3434e026 100644 --- a/src/pages/Donate.jsx +++ b/src/pages/Donate.jsx @@ -67,10 +67,7 @@ export default function Donate() {
{/* Donate Online Section */} -
+
{dispState === STATES.OWN_PROFILE diff --git a/src/pages/policy/PolicyRightSidebar.jsx b/src/pages/policy/PolicyRightSidebar.jsx index 005c5a325..f3da96713 100644 --- a/src/pages/policy/PolicyRightSidebar.jsx +++ b/src/pages/policy/PolicyRightSidebar.jsx @@ -307,7 +307,7 @@ function BehavioralResponseToggle(props) { style={{ marginLeft: "5px", textDecoration: "underline", - color: "rgb(84, 140, 190)", // This is BLUE_PRIMARY + 20 for each RGB value, so brighter + color: "rgb(84, 140, 190)", // This is BLUE + 20 for each RGB value, so brighter }} > Learn more. diff --git a/src/pages/policy/output/PolicyReproducibility.jsx b/src/pages/policy/output/PolicyReproducibility.jsx index a616044b4..d19af6a95 100644 --- a/src/pages/policy/output/PolicyReproducibility.jsx +++ b/src/pages/policy/output/PolicyReproducibility.jsx @@ -31,7 +31,7 @@ export default function PolicyReproducibility(props) { href={colabLink} target="_blank" rel="noreferrer" - style={{ color: colors.BLUE_PRIMARY, textDecoration: "underline" }} + style={{ color: colors.BLUE, textDecoration: "underline" }} > Python notebook diff --git a/src/pages/policy/output/decile/IntraDecileImpact.jsx b/src/pages/policy/output/decile/IntraDecileImpact.jsx index b18b95862..26c3db1ca 100644 --- a/src/pages/policy/output/decile/IntraDecileImpact.jsx +++ b/src/pages/policy/output/decile/IntraDecileImpact.jsx @@ -25,7 +25,7 @@ export function ImpactPlot(props) { const colorMap = { "Gain more than 5%": style.colors.BLUE, - "Gain less than 5%": style.colors.BLUE_95, + "Gain less than 5%": style.colors.BLUE_LIGHT, "No change": style.colors.LIGHT_GRAY, "Lose less than 5%": style.colors.MEDIUM_LIGHT_GRAY, "Lose more than 5%": style.colors.DARK_GRAY, diff --git a/src/posts/articles/northern-ireland-feasibility.ipynb b/src/posts/articles/northern-ireland-feasibility.ipynb index b11641103..c18cdb7a6 100644 --- a/src/posts/articles/northern-ireland-feasibility.ipynb +++ b/src/posts/articles/northern-ireland-feasibility.ipynb @@ -91,7 +91,7 @@ " \"Don't know\": WHITE,\n", " \"Neither support nor oppose\": WHITE,\n", " \"Tend to support\": BLUE_LIGHT,\n", - " \"Strongly support\": BLUE_PRIMARY,\n", + " \"Strongly support\": BLUE,\n", " },\n", ")\n", "\n", diff --git a/src/posts/articles/spring-budget-2024.ipynb b/src/posts/articles/spring-budget-2024.ipynb index e98d5f35d..656f2f24c 100644 --- a/src/posts/articles/spring-budget-2024.ipynb +++ b/src/posts/articles/spring-budget-2024.ipynb @@ -1391,7 +1391,7 @@ " barmode=\"group\",\n", " color_discrete_map={\n", " \"1p NI cut\": BLUE_PRESSED,\n", - " \"2p NI cut\": BLUE_PRIMARY,\n", + " \"2p NI cut\": BLUE,\n", " \"2p basic rate cut\": DARK_GRAY,\n", " },\n", " text=\"Text\",\n", diff --git a/src/style/colors.js b/src/style/colors.js index 0c8bc215e..9071c29dc 100644 --- a/src/style/colors.js +++ b/src/style/colors.js @@ -1,10 +1,8 @@ const BLACK = "#000000"; -const BLUE_95 = "#D8E6F3"; const BLUE_98 = "#F7FAFD"; const BLUE = "#2C6496"; const BLUE_LIGHT = "#D8E6F3"; const BLUE_PRESSED = "#17354F"; -const BLUE_PRIMARY = "#2C6496"; const DARK_BLUE_HOVER = "#1d3e5e"; const DARK_GRAY = "#616161"; const DARK_RED = "#b50d0d"; @@ -21,12 +19,10 @@ const WHITE = "#FFFFFF"; const colors = { BLACK, - BLUE_95, BLUE_98, BLUE, BLUE_LIGHT, BLUE_PRESSED, - BLUE_PRIMARY, DARK_BLUE_HOVER, DARK_GRAY, DARK_RED,