Fix Dark Mode Toggle Button

- Add Website to Profile Cards
PureNimble · Sep 27, 2024 · 65243e0 · 65243e0
1 parent d5fdc7e
commit 65243e0
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 31 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -40,7 +40,7 @@ function AppContent({ darkMode, toggleDarkMode }) {
   return (
     <div className={darkMode ? 'dark' : ''}>
       <div className='bg-bkg-light dark:bg-bkg-dark min-h-screen flex flex-col'>
-        {shouldShowNavbar && <Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode} />}
+        {shouldShowNavbar && <Navbar darkMode={darkMode} toggleDarkMode={toggleDarkMode} />}
         <main className='flex-grow'>
           <Routes>
             <Route path="/" element={<Team />} />

diff --git a/src/components/DarkModeToggleButton.jsx b/src/components/DarkModeToggleButton.jsx
@@ -1,21 +1,15 @@
 import "@theme-toggles/react/css/Around.css";
 import { Around } from "@theme-toggles/react";
-import { useEffect, useRef } from "react";
+import React from "react";
 
-const DarkModeToggleButton = ({ toggleDarkMode }) => {
-    const buttonRef = useRef(null);
-
-    useEffect(() => {
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            // Ensure the button exists before clicking it
-            if (buttonRef.current) {
-                buttonRef.current.click();
-            }
-        }
-    }, []);
+const DarkModeToggleButton = ({ darkMode, toggleDarkMode }) => {
 
     return (
-        <Around className='text-4xl text-amber-400 dark:text-content-light' ref={buttonRef} onToggle={toggleDarkMode} />
+        <Around
+            className='text-4xl text-amber-400 dark:text-content-light'
+            toggled={darkMode}
+            onToggle={toggleDarkMode}
+        />
     );
 }
 

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -4,10 +4,10 @@ import { FaHome } from 'react-icons/fa';
 import DarkModeToggleButton from './DarkModeToggleButton';
 import { RiGitRepositoryFill } from "react-icons/ri";
 
-const Navbar = ({ toggleDarkMode }) => {
+const Navbar = ({ darkMode, toggleDarkMode }) => {
     return (
         <header className='header bg-bkg-light dark:bg-bkg-dark flex justify-between items-center p-4'>
-            <DarkModeToggleButton toggleDarkMode={toggleDarkMode} />
+            <DarkModeToggleButton darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
             <NavLink to='/'>
                 <FaHome className='text-4xl text-content-dark dark:text-content-light' />
             </NavLink>

diff --git a/src/components/ProfileCard.jsx b/src/components/ProfileCard.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { FaGithub, FaLinkedin } from 'react-icons/fa';
+import { CgWebsite } from "react-icons/cg";
 
-const ProfileCard = ({ name, role, image, github, linkedin }) => {
+const ProfileCard = ({ name, role, image, github, linkedin, portfolio }) => {
     return (
-        <div className="bg-content-light dark:bg-content-dark text-accent1-light dark:text-accent1-dark p-8 rounded-xl shadow-md">
+        <div className="bg-content-light dark:bg-content-dark text-accent1-light dark:text-accent1-dark p-8 rounded-xl shadow-md transition-colors duration-300">
             <div className="flex justify-center items-center">
                 <img className="w-40 h-40 object-cover rounded-full" src={image} alt={`Profile picture of ${name}`} />
             </div>
@@ -18,9 +19,12 @@ const ProfileCard = ({ name, role, image, github, linkedin }) => {
                 <a href={linkedin} aria-label={`LinkedIn Profile of ${name}`} target="_blank" rel="noopener noreferrer">
                     <FaLinkedin className="text-4xl text-accent1-light dark:text-accent1-dark" />
                 </a>
+                <a href={portfolio} aria-label={`Portfolio of ${name}`} target="_blank" rel="noopener noreferrer">
+                    <CgWebsite className="text-4xl text-accent1-light dark:text-accent1-dark" />
+                </a>
             </div>
         </div>
     );
 }
 
-export default ProfileCard;
+export default ProfileCard;
diff --git a/src/constants/index.js b/src/constants/index.js
@@ -4,21 +4,24 @@ export const teamMembers = [
         role: 'CEO',
         image: 'https://github.com/vscosousa.png',
         github: 'https://github.com/vscosousa',
-        linkedin: 'https://linkedin.com/in/vscosousa/'
-
+        linkedin: 'https://linkedin.com/in/vscosousa/',
+        portfolio: 'https://vscosousa.github.io/'
     },
     {
         name: 'Rafael Araújo',
         role: 'CEO',
         image: 'https://github.com/ReyFow.png',
         github: 'https://github.com/ReyFow',
-        linkedin: 'https://linkedin.com/in/rafaraujo589/'
+        linkedin: 'https://linkedin.com/in/rafaraujo589/',
+        portfolio: 'https://ReyFow.github.io/'
+
     },
     {
         name: 'João Pinto',
         role: 'CEO',
         image: 'https://github.com/joaopinto15.png',
         github: 'https://github.com/joaopinto15',
-        linkedin: 'https://linkedin.com/in/joaopinto15/'
+        linkedin: 'https://linkedin.com/in/joaopinto15/',
+        portfolio: 'https://joaopinto15.github.io/'
     },
 ];
diff --git a/src/index.css b/src/index.css
@@ -1,7 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
-
-* {
-    @apply transition-colors duration-300;
-}
+@tailwind utilities;
diff --git a/src/pages/PageNotFound.jsx b/src/pages/PageNotFound.jsx
@@ -19,14 +19,14 @@ function PageNotFound() {
                     <p className="mt-4 text-accent2-light dark:text-accent2-dark">The page you are looking for doesn't exist. Here are some helpful links:</p>
 
                     <div className="flex items-center w-full mt-6 gap-x-3 shrink-0 sm:w-auto">
-                        <button onClick={goBack} className="flex items-center justify-center w-1/2 px-5 py-2 text-sm text-gray-700 transition-colors duration-200 bg-white border rounded-lg gap-x-2 sm:w-auto dark:hover:bg-gray-800 dark:bg-gray-900 hover:bg-gray-100 dark:text-gray-200 dark:border-gray-700">
+                        <button onClick={goBack} className="flex items-center justify-center w-1/2 px-5 py-2 text-sm text-gray-700 transition-colors duration-200 bg-white border rounded-lg gap-x-2 sm:w-auto dark:hover:bg-gray-800 dark:bg-content-dark hover:bg-gray-100 dark:text-accent1-dark dark:border-gray-700">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 rtl:rotate-180">
                                 <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
                             </svg>
                             <span>Go back</span>
                         </button>
 
-                        <button onClick={goHome} className="w-1/2 px-5 py-2 text-sm tracking-wide text-accent1-dark transition-colors duration-200 bg-blue-500 rounded-lg shrink-0 sm:w-auto hover:bg-blue-600 dark:hover:bg-blue-500 dark:bg-blue-600">
+                        <button onClick={goHome} className="w-1/2 px-5 py-2 text-sm tracking-wide text-accent1-light dark:text-accent1-dark transition-colors duration-200 bg-blue-500 rounded-lg shrink-0 sm:w-auto hover:bg-blue-600 dark:hover:bg-blue-500 dark:bg-blue-600">
                             Take me home
                         </button>
                     </div>

diff --git a/src/pages/Team.jsx b/src/pages/Team.jsx
@@ -17,14 +17,15 @@ const Team = () => {
                         </p>
                     </header>
                     <div className="grid gap-8 mt-8 lg:grid-cols-3">
-                        {teamMembers.map(({ name, role, image, github, linkedin }, index) => (
+                        {teamMembers.map(({ name, role, image, github, linkedin, portfolio}, index) => (
                             <ProfileCard
                                 key={index}
                                 name={name}
                                 role={role}
                                 image={image}
                                 github={github}
                                 linkedin={linkedin}
+                                portfolio={portfolio}
                             />
                         ))}
                     </div>