From ce1728006d1eee62a2f8a2ed2578abf3d5ab0849 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 10 Nov 2022 18:20:38 +0200
Subject: [PATCH] update (nav): set new color AFTER page load

---
 src/Components/Navbar/Navbar.tsx                |  8 ++++----
 src/features/About/AboutPage.tsx                | 17 ++++++++++++++---
 .../Projects/pages/ExplorePage/ExplorePage.tsx  |  5 +++++
 src/redux/features/ui.slice.ts                  |  7 ++++++-
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx
index 9feab60..c77d6a8 100644
--- a/src/Components/Navbar/Navbar.tsx
+++ b/src/Components/Navbar/Navbar.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, } from "react";
-import { useAppDispatch, useCurrentSection, useMediaQuery, useResizeListener } from "src/utils/hooks";
+import { useAppDispatch, useAppSelector, useCurrentSection, useMediaQuery, useResizeListener } from "src/utils/hooks";
 import { setNavHeight } from "src/redux/features/ui.slice";
 import NavDesktop from "./NavDesktop";
 import { MEDIA_QUERIES } from "src/utils/theme/media_queries";
@@ -15,6 +15,7 @@ export const navLinks = [];
 export default function Navbar() {
 
   const dispatch = useAppDispatch();
+  const theme = useAppSelector(state => state.ui.theme)
 
   const isLargeScreen = useMediaQuery(MEDIA_QUERIES.isLarge)
 
@@ -38,9 +39,8 @@ export default function Navbar() {
 
   const currentSection = useCurrentSection();
 
-  const darkNav = currentSection === 'about'
 
-  const CTA = darkNav ?
+  const CTA = currentSection === 'about' ?
     <Link to={PAGES_ROUTES.projects.default}
       className="font-bold text-center px-12 py-8 rounded-8 text-primary-400 hover:bg-primary-200 hover:bg-opacity-10"
     >Go explore <FiArrowRight className="ml-4" /></Link>
@@ -56,7 +56,7 @@ export default function Navbar() {
   return (
     <div className={`
     sticky top-0 left-0 w-full z-[2010] 
-    ${darkNav ? "bg-gray-900 text-white" : "bg-white text-gray-900"}
+    ${theme === 'dark' ? "bg-gray-900 text-white" : "bg-white text-gray-900"}
     `}>
       <NavDesktop cta={CTA} />
     </div>
diff --git a/src/features/About/AboutPage.tsx b/src/features/About/AboutPage.tsx
index b302bb6..2257e1d 100644
--- a/src/features/About/AboutPage.tsx
+++ b/src/features/About/AboutPage.tsx
@@ -1,18 +1,29 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Helmet } from 'react-helmet'
 import Header from './components/Header'
 import MadeBy from './components/MadeBy'
 import Missions from './components/Missions'
+import { setTheme } from 'src/redux/features/ui.slice'
+import { useAppDispatch } from 'src/utils/hooks'
 
 export default function AboutPage() {
+
+    const dispatch = useAppDispatch()
+
+    useEffect(() => {
+        dispatch(setTheme('dark'))
+        return () => {
+            dispatch(setTheme('light'))
+        }
+    }, [dispatch])
+
+
     return (
         <>
             <Helmet>
                 <title>{`About Lightning Landscape`}</title>
                 <meta property="og:title" content={`About Lightning Landscape`} />
             </Helmet>
-
-
             <div className="page-container bg-gray-900 min-h-screen overflow-hidden relative isolate" style={{ "--maxPageWidth": "1200px" } as any}>
                 <Header />
                 <Missions />
diff --git a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
index 92e9410..64a8899 100644
--- a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
+++ b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
@@ -18,6 +18,7 @@ import { ProjectsFilters } from './Filters/FiltersModal';
 import { useUpdateUrlWithFilters } from './helpers';
 import { withBasicProvider } from 'src/utils/helperFunctions';
 import { ProjectsFiltersProvider, useProjectsFilters } from './filters-context';
+import { setTheme } from 'src/redux/features/ui.slice';
 
 
 function ExplorePage() {
@@ -49,6 +50,10 @@ function ExplorePage() {
 
     useReduxEffect(onFiltersUpdated, UPDATE_FILTERS_ACTION.type);
 
+    useEffect(() => {
+        dispatch(setTheme('light'))
+    }, [dispatch])
+
 
     useEffect(() => {
         setCanFetchMore(true);
diff --git a/src/redux/features/ui.slice.ts b/src/redux/features/ui.slice.ts
index 7ce80c5..57b1896 100644
--- a/src/redux/features/ui.slice.ts
+++ b/src/redux/features/ui.slice.ts
@@ -3,11 +3,13 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 interface StoreState {
   navHeight: number;
   isMobileScreen: boolean;
+  theme: 'light' | 'dark'
 }
 
 const initialState = {
   navHeight: 0,
   isMobileScreen: /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || window.innerWidth < 480,
+  theme: "light"
 } as StoreState;
 
 
@@ -22,9 +24,12 @@ export const uiSlice = createSlice({
     setIsMobileScreen(state, action: PayloadAction<boolean>) {
       state.isMobileScreen = action.payload;
     },
+    setTheme(state, action: PayloadAction<StoreState['theme']>) {
+      state.theme = action.payload;
+    }
   },
 });
 
-export const { setNavHeight, setIsMobileScreen } = uiSlice.actions;
+export const { setNavHeight, setIsMobileScreen, setTheme } = uiSlice.actions;
 
 export default uiSlice.reducer;