client: made UI modifications

Casuals4Fun · May 4, 2024 · 11f3a86 · 11f3a86
1 parent ca30d4a
commit 11f3a86
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 38 deletions.
diff --git a/client/src/components/card/closed-debate-card.css b/client/src/components/card/closed-debate-card.css
@@ -1,4 +1,5 @@
 #closed-card {
+    min-height: 270px;
     background-color: var(--card_background);
     border-radius: 20px;
     border: 2px solid var(--card_border);
@@ -41,6 +42,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    cursor: pointer;
 }
 
 #closed-card .left p {
@@ -65,7 +67,6 @@
 
 #closed-card .right .user-info {
     display: flex;
-    gap: 10px;
     align-items: center;
     justify-content: space-between;
 }
@@ -106,12 +107,19 @@
     cursor: pointer;
 }
 
+#closed-card .right .user-info .debate-from p:last-child,
+#closed-card .right .user-info .debate-by p:last-child {
+    margin-top: -5px;
+    font-size: 14px;
+    font-weight: unset;
+}
+
 #closed-card .debate-bar__container {
     padding-top: 15px;
 }
 
 #closed-card .right .debate-info {
-    padding-top: 30px;
+    padding-top: 20px;
     display: flex;
     justify-content: space-between;
 }
@@ -175,7 +183,7 @@
     }
 
     #closed-card .left h2 {
-        max-width: 300px;
+        max-width: 100%;
         font-size: 18px;
     }
 }
diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx
@@ -1,14 +1,18 @@
 import "./closed-debate-card.css"
-import { Link } from "react-router-dom"
+import { useNavigate, Link } from "react-router-dom"
 import DebateBar from "./debate-bar"
 import { MdModeComment } from "react-icons/md"
 import useFormatNumber from "../../hooks/useFormatNumber"
 
 const ClosedDebateCard = () => {
+    const navigate = useNavigate();
+
     return (
         <div id='closed-card'>
             <div className='left'>
-                <h2>Sony is the best camera of all time.</h2>
+                <h2 title='Sony is the best camera of all time.' onClick={() => navigate('/')}>
+                    Sony is the best camera of all time.
+                </h2>
                 <p>
                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt!
                     Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt!
@@ -22,14 +26,16 @@ const ClosedDebateCard = () => {
                     <div className='debate-from'>
                         <img src="/user1.webp" alt="" loading="lazy" />
                         <p>Aniket Das</p>
+                        <p>aniketdas</p>
                     </div>
                     <div className='debate-by'>
                         <img src="/user2.jpeg" alt="" loading="lazy" />
                         <p>Pratik Prasad</p>
+                        <p>pratikprasad</p>
                     </div>
                 </div>
                 <div className='debate-bar__container'>
-                    <DebateBar debateFrom={423} debateBy={516} />
+                    <DebateBar debateFrom={4230} debateBy={5160} />
                 </div>
                 <div className='debate-info'>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '5px', fontSize: '15px', fontWeight: '600' }}>

diff --git a/client/src/components/card/open-debate-card.css b/client/src/components/card/open-debate-card.css
@@ -1,4 +1,5 @@
 #open-card {
+    min-height: 270px;
     padding: 20px 15px;
     background-color: var(--card_background);
     border-radius: 20px;
@@ -17,6 +18,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    cursor: pointer;
 }
 
 #open-card .debate-header a {
@@ -98,6 +100,10 @@
 }
 
 @media screen and (max-width: 1536px) {
+    #open-card {
+        min-height: auto;
+    }
+
     #open-card .debate-body {
         font-size: 15px;
     }

diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx
@@ -1,19 +1,19 @@
 import "./open-debate-card.css"
