Merged development code to main iste repo

public/blog.css

@@ -11,14 +11,15 @@
   flex: 1 0 25rem;
   max-width: 30rem;
   max-height: 50rem;
+  border-radius: 5px;
   transition: 0.3s;
-  box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem #bbbbbb;
+  box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem var(--shadow-primary);
 }
 
 .blogCard:hover {
-  transition: ease 0.5s;
+  transition: ease 0.3s;
   transform: translateY(-0.5rem);
-  box-shadow: 0.5rem 0.75rem 1.5rem var(--color-text-tertiary);
+  box-shadow: 0.3rem 0.3rem .5rem var(--shadow-secondary);
   background-image: linear-gradient(
     to right,
     #8f4dc5,
@@ -100,7 +101,7 @@
   padding: 4px 8px;
   border-radius: 4px;
   margin-right: 6px;
-  box-shadow: 1px 1px 1px 1px var(--body-darker-background);
+  box-shadow: 1px 1px 1px 1px var(--shadow-primary);
   transition: 0.1s;
 }
 

public/footer.css

@@ -13,28 +13,35 @@
 
 .sb__footer-links {
   display: flex;
-  justify-content: space-around;
-  align-items: flex-start;
-  flex-direction: row;
   flex-wrap: wrap;
+  text-align: center;
   width: 100%;
-  text-align: left;
+}
+
+.box2{
+  margin: auto;
 }
 
 .sb__footer-isteLogo{
   width: 100px;
 }
 
 .sb__footer-links-div {
-  width: fit-content;
+  display: flex;
+  flex: 1;
+  /* flex-direction: column; */
+  justify-content: center;
+  align-items: center;
   text-align: center;
+  width: fit-content;
   margin: 1rem;
-  display: flex;
-  justify-content: flex-start;
-  flex-direction: column;
   color: var(--body_color);
 }
 
+.sb__footer-links-div>p{
+  margin: auto;
+}
+
 .footer a {
   color: var(--body_color);
   text-decoration: none;
@@ -46,13 +53,13 @@
 }
 
 .sb__footer-links-div h4 {
-  font-size: 14px;
+  font-size: 17px;
   line-height: 17px;
   margin-bottom: 0.9rem;
 }
 .sb__footer-links-div p {
-  font-size: 12px;
-  line-height: 15px;
+  font-size: 14px;
+  line-height: 18px;
   margin: 0 0.5rem 0;
 }
 
@@ -102,5 +109,6 @@ hr {
     margin: auto;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
   }
 }

public/home.css

@@ -285,9 +285,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 50%;
+  border-radius: 80%;
   font-size: 22px;
 }
+
 .contact-container .contactInfo .box .text {
   display: flex;
   margin-left: 20px;
@@ -304,10 +305,13 @@
 .contactForm {
   width: 40%;
   padding: 40px;
-  box-shadow: 0.5rem 0.25rem 1rem var(--color-text-tertiary);
+  border-radius: 3px;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
   /* background: var(--body_color); */
 }
 
+
+
 .contactForm h2 {
   font-size: 30px;
   /* color: var(--color-text-secondary); */

public/styles.css

@@ -22,7 +22,9 @@
   --color-green: #00d085;
   --color-white-text: #dddddd;
   --dark-body-background: #131418;
-
+  --shadow-primary: #bbbbbb;
+  --shadow-secondary: #afafaf;
+
   /* Theme Colors */
   --body-background: #efefef;
   --footer-background: #ddd;
@@ -43,7 +45,10 @@
   /* --body-background : #000; */
   --footer-background: #222;
   --body-darker-background: #555;
-  --navbar-background: #1e1e1e;
+  --navbar-background: #231616;
+  --shadow-primary: #141313;
+  --shadow-secondary: #141313;
+
   --body_color: #fff;
   /* --link-color : #129eeb; */
   --link-color: #8428df;

src/App.js

@@ -10,20 +10,21 @@ import Preloader from "./components/Preloader";
 // eslint-disable-next-line
 
 const App = () => {
-  const [theme, setTheme] = useState("light");
-
-  const toggleTheme = () => {
-    setTheme(theme === "light" ? "dark" : "light");
-  };
+  const initialTheme = localStorage.getItem("selectedTheme");
+  console.log(`Found ${initialTheme} mode in local storage, setting theme that only.`);
+  const [theme, setTheme] = useState(initialTheme);
+  const setThemeOuter = (currentTheme)=>{
+    setTheme(currentTheme)
+  }
   return (
     <>
       <Preloader />
       <AnimatedCursor />
       <HashRouter>
         <Headroom>
-          <Navbar theme={theme} toggleTheme={toggleTheme} />
+          <Navbar setThemeParent={setThemeOuter} useTheme={theme}/>
         </Headroom>
-        <AnimatedRoutes />
+        <AnimatedRoutes useTheme={theme}/>
       </HashRouter>
     </>
   );

src/components/AnimatedRoutes.jsx

@@ -9,15 +9,15 @@ import BlogDetails from "./blogDetails";
 import GalleryPageWrapper from "./GalleryPageWrapper";
 import { AnimatePresence } from "framer-motion";
 
-const AnimatedRoutes = () => {
+const AnimatedRoutes = (currentTheme) => {
   const location = useLocation();
   return (
     <AnimatePresence>
       <Routes location={location} key={location.pathname}>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/events" element={<EventPage />} />
+        <Route path="/" element={<HomePage useTheme={currentTheme}/>} />
+        <Route path="/events" element={<EventPage useTheme={currentTheme}/>} />
         <Route path="/members" element={<MembersPage />} />
-        <Route path="/blogs" element={<BlogPage />} />
+        <Route path="/blogs" element={<BlogPage useTheme={currentTheme}/>} />
         <Route path="/blog-details" element={<BlogDetails />} />
         <Route
           path="/gallery"

src/components/DarkMode/DarkMode.js

@@ -1,28 +1,25 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { ReactComponent as Sun } from "./Sun.svg";
 import { ReactComponent as Moon } from "./Moon.svg";
 import "./DarkMode.css";
 
-const DarkMode = ({ theme, toggleTheme }) => {
-  useEffect(() => {
-    const selectedTheme = localStorage.getItem("selectedTheme");
-    if (selectedTheme === "dark") {
-      setDarkMode();
-    }
-    // eslint-disable-next-line
-  }, []);
-
+  const DarkMode = ({ setThemeNavbar, setTheme}) => {
+  const theme = localStorage.getItem("selectedTheme");
+  console.log(`Theme from the darkMode file is ${setTheme} mode`);
   const setDarkMode = () => {
     document.querySelector("body").setAttribute("data-theme", "dark");
     localStorage.setItem("selectedTheme", "dark");
-    toggleTheme();
+    setThemeNavbar("dark");
   };
 
   const setLightMode = () => {
     document.querySelector("body").setAttribute("data-theme", "light");
     localStorage.setItem("selectedTheme", "light");
-    toggleTheme();
+    setThemeNavbar("light");
   };
+
+  // Initializing the theme when loading the page
+  theme === "light" ? setLightMode() : setDarkMode()
 
   const handleToggle = () => {
     if (theme === "light") setDarkMode();

src/components/blogCards.jsx

@@ -41,4 +41,3 @@ export function BlogCard(props) {
     </div>
   );
 }
-