modified card ui

Casuals4Fun · Aug 4, 2024 · cbd98fd · cbd98fd
2 parents 1117ed6 + 2c136ba
commit cbd98fd
Show file tree

Hide file tree

Showing 47 changed files with 551 additions and 608 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -61,7 +61,6 @@
     display: flex;
     flex-direction: column;
     gap: 30px;
-    user-select: none;
 }
 
 .column-debates {

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -19,29 +19,29 @@ import NotificationPage from "./pages/notifications"
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
 
 export default function App() {
-  const { setRoute, setUser, setIsAuthenticated, authTab, setAuthTab } = useAuthStore();
-  const { expand, sidebar, setSidebar } = useNavStore();
+  const { setRoute, setUser, setIsAuthenticated, authTab, setAuthTab } = useAuthStore()
+  const { expand, sidebar, setSidebar } = useNavStore()
 
-  const mainRef = useRef<HTMLDivElement>(null);
-  const lastScrollTop = useRef<number>(0);
-  const [isScrollingUp, setIsScrollingUp] = useState<boolean>(true);
+  const mainRef = useRef<HTMLDivElement>(null)
+  const lastScrollTop = useRef<number>(0)
+  const [isScrollingUp, setIsScrollingUp] = useState<boolean>(true)
 
   useEffect(() => {
-    document.body.setAttribute('data-theme', localStorage.getItem('theme') === Theme.Light ? Theme.Light : Theme.Dark);
+    document.body.setAttribute('data-theme', localStorage.getItem('theme') === Theme.Light ? Theme.Light : Theme.Dark)
 
-    handleAutoLogin(setRoute, setUser, setIsAuthenticated, setAuthTab);
+    handleAutoLogin(setRoute, setUser, setIsAuthenticated, setAuthTab)
 
     const handleScroll = () => {
-      const st = mainRef.current?.scrollTop ?? 0;
-      setIsScrollingUp(st <= lastScrollTop.current);
-      lastScrollTop.current = Math.max(st, 0);
-    };
+      const st = mainRef.current?.scrollTop ?? 0
+      setIsScrollingUp(st <= lastScrollTop.current)
+      lastScrollTop.current = Math.max(st, 0)
+    }
 
-    const mainElement = mainRef.current;
-    mainElement?.addEventListener('scroll', handleScroll, { passive: true });
-    return () => mainElement?.removeEventListener('scroll', handleScroll);
+    const mainElement = mainRef.current
+    mainElement?.addEventListener('scroll', handleScroll, { passive: true })
+    return () => mainElement?.removeEventListener('scroll', handleScroll)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [])
 
   return (
     <div id='app'>

diff --git a/client/src/ProtectedRoute.tsx b/client/src/ProtectedRoute.tsx
@@ -7,14 +7,14 @@ interface ProtectedRouteProps {
 }
 
 export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
-    const { isAuthenticated } = useAuthStore();
+    const { isAuthenticated } = useAuthStore()
 
     if (isAuthenticated === AuthStatus.Authenticating) {
         return <LoadingComponent />
     }
     else if (isAuthenticated === AuthStatus.Failed) {
-        return <Navigate to='/auth' replace />;
+        return <Navigate to='/auth' replace />
     }
 
-    return <>{children}</>;
-};
+    return <>{children}</>
+}
diff --git a/client/src/components/button/toggle-theme.tsx b/client/src/components/button/toggle-theme.tsx
@@ -2,12 +2,12 @@ import "./toggle-theme.css"
 import { Theme, useNavStore } from "../../store/useNavStore"
 
 const ToggleTheme = () => {
-    const { theme, setTheme } = useNavStore();
+    const { theme, setTheme } = useNavStore()
 
     const handleToggleTheme = () => {
-        const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
-        document.querySelector("body")?.setAttribute('data-theme', newTheme);
-        setTheme(newTheme);
+        const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light
+        document.querySelector("body")?.setAttribute('data-theme', newTheme)
+        setTheme(newTheme)
     }
 
     return (

diff --git a/client/src/components/card/claim-username.tsx b/client/src/components/card/claim-username.tsx
@@ -8,38 +8,36 @@ import { useNavStore } from "../../store/useNavStore"
 import { usernameRegex } from "../../data/regex"
 
 const ClaimUsername = () => {
-    const { setAuthTab } = useAuthStore();
-    const { sidebar } = useNavStore();
+    const { setAuthTab } = useAuthStore()
+    const { sidebar } = useNavStore()
 
-    const [isSubmitted, setIsSubmitted] = useState(false);
-    const [username, setUsername] = useState(localStorage.getItem("username") || "");
-    const [loading, setLoading] = useState(false);
-    const [message, setMessage] = useState({ type: '', content: '' });
+    const [isSubmitted, setIsSubmitted] = useState(false)
+    const [username, setUsername] = useState(localStorage.getItem("username") || "")
+    const [loading, setLoading] = useState(false)
+    const [message, setMessage] = useState({ type: '', content: '' })
 
     const handleKeyPress = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === ' ') e.preventDefault();
-    }, []);
+        if (e.key === ' ') e.preventDefault()
+    }, [])
 
     const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const inputUsername = e.target.value;
-        setUsername(inputUsername);
+        const inputUsername = e.target.value
+        setUsername(inputUsername)
 
         if (inputUsername) {
             if (!usernameRegex.test(inputUsername)) {
-                setMessage({ type: 'error', content: 'Username can only contain alphanumeric characters, underscores (_) and hyphens (-). No spaces or other special characters are allowed.' });
-            } else setMessage({ type: '', content: '' });
+                setMessage({ type: 'error', content: 'Username can only contain alphanumeric characters, underscores (_) and hyphens (-). No spaces or other special characters are allowed.' })
+            } else setMessage({ type: '', content: '' })
         }
