Merge pull request #2350 from Devansh633/master

fix: Remove duplicate color names #2335

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,

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,
 };

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}`,
         }}
       />
     </div>

src/layout/Header.jsx

@@ -43,7 +43,7 @@ export default function Header() {
     <>
       <div
         style={{
-          backgroundColor: style.colors.BLUE_PRIMARY,
+          backgroundColor: style.colors.BLUE,
           width: "100vw",
           height: style.spacing.HEADER_HEIGHT,
           display: "flex",
@@ -239,7 +239,7 @@ function LoginButton() {
         (e.currentTarget.style.backgroundColor = style.colors.DARK_BLUE_HOVER)
       }
       onMouseOut={(e) =>
-        (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

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",

src/layout/PageHeader.jsx

@@ -45,7 +45,7 @@ export default function PageHeader({
         >
           <h2
             style={{
-              color: style.colors.BLUE_PRIMARY,
+              color: style.colors.BLUE,
             }}
           >
             {title}

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;
   }

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}`,
         }}
       />
     </div>

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}`,
           }}
         />
       </form>

src/pages/About.jsx

@@ -31,7 +31,7 @@ export default function About() {
             <Link
               to={`/${countryId}/jobs`}
               style={{
-                color: style.colors.BLUE_PRIMARY,
+                color: style.colors.BLUE,
                 textDecoration: "underline",
               }}
             >
@@ -45,14 +45,14 @@ export default function About() {
             return <Bio key={index} member={founders[founder]} />;
           })}
         </Section>
-        <Section backgroundColor={style.colors.BLUE_PRIMARY}>
+        <Section backgroundColor={style.colors.BLUE}>
           <h2 style={{ color: style.colors.WHITE }}>Team</h2>
           {Object.keys(staff).map((member, index) => {
             return <InvertedBio key={index} member={staff[member]} />;
           })}
         </Section>
         <div style={{ display: "none" }}>
-          <Section backgroundColor={style.colors.BLUE_PRIMARY}>
+          <Section backgroundColor={style.colors.BLUE}>
             <h2 style={{ color: style.colors.WHITE }}>Advisory board</h2>
             <InvertedBio member={advisors.tim_shaw} />
             <InvertedBio member={advisors.damola_ogundipe} />

src/pages/BlogPage.jsx

@@ -464,7 +464,7 @@ function Authorship({ post }) {
   const countryId = useCountryId();
   const authorNames = post.authors.map((author) => (
     <nobr key={author}>
-      <span style={{ color: style.colors.BLUE_PRIMARY }}>
+      <span style={{ color: style.colors.BLUE }}>
         <Link
           to={`/${countryId}/research?authors=${author}`}
           className="highlighted-link"
@@ -526,7 +526,7 @@ function AuthorSection({ post }) {
         <p style={{ paddingTop: 5 }}>
           <span
             className="spaced-sans-serif"
-            style={{ color: style.colors.BLUE_PRIMARY }}
+            style={{ color: style.colors.BLUE }}
           >
             <Link
               to={`/${countryId}/research?authors=${author}`}
@@ -581,7 +581,7 @@ function MoreOn({ post }) {
     <>
       <p
         className="spaced-sans-serif"
-        style={{ color: style.colors.BLUE_PRIMARY, zIndex: -1 }}
+        style={{ color: style.colors.BLUE, zIndex: -1 }}
       >
         More on
       </p>

src/pages/Donate.jsx

@@ -67,10 +67,7 @@ export default function Donate() {
         </Section>
 
         {/* Donate Online Section */}
-        <Section
-          backgroundColor={style.colors.BLUE_PRIMARY}
-          title="How to Donate"
-        >
+        <Section backgroundColor={style.colors.BLUE} title="How to Donate">
           <div
             style={{
               display: "flex",

src/pages/UserProfilePage.jsx

@@ -704,7 +704,7 @@ function PublicPrivateSwitch(props) {
         padding: 0,
         display: "inline",
         appearance: "none",
-        color: style.colors.BLUE_PRIMARY,
+        color: style.colors.BLUE,
         gridColumn: "1 / -1",
         width: "max-content",
         marginTop: 5,
@@ -714,7 +714,7 @@ function PublicPrivateSwitch(props) {
         style={{
           marginBottom: 0,
           textDecorationLine: "underline",
-          textDecorationColor: style.colors.BLUE_PRIMARY,
+          textDecorationColor: style.colors.BLUE,
         }}
       >
         {dispState === STATES.OWN_PROFILE

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.

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
     </a>

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,

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",

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",

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,