-import { Link } from "react-router-dom"
+import { useNavigate, Link } from "react-router-dom"
 import { MdModeComment } from "react-icons/md"
 import { IoCaretUpSharp } from "react-icons/io5"
 import useFormatNumber from "../../hooks/useFormatNumber"
 
 const OpenDebateCard = () => {
+    const navigate = useNavigate();
+
     return (
         <div id='open-card'>
             <div className='debate-header'>
-                <h2>
+                <h2 title='Artificial Intelligence – Is AI good for society or not?' onClick={() => navigate('/')}>
                     Artificial Intelligence – Is AI good for society or not?
                 </h2>
-                <Link to='/'>
-                    Debate
-                </Link>
+                <Link to='/'>Debate</Link>
             </div>
             <p className='debate-body'>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt!

diff --git a/client/src/components/modal/auth/brief-info.tsx b/client/src/components/modal/auth/brief-info.tsx
@@ -11,7 +11,7 @@ import { IoPersonCircleOutline } from "react-icons/io5"
 const BriefInfo: React.FC<RegisterDataProps> = ({ registerData, setRegisterData }) => {
     const navigate = useNavigate();
 
-    const { setAuthTab, setUser, setIsAuthenticated } = useAuthStore();
+    const { setAuthTab, setUser, isAuthenticated, setIsAuthenticated } = useAuthStore();
     const { clearTempUser } = useTempStore();
 
     const [term, setTerm] = useState<boolean>(false);
@@ -21,7 +21,6 @@ const BriefInfo: React.FC<RegisterDataProps> = ({ registerData, setRegisterData
         isFirstNameValid: true,
         isLastNameValid: true
     });
-    const [loading, setLoading] = useState<boolean>(false);
 
     const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
@@ -82,7 +81,7 @@ const BriefInfo: React.FC<RegisterDataProps> = ({ registerData, setRegisterData
         if (!term) return;
 
         if (trimmedUsername && trimmedFirstName && trimmedLastName) {
-            setLoading(true);
+            setIsAuthenticated(AuthStatus.Authenticating)
 
             const formData = new FormData();
             formData.append('email', registerData.email);
@@ -117,10 +116,7 @@ const BriefInfo: React.FC<RegisterDataProps> = ({ registerData, setRegisterData
                         toast.error(response.message)
                     }
                 })
-                .catch(() => {
-                    setLoading(false);
-                    setIsAuthenticated(AuthStatus.Failed);
-                });
+                .catch(() => setIsAuthenticated(AuthStatus.Failed));
         }
     };
 
@@ -214,8 +210,8 @@ const BriefInfo: React.FC<RegisterDataProps> = ({ registerData, setRegisterData
                     </div>
                     <p>Accept <span>Terms & Conditions</span></p>
                 </div>
-                <button type='submit' disabled={loading}>
-                    {loading ? <LoadingSVG size={23} /> : 'Create my Account'}
+                <button type='submit' disabled={isAuthenticated === AuthStatus.Authenticating}>
+                    {isAuthenticated === AuthStatus.Authenticating ? <LoadingSVG size={23} /> : 'Create my Account'}
                 </button>
             </form>
         </div>

diff --git a/client/src/components/modal/auth/login-tab.tsx b/client/src/components/modal/auth/login-tab.tsx
@@ -121,7 +121,7 @@ const LoginTab = () => {
                         placeholder={isSubmitted && !validationState.isPasswordValid ? 'Required' : ''}
                     />
                 </div>
-                <button disabled={isAuthenticated === AuthStatus.Authenticating} type='submit'>
+                <button type='submit' disabled={isAuthenticated === AuthStatus.Authenticating}>
                     {isAuthenticated === AuthStatus.Authenticating ? <LoadingSVG size={23} /> : 'Login'}
                 </button>
             </form>
@@ -135,14 +135,8 @@ const LoginTab = () => {
                 className='google-btn'
                 onClick={() => window.location.href = `${import.meta.env.VITE_SERVER_URL}/api/auth/google`}
             >
-                {isAuthenticated === AuthStatus.Authenticating ? (
-                    <LoadingSVG size={23} />
-                ) : (
-                    <>
-                        <FcGoogle size={25} />
-                        <span>Continue with Google</span>
-                    </>
-                )}
+                <FcGoogle size={25} />
+                <span>Continue with Google</span>
             </button>
         </div>
     );

diff --git a/client/src/components/modal/auth/signup-tab.tsx b/client/src/components/modal/auth/signup-tab.tsx
@@ -91,7 +91,7 @@ const SignupTab: React.FC<RegisterDataProps> = ({ registerData, setRegisterData
                         placeholder={isSubmitted && !validationState.isPasswordValid ? 'Required' : ''}
                     />
                 </div>
-                <button type='submit'>
+                <button type='submit' disabled={isAuthenticated === AuthStatus.Authenticating}>
                     {isAuthenticated === AuthStatus.Authenticating ? <LoadingSVG size={23} /> : 'Continue'}
                 </button>
             </form>
@@ -107,14 +107,8 @@ const SignupTab: React.FC<RegisterDataProps> = ({ registerData, setRegisterData
                         className='google-btn'
                         onClick={() => window.location.href = `${import.meta.env.VITE_SERVER_URL}/api/auth/google`}
                     >
-                        {isAuthenticated === AuthStatus.Authenticating ? (
-                            <LoadingSVG size={23} />
-                        ) : (
-                            <>
-                                <FcGoogle size={25} />
-                                <span>Continue with Google</span>
-                            </>
-                        )}
+                        <FcGoogle size={25} />
+                        <span>Continue with Google</span>
                     </button>
                 </>
             )}