-    };
+    }
 
     const handleUsernameSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        setIsSubmitted(true);
-        setTimeout(() => setIsSubmitted(false), 500);
+        e.preventDefault()
+        setIsSubmitted(true)
+        setTimeout(() => setIsSubmitted(false), 500)
 
         if (username && message.type !== 'error') {
-            setLoading(true);
-
-            localStorage.setItem("username", username);
+            setLoading(true)
 
             await fetch(`${import.meta.env.VITE_SERVER_URL}/api/auth/check-username`, {
                 method: 'POST',
@@ -49,15 +47,16 @@ const ClaimUsername = () => {
                 .then(res => res.json())
                 .then(response => {
                     if (response.success) {
-                        setAuthTab(AuthTab.Signup);
-                        setMessage({ type: 'success', content: response.message });
-                        toast.success(`${response.message} Register your account to claim username`);
-                    } else setMessage({ type: 'error', content: response.message });
+                        localStorage.setItem('username', username)
+                        setAuthTab(AuthTab.Signup)
+                        setMessage({ type: 'success', content: response.message })
+                        toast.success('Register your account to claim username')
+                    } else setMessage({ type: 'error', content: response.message })
                 })
                 .catch(() => setMessage({ type: 'error', content: 'Something went wrong. Try again later!' }))
-                .finally(() => setLoading(false));
+                .finally(() => setLoading(false))
         }
-    };
+    }
 
     return (
         <form id='claim-username' className={sidebar ? 'hide' : ''} onSubmit={handleUsernameSubmit}>
@@ -76,7 +75,7 @@ const ClaimUsername = () => {
                 />
             </div>
             <button className='submit-btn' disabled={loading}>
-                <span>CLAIM USERNAME</span>
+                <span>CLAIM PROFILE</span>
                 {!loading ? (
                     <PiArrowUpRightBold size={20} />
                 ) : (

diff --git a/client/src/components/card/closed-debate-card.css b/client/src/components/card/closed-debate-card.css
@@ -30,11 +30,12 @@
 }
 
 #closed-card .left h2 {
-    font-size: 20px;
+    font-size: 22px;
     font-weight: 600;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
     cursor: pointer;
 }
@@ -45,7 +46,7 @@
 
 #closed-card-loading .left .topic .loading-skeleton {
     max-width: 300px;
-    height: 25px;
+    height: 28px;
     border-radius: 30px;
 }
 
@@ -58,17 +59,18 @@
 
 #closed-card-loading .left .description .loading-skeleton {
     width: 100%;
-    height: 17px;
+    height: 18px;
     border-radius: 30px;
 }
 
 #closed-card .left p {
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 5;
+    line-clamp: 5;
     -webkit-box-orient: vertical;
     padding-top: 10px;
-    font-size: 16px;
+    font-size: 17px;
     color: var(--card_color_secondary);
 }
 
@@ -183,6 +185,7 @@
 
 #closed-card-loading .right .debate-bar {
     margin-top: 10px;
+    gap: 2.5px;
 }
 
 #closed-card-loading .right .debate-bar .loading-skeleton {
@@ -234,14 +237,6 @@
         padding-top: 10px;
     }
 
-    #closed-card .left p {
-        font-size: 15px;
-    }
-
-    #closed-card-loading .left .description .loading-skeleton {
-        height: 16px;
-    }
-
     #closed-card .left a,
     #closed-card-loading .left .view .loading-skeleton {
         display: none;
@@ -265,14 +260,6 @@
 }
 
 @media screen and (max-width: 480px) {
-    #closed-card .left h2 {
-        font-size: 18px;
-    }
-
-    #closed-card-loading .left .topic .loading-skeleton {
-        height: 23px;
-    }
-
     #closed-card .divider,
     #closed-card-loading .divider {
         margin-top: 20px;

diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx
@@ -7,11 +7,11 @@ import useFormatNumber from "../../hooks/useFormatNumber"
 import LoadingSkeleton from "../loading/skeleton"
 
 const ClosedDebateCard = () => {
-    const navigate = useNavigate();
-    const { sidebar } = useNavStore();
+    const navigate = useNavigate()
+    const { sidebar } = useNavStore()
 
     const handleProfileClick = (username: string) => {
-        navigate(`/${username}`);
+        navigate(`/${username}`)
     }
 
     return (
@@ -56,7 +56,7 @@ const ClosedDebateCard = () => {
 }
 
 const ClosedDebateLoadingCard = () => {
-    const { sidebar } = useNavStore();
+    const { sidebar } = useNavStore()
 
     return (
         <div id='closed-card-loading' className={sidebar ? 'card-break' : ''}>
@@ -87,6 +87,7 @@ const ClosedDebateLoadingCard = () => {
                 </div>
                 <div className='debate-bar'>
                     <LoadingSkeleton />
+                    <LoadingSkeleton />
                 </div>
                 <div className='debate-info'>
                     <LoadingSkeleton />

diff --git a/client/src/components/card/debate-bar.tsx b/client/src/components/card/debate-bar.tsx
@@ -9,9 +9,9 @@ interface BarProps {
 }
 
 const DebateBar: React.FC<BarProps> = ({ debateFrom, debateBy }) => {
-    const totalVotes = debateFrom + debateBy;
-    const leftPercentage = (debateFrom / totalVotes) * 100;
-    const rightPercentage = (debateBy / totalVotes) * 100;
+    const totalVotes = debateFrom + debateBy
+    const leftPercentage = (debateFrom / totalVotes) * 100
+    const rightPercentage = (debateBy / totalVotes) * 100
 
     return (
         <div className='debate-bar'>