client: modify auth layout

Casuals4Fun · Apr 26, 2024 · 40d5162 · 40d5162
1 parent b7d078e
commit 40d5162
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 11 deletions.
diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx
@@ -1,7 +1,7 @@
 import "./closed-debate-card.css"
 import { Link } from "react-router-dom"
 import DebateBar from "./debate-bar"
-import { FaComments } from "react-icons/fa"
+import { MdModeComment } from "react-icons/md"
 import useFormatNumber from "../../hooks/useFormatNumber"
 
 const ClosedDebateCard = () => {
@@ -33,7 +33,7 @@ const ClosedDebateCard = () => {
                 </div>
                 <div className='debate-info'>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '5px', fontSize: '15px', fontWeight: '600' }}>
-                        <FaComments size={15} />
+                        <MdModeComment size={15} />
                         <p>{useFormatNumber(1300)}</p>
                     </div>
                     <p className='created-at'>5 days ago</p>

diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx
@@ -1,6 +1,6 @@
 import "./open-debate-card.css"
 import { Link } from "react-router-dom"
-import { FaComments } from "react-icons/fa"
+import { MdModeComment } from "react-icons/md"
 import { IoCaretUpSharp } from "react-icons/io5"
 import useFormatNumber from "../../hooks/useFormatNumber"
 
@@ -26,7 +26,7 @@ const OpenDebateCard = () => {
                     <p>{useFormatNumber(4500)}</p>
                 </div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
-                    <FaComments size={15} />
+                    <MdModeComment size={15} />
                     <p>{useFormatNumber(1300)}</p>
                 </div>
             </div>

diff --git a/client/src/components/modal/auth/index.css b/client/src/components/modal/auth/index.css
@@ -46,6 +46,27 @@
     padding: 20px;
 }
 
+.auth__container .logo__wrapper {
+    display: none;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 40px;
+    height: 40px;
+}
+
+.auth__container .logo__wrapper img {
+    width: 100%;
+    height: 100%;
+}
+
+.auth__container .theme-btn {
+    display: none;
+    position: absolute;
+    top: 10px;
+    right: 60px;
+}
+
 .close__btn {
     position: absolute;
     top: 0;
@@ -286,6 +307,21 @@
         border-radius: unset;
     }
 
+    .auth__container .logo__wrapper {
+        display: block;
+    }
+
+    .auth__container .theme-btn {
+        display: grid;
+    }
+
+    .auth__container .close__btn {
+        top: 10px;
+        right: 10px;
+        background-color: var(--explore_input_bg);
+        border-radius: 50%;
+    }
+
     .auth__container .left__container {
         display: flex;
         margin: 0 auto;

diff --git a/client/src/components/modal/auth/index.tsx b/client/src/components/modal/auth/index.tsx
@@ -1,8 +1,9 @@
 import "./index.css"
 import { useState } from "react"
-import { useLocation } from "react-router-dom"
+import { Link, useLocation } 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"
@@ -21,6 +22,7 @@ type RegisterData = {
 const AuthModal = () => {
     const location = useLocation();
     const { authTab, setAuthTab } = useAuthStore();
+    const { theme, setTheme } = useNavStore();
     const { tempUser } = useTempStore();
 
     const [registerData, setRegisterData] = useState<RegisterData>(() => ({
@@ -32,6 +34,12 @@ 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 handleBackgroundClick = (event: React.MouseEvent<HTMLDivElement>) => {
         if (location.pathname !== '/auth' && event.target === event.currentTarget) {
             setAuthTab(AuthTab.Closed);
@@ -64,12 +72,24 @@ const AuthModal = () => {
                     )}
                 </div>
                 {location.pathname !== '/auth' && (
-                    <button
-                        className='close__btn'
-                        onClick={() => setAuthTab(AuthTab.Closed)}
-                    >
-                        <IoClose size={30} />
-                    </button>
+                    <>
+                        <Link to='/' className='logo__wrapper'>
+                            <img src="/logo.png" alt="" />
+                        </Link>
+                        <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={() => setAuthTab(AuthTab.Closed)}
+                        >
+                            <IoClose size={30} />
+                        </button>
+                    </>
                 )}
             </div>
         </div>