From ad004d2fbfd7e3f71bad32992fc3458aeb2f344c Mon Sep 17 00:00:00 2001
From: Sean Marcia <seanmarcia@github.com>
Date: Tue, 1 Apr 2025 23:03:07 -0400
Subject: [PATCH] Revert "Dark Mode issue#157"

---
 components/ColorStyles.tsx              | 29 ----------------------
 components/Header/Header.module.scss    | 11 +++------
 components/Header/Header.tsx            | 30 ++++++++++-------------
 components/Header/ThemeToggleButton.tsx | 24 -------------------
 components/LanguageFilter.tsx           | 14 ++---------
 components/SDGFilter.tsx                |  2 --
 context/ThemeContext.tsx                | 28 ----------------------
 package-lock.json                       | 19 ---------------
 package.json                            |  1 -
 pages/_app.tsx                          | 30 +++++++----------------
 styles/globals.scss                     | 32 +++++++++++--------------
 11 files changed, 40 insertions(+), 180 deletions(-)
 delete mode 100644 components/ColorStyles.tsx
 delete mode 100644 components/Header/ThemeToggleButton.tsx
 delete mode 100644 context/ThemeContext.tsx

diff --git a/components/ColorStyles.tsx b/components/ColorStyles.tsx
deleted file mode 100644
index 55dbdccb..00000000
--- a/components/ColorStyles.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { StylesConfig } from "react-select";
-
-export const ColorStyles: StylesConfig = {
-  control: (styles) => ({ ...styles, backgroundColor: "var(--brand-color-canvas-default)" }),
-  option: (styles, { isDisabled, isFocused, isSelected }) => {
-    return {
-      ...styles,
-      backgroundColor: isDisabled
-        ? undefined
-        : isSelected
-          ? "var(--brand-color-text-subtle)"
-          : isFocused
-            ? "var(--brand-color-focus)"
-            : "var(--brand-color-canvas-default)",
-      color: isDisabled ? "var(--brand-color-text-muted)" : "var(--brand-color-text-default)",
-      cursor: isDisabled ? "not-allowed" : "default",
-
-      ":active": {
-        ...styles[":active"],
-        backgroundColor: !isDisabled ? "var(--brand-color-focus)" : undefined
-      }
-    };
-  },
-  menu: (styles) => ({
-    ...styles,
-    backgroundColor: "var(--brand-color-canvas-default)",
-    border: "1px solid var(--brand-color-border-default)"
-  })
-};
diff --git a/components/Header/Header.module.scss b/components/Header/Header.module.scss
index a983cc77..df02e279 100644
--- a/components/Header/Header.module.scss
+++ b/components/Header/Header.module.scss
@@ -1,5 +1,6 @@
+
 .siteHeader {
-  background: #26292e;
+  background: #26292E;
 
   > div {
     height: 72px;
@@ -12,13 +13,7 @@
     margin: 0 auto;
   }
 
-  > div > div {
-    display: flex;
-    align-items: center;
-    grid-gap: 10px;
-  }
-
-  @media (max-width: 800px) {
+  @media(max-width: 800px) {
     .hideSm {
       display: none;
     }
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
index 6abaa5fc..46179483 100644
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@@ -1,13 +1,12 @@
 import styles from "./Header.module.scss";
-import Link from "next/link";
-import Image from "next/image";
-import { Button } from "@primer/react-brand";
-import { ThemeToggleButton } from "./ThemeToggleButton";
+import Link from 'next/link';
+import Image from 'next/image';
+import {Button} from '@primer/react-brand';
 
 export const Header = () => {
   return (
     <>
-      <header className={styles.siteHeader}>
+      <header className={styles.siteHeader} data-color-mode="dark">
         <div>
           <Link href="/" className={styles.homeLink}>
             <Image
@@ -17,18 +16,15 @@ export const Header = () => {
               alt="For Good First Issue logo"
             />
           </Link>
-          <div>
-            <Button
-              variant="primary"
-              as="a"
-              href="https://github.com/rubyforgood/happycommits/issues/new?assignees=&labels=💪+New+Project&projects=&template=suggest_project.yml&title=%5BNew+Project%5D%3A+%3Ctitle%3E"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span className={styles.btnText}>Recommend a project</span>
-            </Button>
-            <ThemeToggleButton />
-          </div>
+          <Button
+            variant="primary"
+            as="a"
+            href="https://github.com/rubyforgood/happycommits/issues/new?assignees=&labels=💪+New+Project&projects=&template=suggest_project.yml&title=%5BNew+Project%5D%3A+%3Ctitle%3E"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className={styles.btnText}>Recommend a project</span>
+          </Button>
         </div>
       </header>
     </>
diff --git a/components/Header/ThemeToggleButton.tsx b/components/Header/ThemeToggleButton.tsx
deleted file mode 100644
index a1b19f9f..00000000
--- a/components/Header/ThemeToggleButton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { useTheme } from "../../context/ThemeContext";
-import { SunIcon } from "@primer/octicons-react";
-import { MoonIcon } from "@primer/octicons-react";
-
-import { Button } from "@primer/react-brand";
-
-export const ThemeToggleButton = () => {
-  const { colorMode, toggleColorMode } = useTheme();
-
-  return (
-    <>
-      <Button
-        variant="subtle"
-        size="medium"
-        onClick={toggleColorMode}
-        hasArrow={false}
-        colorMode={colorMode}
-      >
-        {colorMode === "light" ? <MoonIcon size={24} fill="#fff" /> : <SunIcon size={24} />}
-      </Button>
-    </>
-  );
-};
diff --git a/components/LanguageFilter.tsx b/components/LanguageFilter.tsx
index 39555611..6c99a571 100644
--- a/components/LanguageFilter.tsx
+++ b/components/LanguageFilter.tsx
@@ -1,5 +1,4 @@
 import Select from "react-select";
-import { ColorStyles } from "./ColorStyles";
 
 type LanguageFilterProps = {
   setSelectedLanguages: (languages: string[]) => void;
@@ -11,18 +10,9 @@ export const LanguageFilter = ({ setSelectedLanguages, languageOptions }: Langua
     <>
       <div>
         <label className="label">Language</label>
-        <Select
-          styles={ColorStyles}
-          isMulti
-          closeMenuOnSelect={false}
-          className=""
-          onChange={(selectedOptions) =>
-            setSelectedLanguages(selectedOptions.map((option) => option.value))
-          }
-          options={languageOptions}
-          classNamePrefix="select"
-        />
+        <Select isMulti closeMenuOnSelect={false} className="" onChange={(selectedOptions) => setSelectedLanguages(selectedOptions.map((option) => option.value))} options={languageOptions} classNamePrefix="select" />
       </div>
     </>
+
   );
 };
diff --git a/components/SDGFilter.tsx b/components/SDGFilter.tsx
index 1dda649f..678bbaec 100644
--- a/components/SDGFilter.tsx
+++ b/components/SDGFilter.tsx
@@ -1,5 +1,4 @@
 import Select from "react-select";
-import { ColorStyles } from "./ColorStyles";
 
 type SDGFilterProps = {
   setSelectedTopics: (topics: string[]) => void;
@@ -14,7 +13,6 @@ export const SDGFilter = ({ setSelectedTopics, topicOptions }: SDGFilterProps) =
         <Select
           isMulti
           className=""
-          styles={ColorStyles}
           options={topicOptions}
           getOptionLabel={(option) => option.label}
           getOptionValue={(option) => option.value ?? ""}
diff --git a/context/ThemeContext.tsx b/context/ThemeContext.tsx
deleted file mode 100644
index 78521d7b..00000000
--- a/context/ThemeContext.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-
-interface ThemeContextType {
-  colorMode: "light" | "dark";
-  toggleColorMode: () => void;
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
-export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [colorMode, setColorMode] = useState<"light" | "dark">("light");
-
-  const toggleColorMode = () => {
-    setColorMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
-  };
-
-  return (
-    <ThemeContext.Provider value={{ colorMode, toggleColorMode }}>{children}</ThemeContext.Provider>
-  );
-};
-
-export const useTheme = () => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
-};
diff --git a/package-lock.json b/package-lock.json
index f5c6e500..fa3660d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,6 @@
         "@fortawesome/free-regular-svg-icons": "^6.5.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/react-fontawesome": "^0.2.1",
-        "@primer/octicons-react": "^19.15.0",
         "@primer/react-brand": "^0.44.1",
         "@types/node": "20.13.0",
         "@types/react": "^18.2.0",
@@ -1701,18 +1700,6 @@
       "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.0.tgz",
       "integrity": "sha512-ZUfhWVY4ZBKc2Fh3fIa2Qwwa3SnOi914lY5wcmN+UNtsBxeXsjWNwpohJbwRwWZm+nJ3C1n9qJFWpHuBlDVU1A=="
     },
-    "node_modules/@primer/octicons-react": {
-      "version": "19.15.0",
-      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-19.15.0.tgz",
-      "integrity": "sha512-EwRnvR5bK44CoLo/Fq8cQrHzuWJf3FQb5jAoA0pacbCNOMsFiX5hXUVKSd/men1s9qEWNP2Hhthlt+bi8x4uzA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "peerDependencies": {
-        "react": ">=16.3"
-      }
-    },
     "node_modules/@primer/react-brand": {
       "version": "0.44.1",
       "resolved": "https://registry.npmjs.org/@primer/react-brand/-/react-brand-0.44.1.tgz",
@@ -8321,12 +8308,6 @@
       "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.8.0.tgz",
       "integrity": "sha512-ZUfhWVY4ZBKc2Fh3fIa2Qwwa3SnOi914lY5wcmN+UNtsBxeXsjWNwpohJbwRwWZm+nJ3C1n9qJFWpHuBlDVU1A=="
     },
-    "@primer/octicons-react": {
-      "version": "19.15.0",
-      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-19.15.0.tgz",
-      "integrity": "sha512-EwRnvR5bK44CoLo/Fq8cQrHzuWJf3FQb5jAoA0pacbCNOMsFiX5hXUVKSd/men1s9qEWNP2Hhthlt+bi8x4uzA==",
-      "requires": {}
-    },
     "@primer/react-brand": {
       "version": "0.44.1",
       "resolved": "https://registry.npmjs.org/@primer/react-brand/-/react-brand-0.44.1.tgz",
diff --git a/package.json b/package.json
index 0161c3d9..abe94d87 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,6 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.1",
-    "@primer/octicons-react": "^19.15.0",
     "@primer/react-brand": "^0.44.1",
     "@types/node": "20.13.0",
     "@types/react": "^18.2.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index d47f28d9..8f910dfb 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,21 +1,19 @@
-import "@primer/react-brand/lib/css/main.css";
-import "@primer/react-brand/fonts/fonts.css";
+import '@primer/react-brand/lib/css/main.css';
+import '@primer/react-brand/fonts/fonts.css';
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import { Layout } from "../components/Layout";
 import { AppDataProvider } from "../context/AppDataContext";
 import "../styles/globals.scss";
-import { ThemeProvider as PrimerThemeProvider } from "@primer/react-brand";
-import { ThemeProvider, useTheme } from "../context/ThemeContext";
+import {ThemeProvider} from '@primer/react-brand'
 
-function AppWithTheme({ Component, pageProps }: AppProps) {
-  const { colorMode } = useTheme();
+// Fontawesome and TailwindCSS related settings
+//config.autoAddCss = false;
 
+// Entry point for the app
+export default function App({ Component, pageProps }: AppProps) {
   return (
-    <PrimerThemeProvider
-      colorMode={colorMode}
-      style={{ backgroundColor: "var(--brand-color-canvas-default)" }}
-    >
+    <ThemeProvider>
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
@@ -26,18 +24,6 @@ function AppWithTheme({ Component, pageProps }: AppProps) {
           </Layout>
         </main>
       </AppDataProvider>
-    </PrimerThemeProvider>
-  );
-}
-
-// Fontawesome and TailwindCSS related settings
-//config.autoAddCss = false;
-
-// Entry point for the app
-export default function App(props: AppProps) {
-  return (
-    <ThemeProvider>
-      <AppWithTheme {...props} />
     </ThemeProvider>
   );
 }
diff --git a/styles/globals.scss b/styles/globals.scss
index 29d0d896..71566c95 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -26,7 +26,7 @@ base, html {
 
 .search-form svg {
   position: relative;
-  color: var(--brand-color-text-default);
+  color: var(--light-text-secondary, #57606A);
   position: absolute;
   left: 12px;
   z-index: 2;
@@ -37,9 +37,9 @@ base, html {
 .search-form input {
   position: relative;
   border-radius: 100px;
-  border: 1px solid var(--brand-color-border-muted);
-  background: var(--brand-color-canvas-default);
-  color: var(--brand-color-text-default);
+  border: 1px solid var(--light-border, #B7BFC7);
+  background: var(--light-bg-primary, #FFF);
+  color: var(--light-text-secondary, #57606A);
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
@@ -50,7 +50,6 @@ base, html {
 }
 
 .label {
-  color: var(--brand-color-text-default);
   font-size: 14px;
   font-weight: 500;
 }
@@ -87,10 +86,11 @@ base, html {
 }
 
 .repo-item {
-  background: var(--brand-color-canvas-default);
+  background: white;
   border-radius: 6px;
-  border: 1px solid var(--brand-color-border-muted);
-  background: var(--brand-color-canvas-default);
+  border: 1px solid var(--light-border, #B7BFC7);
+  background: var(--light-bg-primary, #FFF);
+  box-shadow: 0px 2.76726px 2.21381px 0px rgba(0, 0, 0, 0.07), 0px 6.6501px 5.32008px 0px rgba(0, 0, 0, 0.04), 0px 12.52155px 10.01724px 0px rgba(0, 0, 0, 0.03), 0px 22.33631px 17.86905px 0px rgba(0, 0, 0, 0.03), 0px 41.77761px 33.42209px 0px rgba(0, 0, 0, 0.02), 0px 100px 80px 0px rgba(0, 0, 0, 0.02);
   margin-bottom: 32px;
 
   padding: 24px 16px;
@@ -122,7 +122,7 @@ base, html {
 
   h3 {
     display: flex;
-    color: var(--brand-color-focus);
+    color: #096BDE;
     font-size: 16px;
     line-height: 1.5;
     font-weight: 400;
@@ -135,13 +135,10 @@ base, html {
       font-size: 24px;
     }
   }
-  span {
-    color: var(--brand-color-text-subtle);
-  }
 }
 
 .repo-item__desc {
-  color: var(--brand-color-text-default);
+  color: var(--light-text-secondary, #57606A);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -156,7 +153,7 @@ base, html {
 .repo-item__meta {
   display: flex;
   grid-gap: 16px;
-  color: var(--brand-color-neutral-emphasis);
+  color: var(--light-text-secondary, #57606A);
   margin-top: 16px;
   font-size: 14px;
   flex-wrap: wrap;
@@ -168,7 +165,7 @@ base, html {
 
     span {
       font-weight: 600;
-      color: var(--brand-color-text-subtle);
+      color: #24292F;
     }
   }
 }
@@ -192,7 +189,7 @@ base, html {
   grid-gap: 12px;
   width: 100%;
   padding: 0;
-  color: var(--brand-color-text-subtle);
+  color: var(--light-text-secondary, #57606A);
   font-size: 12px;
   border-top: 1px solid #B7BFC7;
   padding-top: 16px;
@@ -203,13 +200,12 @@ base, html {
     grid-gap: 8px;
 
     span {
-      color: var(--brand-color-text-default);
       min-width: 44px;
     }
 
     a {
       text-decoration: none;
-      color: var(--brand-color-text-default);
+      color: var(--light-text-secondary, #57606A);
     }
 
     @media(min-width: 1012px) {