Merge pull request #275 from github/revert-246-feature/dark-mode

Revert "Dark Mode issue#157"

Author: seanmarcia

components/ColorStyles.tsx

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

components/Header/Header.module.scss

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

components/Header/Header.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>
     </>
+
   );
 };

components/Header/ThemeToggleButton.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 ?? ""}

components/LanguageFilter.tsx

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

components/SDGFilter.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>
   );
 }