client: made modification in styling & visual elements

Casuals4Fun · May 3, 2024 · 91f19c6 · 91f19c6
1 parent e439b77
commit 91f19c6
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 68 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -62,7 +62,7 @@ export default function App() {
           <Route path='/create' element={<ProtectedRoute><CreateDebatePage /></ProtectedRoute>} />
           <Route path='/hot-topics' element={<HotTopicsPage />} />
           <Route path='/open-topics' element={<OpenTopicsPage />} />
-          <Route path='/notifications' element={<ProtectedRoute><NotificationPage /></ProtectedRoute>} />
+          <Route path='/notifications' element={<NotificationPage />} />
         </Routes>
       </main>
       <RightSidebar isVisible={isScrollingUp} />

diff --git a/client/src/components/modal/auth/index.tsx b/client/src/components/modal/auth/index.tsx
@@ -3,12 +3,11 @@ import { useState } from "react"
 import { useLocation, useNavigate } from "react-router-dom"
 import Lottie from "lottie-react"
 import { useAuthStore, AuthTab, useTempStore } from "../../../store/useAuthStore"
-import { Theme, useNavStore } from "../../../store/useNavStore"
 import WavingHand from "../../../lottie/WavingHand.json"
 import LoginTab from "./login-tab"
 import SignupTab from "./signup-tab"
 import BriefInfo from "./brief-info"
-import { IoClose } from "react-icons/io5"
+import { IoCloseOutline } from "react-icons/io5"
 
 type RegisterData = {
     email: string;
@@ -24,7 +23,6 @@ const AuthModal = () => {
     const navigate = useNavigate();
 
     const { authTab, setAuthTab } = useAuthStore();
-    const { theme, setTheme } = useNavStore();
     const { tempUser } = useTempStore();
 
     const [registerData, setRegisterData] = useState<RegisterData>(() => ({
@@ -36,12 +34,6 @@ const AuthModal = () => {
         last_name: tempUser.last_name || ""
     }));
 
-    const handleToggleTheme = () => {
-        const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
-        document.querySelector("body")?.setAttribute('data-theme', newTheme);
-        setTheme(newTheme);
-    };
-
     const handleCloseModal = () => {
         if (location.pathname !== '/auth') setAuthTab(AuthTab.Closed);
         else {
@@ -85,18 +77,11 @@ const AuthModal = () => {
                     <button onClick={handleCloseModal} className='logo__wrapper'>
                         <img src="/logo.png" alt="" />
                     </button>
-                    <button
-                        className='theme-btn'
-                        onClick={handleToggleTheme}
-                        title={theme === Theme.Dark ? 'Switch to Light mode' : 'Switch to Dark mode'}
-                    >
-                        {theme === Theme.Dark ? <img className="sun" src="theme/sun.svg" alt="" /> : <img className="moon" src="theme/moon.png" alt="" />}
-                    </button>
                     <button
                         className='close__btn'
                         onClick={handleCloseModal}
                     >
-                        <IoClose size={30} />
+                        <IoCloseOutline size={30} />
                     </button>
                 </>
             </div>

diff --git a/client/src/components/sidebar/left-sidebar.tsx b/client/src/components/sidebar/left-sidebar.tsx
@@ -2,7 +2,6 @@ import "./left-sidebar.css"
 import { useLocation, Link, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 import { AuthStatus, AuthTab, useAuthStore } from "../../store/useAuthStore"
-import { Theme, useNavStore } from "../../store/useNavStore"
 import { leftSidebarLinks } from "../../data/left-sidebar-links"
 import Profile from "./profile"
 import { GoPerson } from "react-icons/go"
@@ -17,10 +16,9 @@ const LeftSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
   const navigate = useNavigate();
 
   const { setRoute, isAuthenticated, setAuthTab } = useAuthStore();
-  const { theme, setTheme } = useNavStore();
 
   const handleLinkClick = (href: string, name: string) => {
-    if (name === "Create Debate" || name === "Notifications") {
+    if (name === "Create Debate") {
       if (isAuthenticated === AuthStatus.Failed) {
         setRoute(href);
         setAuthTab(AuthTab.Login);
@@ -31,12 +29,6 @@ const LeftSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
     else navigate(href);
   };
 
-  const handleToggleTheme = () => {
-    const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
-    document.querySelector("body")?.setAttribute('data-theme', newTheme);
-    setTheme(newTheme);
-  }
-
   return (
     <div id='left-sidebar' className={isVisible ? 'reveal' : 'hide'}>
       <Link to='/' className='logo__wrapper'>
@@ -62,13 +54,6 @@ const LeftSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
           <Profile />
         ) : isAuthenticated === AuthStatus.Failed && (
           <>
-            <button
-              className='theme-btn'
-              onClick={handleToggleTheme}
-              title={theme === Theme.Dark ? 'Switch to Light mode' : 'Switch to Dark mode'}
-            >
-              {theme === Theme.Dark ? <img className="sun" src="theme/sun.svg" alt="" /> : <img className="moon" src="theme/moon.png" alt="" />}
-            </button>
             <button onClick={() => setAuthTab(AuthTab.Login)}>
               <GoPerson size={30} />
             </button>
@@ -79,4 +64,22 @@ const LeftSidebar: React.FC<SidebarProps> = ({ isVisible }) => {
   )
 }
 
-export default LeftSidebar
+export default LeftSidebar
+
+/*
+
+const handleToggleTheme = () => {
+  const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
+  document.querySelector("body")?.setAttribute('data-theme', newTheme);
+  setTheme(newTheme);
+}
+
+<button
+  className='theme-btn'
+  onClick={handleToggleTheme}
+  title={theme === Theme.Dark ? 'Switch to Light mode' : 'Switch to Dark mode'}
+>
+  {theme === Theme.Dark ? <img className="sun" src="theme/sun.svg" alt="" /> : <img className="moon" src="theme/moon.png" alt="" />}
+</button>
+
+*/
diff --git a/client/src/components/sidebar/profile.css b/client/src/components/sidebar/profile.css
@@ -22,27 +22,23 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    background-size: 200% 100%;
     background: linear-gradient(to right, var(--text_primary) 0, var(--text_secondary) 10%, var(--text_tertiary) 20%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
-    animation: shine 10s infinite linear;
+    animation: shine 7.5s infinite linear;
     font-weight: 600;
     font-size: 20px;
-    font-family: inherit;
 }
 
 @keyframes shine {
     0% {
         background-position: 0;
     }
 
-    60% {
-        background-position: 180px;
-    }
-
     100% {
-        background-position: 180px;
+        background-position: 154.53px;
     }
 }
 

diff --git a/client/src/components/sidebar/profile.tsx b/client/src/components/sidebar/profile.tsx
@@ -2,7 +2,7 @@ import "./profile.css"
 import { useEffect } from "react"
 import { Link, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
-import { Theme, useNavStore } from "../../store/useNavStore"
+import { useNavStore } from "../../store/useNavStore"
 import { AuthStatus, AuthTab, useAuthStore } from "../../store/useAuthStore"
 import ToggleTheme from "../button/toggle-theme"
 import LoadingSkeleton from "../loading/skeleton"
@@ -13,15 +13,9 @@ import { FaRegUser } from "react-icons/fa"
 
 const Profile = () => {
     const navigate = useNavigate();
-    const { expand, setExpand, theme, setTheme } = useNavStore();
+    const { expand, setExpand } = useNavStore();
     const { isAuthenticated, setIsAuthenticated, user, setUser, authTab, setAuthTab } = useAuthStore();
 
-    const handleToggleTheme = () => {
-        const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
-        document.querySelector("body")?.setAttribute('data-theme', newTheme);
-        setTheme(newTheme);
-    }
-
     const handleToggleMenu = () => {
         setExpand(!expand);
         const mainElement = document.querySelector('#main') as HTMLElement;
@@ -67,21 +61,21 @@ const Profile = () => {
 
     return (
         <div className='profile__wrapper'>
+            <Link
+                to='/notifications'
+                className='notification-btn'
+                style={{
+                    borderWidth: '2px',
+                    borderStyle: 'solid',
+                    borderColor: location.pathname === '/notifications' ? 'var(--body_color)' : 'transparent'
+                }}
+            >
+                <PiBellSimpleFill size={20} />
+            </Link>
             {isAuthenticated === AuthStatus.Authenticating ? (
                 <LoadingSkeleton style={{ width: '40px', height: '40px', borderRadius: '50%' }} />
             ) : isAuthenticated === AuthStatus.Authenticated ? (
                 <>
-                    <Link
-                        to='/notifications'
-                        className='notification-btn'
-                        style={{
-                            borderWidth: '2px',
-                            borderStyle: 'solid',
-                            borderColor: location.pathname === '/notifications' ? 'var(--body_color)' : 'transparent'
-                        }}
-                    >
-                        <PiBellSimpleFill size={20} />
-                    </Link>
                     <div
                         className='profile__image'
                         style={{
@@ -100,13 +94,6 @@ const Profile = () => {
                 </>
             ) : (
                 <>
-                    <button
-                        className='theme-btn'
-                        onClick={handleToggleTheme}
-                        title={theme === Theme.Dark ? 'Switch to Light mode' : 'Switch to Dark mode'}
-                    >
-                        {theme === Theme.Dark ? <img className="sun" src="theme/sun.svg" alt="" /> : <img className="moon" src="theme/moon.png" alt="" />}
-                    </button>
                     <button
                         className='auth-btn'
                         style={{ border: `${authTab !== AuthTab.Closed ? '2px solid var(--body_color)' : ''}` }}
@@ -158,3 +145,21 @@ const Profile = () => {
 };
 
 export default Profile;
+
+/*
+
+const handleToggleTheme = () => {
+    const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
+    document.querySelector("body")?.setAttribute('data-theme', newTheme);
+    setTheme(newTheme);
+}
+
+<button
+    className='theme-btn'
+    onClick={handleToggleTheme}
+    title={theme === Theme.Dark ? 'Switch to Light mode' : 'Switch to Dark mode'}
+>
+    {theme === Theme.Dark ? <img className="sun" src="theme/sun.svg" alt="" /> : <img className="moon" src="theme/moon.png" alt="" />}
+</button>
+
+*/
diff --git a/client/src/globals.css b/client/src/globals.css
@@ -122,6 +122,7 @@ button {
     border: none;
     background: none;
     cursor: pointer;
+    font-family: inherit;
 }
 
 ul {