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,