Dev/darkmode navbar (#115)

* dark mode on top * get-involved bottom buttons removed & removed dark mode toggle button on the footer * navbar not sticky * Darkmode Toggle now displays at the bottom left for mobile display * Reverted Changes: Darkmode Toggle back to the bottom for all displays * Darkmode button fixed position to the bottom left --------- Co-authored-by: Ashton Michelstein <[email protected]> Co-authored-by: Tess Hacker <[email protected]>
rit-sse · Apr 27, 2024 · 6117002 · 6117002
1 parent d73f723
commit 6117002
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 22 deletions.
diff --git a/next/app/about/get-involved/page.tsx b/next/app/about/get-involved/page.tsx
@@ -39,21 +39,21 @@ export default function GetInvolved() {
                         )
                     }/>
 
-                    <section className="pt-6">
-                        <div className="text-left space-x-5 mt-3 flex">
-                            <h2 className="bg-gradient-to-t from-primary to-secondary bg-clip-text
-                        text-3xl/[3rem] font-extrabold text-transparent sm:text-3xl/[3rem]">COME TO OUR EVENTS!</h2>
-                            <CTAButton href="http://localhost:3000/events" text="Events" />
-                        </div>
-                    </section>
-                    <section className="pt-6">
-                        <div className="text-left space-x-5 mt-3 flex">
-                            <h2 className="bg-gradient-to-t from-primary to-secondary bg-clip-text
-                        text-3xl/[3rem] font-extrabold text-transparent sm:text-3xl/[3rem]">TALK TO US!</h2>
-                            <CTAButton href="https://rit-sse.slack.com/" text="Join our Slack" />
-                        </div>
-                    </section>
-                    </div>
+                      <section className="pt-6">
+                          <div className="text-left space-x-5 mt-3 flex">
+                              <h2 className="bg-gradient-to-t from-primary to-secondary bg-clip-text
+                          text-3xl/[3rem] font-extrabold text-transparent sm:text-3xl/[3rem]">COME TO OUR EVENTS!</h2>
+                              <CTAButton href="http://localhost:3000/events" text="Events" />
+                          </div>
+                      </section>
+                      <section className="pt-6">
+                          <div className="text-left space-x-5 mt-3 flex">
+                              <h2 className="bg-gradient-to-t from-primary to-secondary bg-clip-text
+                          text-3xl/[3rem] font-extrabold text-transparent sm:text-3xl/[3rem]">TALK TO US!</h2>
+                              <CTAButton href="https://rit-sse.slack.com/" text="Join our Slack" />
+                          </div>
+                      </section>
+                   </div>
             </section>
         </>
 

diff --git a/next/components/Footer.tsx b/next/components/Footer.tsx
@@ -1,16 +1,18 @@
 'use client'
 
 import ExternalHyperlinkText from "./common/ExternalHyperlinkText";
-import DarkModeToggle from "./common/DarkModeToggle";
 import Link from "next/link";
 import HomepageContent from "@/app/HomepageContent";
 import { DiscordIcon, InstagramIcon, SlackIcon, TikTokIcon, TwitchIcon } from "./common/Icons";
+import DarkModeToggle from "./common/DarkModeToggle";
 
 const Footer: React.FC = () => {
     return (
         <footer className="flex items-center justify-between w-full h-auto p-3">
-            <DarkModeToggle />
-            <div className="flex flex-row items-center justify-center gap-2">
+            <div className="flex items-center justify-start fixed left-3 bottom-3">
+                <DarkModeToggle />
+            </div>
+            <div className="flex flex-row items-center justify-end gap-2 flex-grow">
                 <Link href={HomepageContent.slackLink} className='group rounded-md' aria-label="Link to Slack" target='_blank' rel='noopener noreferrer'>
                     <SlackIcon className='w-8 h-8 fill-primary hover:fill-primary-focus group-focus:fill-primary-focus' />
                 </Link>
@@ -19,20 +21,21 @@ const Footer: React.FC = () => {
                     <DiscordIcon className='w-8 h-8 fill-primary hover:fill-primary-focus group-focus:fill-primary-focus' />
                 </Link>
 
-                <Link href={HomepageContent.instagramLink} className='group rounded-md' aria-label="Link to Discord" target='_blank' rel='noopener noreferrer'>
+                <Link href={HomepageContent.instagramLink} className='group rounded-md' aria-label="Link to Instagram" target='_blank' rel='noopener noreferrer'>
                     <InstagramIcon className='w-8 h-8 fill-primary hover:fill-primary-focus group-focus:fill-primary-focus' />
                 </Link>
 
-                <Link href={HomepageContent.tiktokLink} className='group rounded-md' aria-label="Link to GitHub" target='_blank' rel='noopener noreferrer'>
+                <Link href={HomepageContent.tiktokLink} className='group rounded-md' aria-label="Link to TikTok" target='_blank' rel='noopener noreferrer'>
                     <TikTokIcon className='w-8 h-8 fill-primary hover:fill-primary-focus group-focus:fill-primary-focus' />
                 </Link>
 
-                <Link href={HomepageContent.twitchLink} className='group rounded-md' aria-label="Link to GitHub" target='_blank' rel='noopener noreferrer'>
+                <Link href={HomepageContent.twitchLink} className='group rounded-md' aria-label="Link to Twitch" target='_blank' rel='noopener noreferrer'>
                     <TwitchIcon className='w-8 h-8 fill-primary hover:fill-primary-focus group-focus:fill-primary-focus' />
                 </Link>
             </div>
         </footer>
     );
 };
 
+
 export default Footer;
diff --git a/next/components/nav/Navbar.tsx b/next/components/nav/Navbar.tsx
@@ -6,6 +6,7 @@ import MobileNavDropdown from "./MobileNavDropdown";
 import SSELogoFull from "../common/SSELogoFull";
 import SSELogoSmall from "../common/SSELogoSmall";
 import AuthButton from "./AuthButton";
+import DarkModeToggle from "../common/DarkModeToggle";
 
 const navItems: NavItemProps[] = [
     {
@@ -110,7 +111,7 @@ const Navbar: React.FC = () => {
                         </li>
                     </ul>
                 </div>
-                <div className="dropdown dropdown-end md:hidden">
+                <div className="dropdown dropdown-end md:hidden justify-end ">
                     <div className="flex flex-row">
                         <Hamburger />
                     </div>