Update logo, align hero banner items, reposition theme toggle (#31)

HydPy · Dec 4, 2024 · aa1a569 · aa1a569
2 parents 31003b4 + f8ce36f
commit aa1a569
Show file tree

Hide file tree

Showing 7 changed files with 215 additions and 137 deletions.
diff --git a/public/images/logo.svg b/public/images/logo.svg
diff --git a/public/images/navbarLogo.svg b/public/images/navbarLogo.svg
diff --git a/src/app/layout.js b/src/app/layout.js
@@ -2,6 +2,7 @@ import './globals.css';
 import { CONFERENCE, ASSETS } from '@/details';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
+import { ThemeToggle } from '@/components/ThemeToggle';
 
 export const metadata = {
   title: CONFERENCE.title,
@@ -20,7 +21,7 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className="flex flex-col min-h-screen bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100">
-        <Header />
+        <Header themeToggle={<ThemeToggle />} />
         <main className="flex-grow">{children}</main>
         <Footer />
       </body>

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -3,11 +3,10 @@ import Image from 'next/image';
 import Link from 'next/link';
 import React, { useState } from 'react';
 import Icon from '@/components/Icon';
-import { ThemeToggle } from '@/components/ThemeToggle';
 
-import { CONFERENCE, NAV_ITEMS, ASSETS } from '@/details';
+import { NAV_ITEMS, ASSETS } from '@/details';
 
-const Header = () => {
+const Header = ({ themeToggle }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [activePage, setActivePage] = useState('/');
 
@@ -35,7 +34,8 @@ const Header = () => {
             height={50}
           />
         </Link>
-        <div className="flex items-center">
+        <div className="flex items-center gap-1">
+          <div className="md:hidden">{themeToggle}</div>
           <button
             data-collapse-toggle="navbar-dropdown"
             type="button"
@@ -49,19 +49,21 @@ const Header = () => {
           </button>
         </div>
         <div
-          className={`${isMenuOpen ? 'block' : 'hidden'
-            } w-full md:block md:w-auto`}
+          className={`${
+            isMenuOpen ? 'block' : 'hidden'
+          } w-full md:block md:w-auto`}
           id="navbar-dropdown"
         >
           <ul className="flex flex-col text-lg p-4 md:p-0 mt-4 md:mt-0 md:flex-row">
             {NAV_ITEMS.map((item, index) => (
               <li key={index}>
                 <Link
                   href={item.path}
-                  className={`block py-2 px-4 mb-1 md:mb-0 rounded  ${activePage === item.path
-                    ? 'text-primary-light-700 dark:text-primary-dark-700'
-                    : 'text-gray-950 dark:text-gray-50'
-                    }`}
+                  className={`block py-2 px-4 mb-1 md:mb-0 rounded  ${
+                    activePage === item.path
+                      ? 'text-primary-light-700 dark:text-primary-dark-700'
+                      : 'text-gray-950 dark:text-gray-50'
+                  }`}
                   aria-current={activePage === item.path ? 'page' : undefined}
                   onClick={() => handleNavItemClick(item)}
                   target={item.target}
@@ -70,14 +72,12 @@ const Header = () => {
                 </Link>
               </li>
             ))}
-            <li>
-              <ThemeToggle />
-            </li>
+            <li className="hidden md:flex">{themeToggle}</li>
           </ul>
         </div>
       </nav>
     </header>
   );
 };
 
-export default Header;
+export default Header;
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -5,34 +5,36 @@ import Icon from '@/components/Icon';
 
 const Hero = () => {
   return (
-    <section className="px-8 py-4 sm:py-8">
-      <div className="flex flex-col items-center">
-        {/*  For SEO */}
-        <h1 className="hidden">{CONFERENCE.title}</h1>
-        <Image
-          src={ASSETS.logoUrl}
-          alt={ASSETS.logoAlt}
-          priority={true}
-          width={600}
-          height={204.4}
-        />
-        <p className="my-6 text-gray-600 dark:text-gray-400 md:text-lg lg:text-1xl">
-          {CONFERENCE.announcement}
-        </p>
-        <div className="flex flex-col sm:flex-row">
-          <Link href={HERO_BANNER.volunteerFormUrl} target="_blank">
-            <button className="inline-flex mt-1 items-center justify-center bg-secondary-light-600 px-5 py-3 font-medium hover:bg-secondary-light-700 text-center text-gray-50 border rounded-lg mr-4">
-              <Icon name="VolunteerActivism" size={20} />
-              <span className="ml-2">BECOME A VOLUNTEER</span>
-            </button>
-          </Link>
-          <Link href={HERO_BANNER.cfpUrl} target="_blank">
-            <button className="inline-flex mt-1 items-center justify-center bg-primary-light-700 px-5 py-3 font-medium hover:bg-primary-light-800 text-center text-gray-50 border rounded-lg">
-              <Icon name="MdCampaign" size={20} />
-              <span className="ml-2">SUBMIT YOUR PROPOSAL</span>
-            </button>
-          </Link>
-        </div>
+    <section className="flex flex-col px-8 items-center justify-center h-[500px] sm:h-[600px]">
+      {/*  For SEO */}
+      <h1 className="hidden">{CONFERENCE.title}</h1>
+      <Image
+        src={ASSETS.logoUrl}
+        alt={ASSETS.logoAlt}
+        priority={true}
+        width={600}
+        height={201}
+      />
+      <p className="my-6 text-center text-gray-600 dark:text-gray-400 md:text-lg lg:text-1xl">
+        {CONFERENCE.announcement}
+      </p>
+      <div className="flex flex-col sm:flex-row">
+        <Link
+          href={HERO_BANNER.volunteerFormUrl}
+          target="_blank"
+          className="flex justify-center"
+        >
+          <button className="inline-flex mt-2 sm:mr-4 bg-secondary-light-600 px-5 py-3 font-medium hover:bg-secondary-light-700 text-gray-50 border rounded-lg">
+            <Icon name="VolunteerActivism" size={20} />
+            <span className="ml-2">BECOME A VOLUNTEER</span>
+          </button>
+        </Link>
+        <Link href={HERO_BANNER.cfpUrl} target="_blank">
+          <button className="inline-flex mt-2 bg-primary-light-700 px-5 py-3 font-medium hover:bg-primary-light-800 text-gray-50 border rounded-lg">
+            <Icon name="MdCampaign" size={20} />
+            <span className="ml-2">SUBMIT YOUR PROPOSAL</span>
+          </button>
+        </Link>
       </div>
     </section>
   );

diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
@@ -3,41 +3,43 @@ import { useState, useEffect } from 'react';
 import Icon from './Icon';
 
 export const ThemeToggle = () => {
-    const [theme, setTheme] = useState(null); // Start with `null` to indicate the theme is loading
+  const [theme, setTheme] = useState(null); // Start with `null` to indicate the theme is loading
 
-    useEffect(() => {
-        // Check initial theme preference
-        const savedTheme = localStorage.getItem('theme');
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  useEffect(() => {
+    // Check initial theme preference
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia(
+      '(prefers-color-scheme: dark)'
+    ).matches;
 
-        const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light');
-        setTheme(initialTheme);
-        document.documentElement.classList.toggle('dark', initialTheme === 'dark');
-    }, []);
+    const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light');
+    setTheme(initialTheme);
+    document.documentElement.classList.toggle('dark', initialTheme === 'dark');
+  }, []);
 
-    const toggleTheme = () => {
-        const newTheme = theme === 'light' ? 'dark' : 'light';
-        setTheme(newTheme);
-        localStorage.setItem('theme', newTheme);
-        document.documentElement.classList.toggle('dark', newTheme === 'dark');
-    };
+  const toggleTheme = () => {
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+    document.documentElement.classList.toggle('dark', newTheme === 'dark');
+  };
 
-    if (theme === null) {
-        // Prevent rendering until theme is determined
-        return null;
-    }
+  if (theme === null) {
+    // Prevent rendering until theme is determined
+    return null;
+  }
 
-    return (
-        <button
-            onClick={toggleTheme}
-            className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
-            aria-label="Toggle theme"
-        >
-            {theme === 'light' ? (
-                <Icon name="Moon" size={24} className="text-gray-800" />
-            ) : (
-                <Icon name="Sun" size={24} className="text-yellow-500" />
-            )}
-        </button>
-    );
+  return (
+    <button
+      onClick={toggleTheme}
+      className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
+      aria-label="Toggle theme"
+    >
+      {theme === 'light' ? (
+        <Icon name="Moon" size={24} className="text-gray-800" />
+      ) : (
+        <Icon name="Sun" size={24} className="text-yellow-500" />
+      )}
+    </button>
+  );
 };
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -122,4 +122,4 @@ module.exports = {
     },
   },
   plugins: [],
-};
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -122,4 +122,4 @@ module.exports = { @@
         },
       },
       plugins: [],
-    };
+    };