Merge pull request #241 from coder12git/sistent-site-draft

Fix Sistent Website build failure
layer5io · Nov 7, 2023 · bcb52f1 · bcb52f1
2 parents 0116c81 + b29f6e0
commit bcb52f1
Show file tree

Hide file tree

Showing 14 changed files with 202 additions and 174 deletions.
diff --git a/site/gatsby-browser.js b/site/gatsby-browser.js
@@ -1 +1,7 @@
+import React from 'react'
 import "./src/styles/global.css"
+import { ThemeProvider } from "./src/components/Theme"
+
+export const wrapRootElement = ({ element }) => (
+    <ThemeProvider>{element}</ThemeProvider>
+)
diff --git a/site/gatsby-config.js b/site/gatsby-config.js
@@ -6,5 +6,5 @@ module.exports = {
     title: `Sistent Design System | Layer5`,
     siteUrl: `https://design.layer5.io`
   },
-  plugins: ["gatsby-plugin-postcss", 'gatsby-plugin-dark-mode']
+  plugins: ["gatsby-plugin-postcss"]
 };
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -17,7 +17,6 @@
   "dependencies": {
     "autoprefixer": "^10.4.16",
     "gatsby": "^5.12.4",
-    "gatsby-plugin-dark-mode": "^1.1.2",
     "gatsby-plugin-postcss": "^6.12.0",
     "postcss": "^8.4.31",
     "react": "^18.2.0",

diff --git a/site/src/assets/images/ChevronDark.svg b/site/src/assets/images/ChevronDark.svg
diff --git a/site/src/assets/images/ChevronDark.svg:Zone.Identifier b/site/src/assets/images/ChevronDark.svg:Zone.Identifier
diff --git a/site/src/assets/images/Weather.svg b/site/src/assets/images/Weather.svg
diff --git a/site/src/assets/images/WeatherDark.svg b/site/src/assets/images/WeatherDark.svg
diff --git a/site/src/components/Navigation/index.js b/site/src/components/Navigation/index.js
@@ -1,11 +1,15 @@
-import React from "react";
+import React, {useContext} from "react";
 import Search from '../../assets/images/Search.svg';
 import SearchDark from "../../assets/images/SearchDark.svg";
-import ThemeToggle from "../Theme";
+import ThemeContext from "../Theme";
+import Weather from '../../assets/images/Weather.svg';
+import WeatherDark from '../../assets/images/WeatherDark.svg';
 
-const Navbar = ()=>{
-   return (
-    <>
+const Navbar = () => {
+    const theme = useContext(ThemeContext)
+
+    return (
+                <>
     <div className=" w-[1440px] h-[100px] px-10 py-6 bg-background-default justify-between items-center inline-flex">
     <div className="h-12 justify-center items-center gap-4 flex">
         <div className="w-12 h-12 relative rounded-lg border border-border-strong" />
@@ -24,16 +28,16 @@ const Navbar = ()=>{
             </div>
         </div>
         <div className="justify-end items-center gap-8 flex">
-            <div className="w-6 h-6 relative"><img src={localStorage.getItem('theme')==='dark'? SearchDark : Search}/></div>
+            <div className="w-6 h-6 relative"><img src={theme.dark? SearchDark : Search }/></div>
             <div className="w-6 h-6 justify-center items-center flex">
-                <div className="w-6 h-6 relative flex-col justify-start items-start flex"><ThemeToggle/></div>
+                <div className="w-6 h-6 relative flex-col justify-start items-start flex"><img src={theme.dark? WeatherDark : Weather } onClick={theme.toggleDark}/></div>
             </div>
         </div>
     </div>
 </div>
 <hr className="border-border-default border-solid"/>
 </>
-   )
+    )
 };
 
 export default Navbar;