modify fonts

client/src/App.tsx

@@ -1,22 +1,22 @@
-import "./App.css"
-import { useRef, useState, useEffect } from "react"
-import { Routes, Route, Navigate } from "react-router-dom"
-import { Toaster } from "sonner"
-import { ProtectedRoute } from "./ProtectedRoute"
-import { Theme, useNavStore } from "./store/useNavStore"
-import { AuthTab, useAuthStore } from "./store/useAuthStore"
-import handleAutoLogin from "./utils/handleAutoLogin"
-import LeftSidebar from "./components/sidebar/left-sidebar"
-import RightSidebar from "./components/sidebar/right-sidebar"
-import AuthModal from "./components/modal/auth"
-import HomePage from "./pages/home"
-import AuthPage from "./pages/auth"
-import SearchPage from "./pages/search"
-import CreateDebatePage from "./pages/create-debate"
-import HotTopicsPage from "./pages/hot-topics"
-import OpenTopicsPage from "./pages/open-topics"
-import NotificationPage from "./pages/notifications"
-import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
+import './App.css'
+import { useRef, useState, useEffect } from 'react'
+import { Routes, Route, Navigate } from 'react-router-dom'
+import { Toaster } from 'sonner'
+import { ProtectedRoute } from './ProtectedRoute'
+import { Theme, useNavStore } from './store/useNavStore'
+import { AuthTab, useAuthStore } from './store/useAuthStore'
+import handleAutoLogin from './utils/handleAutoLogin'
+import LeftSidebar from './components/sidebar/left-sidebar'
+import RightSidebar from './components/sidebar/right-sidebar'
+import AuthModal from './components/modal/auth'
+import HomePage from './pages/home'
+import AuthPage from './pages/auth'
+import SearchPage from './pages/search'
+import CreateDebatePage from './pages/create-debate'
+import HotTopicsPage from './pages/hot-topics'
+import OpenTopicsPage from './pages/open-topics'
+import NotificationPage from './pages/notifications'
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'
 
 export default function App() {
   const { setRoute, setUser, setIsAuthenticated, authTab, setAuthTab } = useAuthStore()

client/src/ProtectedRoute.tsx

@@ -1,6 +1,6 @@
-import { Navigate } from "react-router-dom"
-import { AuthStatus, useAuthStore } from "./store/useAuthStore"
-import { LoadingComponent } from "./components/loading/svg"
+import { Navigate } from 'react-router-dom'
+import { AuthStatus, useAuthStore } from './store/useAuthStore'
+import { LoadingComponent } from './components/loading/svg'
 
 interface ProtectedRouteProps {
     children: React.ReactNode

client/src/components/button/toggle-theme.tsx

@@ -1,12 +1,12 @@
-import "./toggle-theme.css"
-import { Theme, useNavStore } from "../../store/useNavStore"
+import './toggle-theme.css'
+import { Theme, useNavStore } from '../../store/useNavStore'
 
 const ToggleTheme = () => {
     const { theme, setTheme } = useNavStore()
 
     const handleToggleTheme = () => {
         const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light
-        document.querySelector("body")?.setAttribute('data-theme', newTheme)
+        document.querySelector('body')?.setAttribute('data-theme', newTheme)
         setTheme(newTheme)
     }
 

client/src/components/card/claim-username.tsx

@@ -1,18 +1,18 @@
-import "./claim-username.css"
-import { useCallback, useState } from "react"
-import { AuthTab, useAuthStore } from "../../store/useAuthStore"
-import { toast } from "sonner"
-import { PiArrowUpRightBold } from "react-icons/pi"
-import { LoadingSVG } from "../loading/svg"
-import { useNavStore } from "../../store/useNavStore"
-import { usernameRegex } from "../../data/regex"
+import './claim-username.css'
+import { useCallback, useState } from 'react'
+import { AuthTab, useAuthStore } from '../../store/useAuthStore'
+import { toast } from 'sonner'
+import { PiArrowUpRightBold } from 'react-icons/pi'
+import { LoadingSVG } from '../loading/svg'
+import { useNavStore } from '../../store/useNavStore'
+import { usernameRegex } from '../../data/regex'
 
 const ClaimUsername = () => {
     const { setAuthTab } = useAuthStore()
     const { sidebar } = useNavStore()
 
     const [isSubmitted, setIsSubmitted] = useState(false)
-    const [username, setUsername] = useState(localStorage.getItem("username") || "")
+    const [username, setUsername] = useState(localStorage.getItem('username') || '')
     const [loading, setLoading] = useState(false)
     const [message, setMessage] = useState({ type: '', content: '' })
 

client/src/components/card/closed-debate-card.css

@@ -70,20 +70,10 @@
     line-clamp: 5;
     -webkit-box-orient: vertical;
     padding-top: 10px;
-    font-size: 17px;
+    font-size: 18px;
     color: var(--card_color_secondary);
 }
 
-#closed-card .left a {
-    padding-top: 10px;
-    width: fit-content;
-    color: var(--card_color_secondary);
-    text-decoration: underline;
-    font-size: 15px;
-    font-weight: 700;
-    cursor: pointer;
-}
-
 #closed-card-loading .left .view .loading-skeleton {
     margin-top: 10px;
     width: 35px;
@@ -185,7 +175,6 @@
 
 #closed-card-loading .right .debate-bar {
     margin-top: 10px;
-    gap: 2.5px;
 }
 
 #closed-card-loading .right .debate-bar .loading-skeleton {

client/src/components/card/closed-debate-card.tsx

@@ -1,10 +1,10 @@
-import "./closed-debate-card.css"
-import { useNavigate } from "react-router-dom"
-import { useNavStore } from "../../store/useNavStore"
-import DebateBar from "./debate-bar"
-import { MdModeComment } from "react-icons/md"
-import useFormatNumber from "../../hooks/useFormatNumber"
-import LoadingSkeleton from "../loading/skeleton"
+import './closed-debate-card.css'
+import { useNavigate } from 'react-router-dom'
+import { useNavStore } from '../../store/useNavStore'
+import DebateBar from './debate-bar'
+import { MdModeComment } from 'react-icons/md'
+import useFormatNumber from '../../hooks/useFormatNumber'
+import LoadingSkeleton from '../loading/skeleton'
 
 const ClosedDebateCard = () => {
     const navigate = useNavigate()

client/src/components/card/debate-bar.css

@@ -1,10 +1,11 @@
 .debate-bar {
+    position: relative;
+    width: 100%;
+    height: 30px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: 100%;
-    height: 30px;
-    position: relative;
+    gap: 2.5px;
     border-radius: 15px;
     overflow: hidden;
 }

client/src/components/card/debate-bar.tsx

@@ -1,7 +1,7 @@
-import "./debate-bar.css"
-import React from "react"
-import { IoCaretUpSharp } from "react-icons/io5"
-import useFormatNumber from "../../hooks/useFormatNumber"
+import './debate-bar.css'
+import React from 'react'
+import { IoCaretUpSharp } from 'react-icons/io5'
+import useFormatNumber from '../../hooks/useFormatNumber'
 
 interface BarProps {
     debateFrom: number
@@ -18,10 +18,7 @@ const DebateBar: React.FC<BarProps> = ({ debateFrom, debateBy }) => {
             <>
                 <div
                     className='left-side'
-                    style={{
-                        width: `${leftPercentage}%`,
-                        borderRight: `${debateFrom !== 0 && debateBy !== 0 ? "2.5px solid var(--card_background)" : ""}`
-                    }}
+                    style={{ width: `${leftPercentage}%` }}
                 />
                 <div className='from-vote'>
                     <IoCaretUpSharp size={20} />

client/src/components/card/open-debate-card.css

@@ -37,7 +37,7 @@
     line-clamp: 5;
     -webkit-box-orient: vertical;
     padding-top: 10px;
-    font-size: 17px;
+    font-size: 18px;
     color: var(--card_color_secondary);
 }
 

client/src/components/card/open-debate-card.tsx

@@ -1,10 +1,10 @@
-import "./open-debate-card.css"
-import { useNavigate } from "react-router-dom"
-import { useNavStore } from "../../store/useNavStore"
-import { MdModeComment } from "react-icons/md"
-import { IoCaretUpSharp } from "react-icons/io5"
-import useFormatNumber from "../../hooks/useFormatNumber"
-import LoadingSkeleton from "../loading/skeleton"
+import './open-debate-card.css'
+import { useNavigate } from 'react-router-dom'
+import { useNavStore } from '../../store/useNavStore'
+import { MdModeComment } from 'react-icons/md'
+import { IoCaretUpSharp } from 'react-icons/io5'
+import useFormatNumber from '../../hooks/useFormatNumber'
+import LoadingSkeleton from '../loading/skeleton'
 
 const OpenDebateCard = () => {
     const navigate = useNavigate()

client/src/components/loading/skeleton.tsx

@@ -1,4 +1,4 @@
-import "./style.css"
+import './style.css'
 
 interface SkeletonProps {
   style?: React.CSSProperties

client/src/components/loading/svg.tsx

@@ -1,4 +1,4 @@
-import "./style.css"
+import './style.css'
 
 interface Props {
     size: number

client/src/components/modal/auth/forgot-password.tsx

@@ -1,15 +1,15 @@
-import { useState, useCallback } from "react"
-import { useNavigate } from "react-router-dom"
-import { toast } from "sonner"
-import { emailRegex } from "../../../data/regex"
-import { LoadingSVG } from "../../loading/svg"
+import { useState, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'sonner'
+import { emailRegex } from '../../../data/regex'
+import { LoadingSVG } from '../../loading/svg'
 
 const ForgotPassword = () => {
     const navigate = useNavigate()
 
     const [forgotData, setForgotData] = useState({
-        email: "",
-        username: ""
+        email: '',
+        username: ''
     })
     const [isSubmitted, setIsSubmitted] = useState(false)
     const [validationState, setValidationState] = useState(true)
@@ -18,8 +18,8 @@ const ForgotPassword = () => {
         const { name, value } = e.target
 
         setForgotData(() => ({
-            email: name === "email" ? value : "",
-            username: name === "username" ? value : ""
+            email: name === 'email' ? value : '',
+            username: name === 'username' ? value : ''
         }))
 
         setValidationState(!!value)

client/src/components/modal/auth/index.css

@@ -196,7 +196,8 @@
 
 #auth-modal .form__container p {
     width: fit-content;
-    font-size: 17px;
+    font-size: 18px;
+    text-align: center;
 }
 
 #auth-modal .form__container p span {

client/src/components/modal/auth/index.tsx

@@ -1,14 +1,14 @@
-import "./index.css"
-import { useState } from "react"
-import { useLocation, useNavigate } from "react-router-dom"
-import Lottie from "lottie-react"
-import { useAuthStore, AuthTab, useTempStore } from "../../../store/useAuthStore"
-import WavingHand from "../../../lottie/WavingHand.json"
-import LoginTab from "./login-tab"
-import SignupTab from "./signup-tab"
-import ForgotPassword from "./forgot-password"
-import ResetPassword from "./set-password"
-import { IoCloseOutline } from "react-icons/io5"
+import './index.css'
+import { useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import Lottie from 'lottie-react'
+import { useAuthStore, AuthTab, useTempStore } from '../../../store/useAuthStore'
+import WavingHand from '../../../lottie/WavingHand.json'
+import LoginTab from './login-tab'
+import SignupTab from './signup-tab'
+import ForgotPassword from './forgot-password'
+import ResetPassword from './set-password'
+import { IoCloseOutline } from 'react-icons/io5'
 
 type RegisterData = {
     avatar: string | File
@@ -26,11 +26,11 @@ const AuthModal = () => {
     const { tempUser } = useTempStore()
 
     const [registerData, setRegisterData] = useState<RegisterData>(() => ({
-        avatar: tempUser.avatar || "",
-        username: localStorage.getItem("username") || tempUser.username || "",
-        first_name: tempUser.first_name || "",
-        last_name: tempUser.last_name || "",
-        email: tempUser.email || ""
+        avatar: tempUser.avatar || '',
+        username: localStorage.getItem('username') || tempUser.username || '',
+        first_name: tempUser.first_name || '',
+        last_name: tempUser.last_name || '',
+        email: tempUser.email || ''
     }))
 
     const handleCloseModal = () => {

client/src/components/modal/auth/login-tab.tsx

@@ -1,18 +1,18 @@
-import React, { useState, useCallback } from "react"
-import { useNavigate } from "react-router-dom"
-import { toast } from "sonner"
-import { AuthStatus, AuthTab, useAuthStore } from "../../../store/useAuthStore"
-import { FcGoogle } from "react-icons/fc"
-import { LoadingSVG } from "../../loading/svg"
+import React, { useState, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'sonner'
+import { AuthStatus, AuthTab, useAuthStore } from '../../../store/useAuthStore'
+import { FcGoogle } from 'react-icons/fc'
+import { LoadingSVG } from '../../loading/svg'
 
 const LoginTab = () => {
     const navigate = useNavigate()
 
     const { route, setAuthTab, isAuthenticated, setIsAuthenticated, setUser } = useAuthStore()
 
     const [loginData, setLoginData] = useState({
-        id: "",
-        password: ""
+        id: '',
+        password: ''
     })
 
     const [isSubmitted, setIsSubmitted] = useState(false)

client/src/components/modal/auth/set-password.tsx

@@ -1,17 +1,17 @@
-import { useCallback, useState } from "react"
-import { useNavigate } from "react-router-dom"
-import { toast } from "sonner"
-import { AuthStatus, AuthTab, useAuthStore } from "../../../store/useAuthStore"
-import { LoadingSVG } from "../../loading/svg"
+import { useCallback, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'sonner'
+import { AuthStatus, AuthTab, useAuthStore } from '../../../store/useAuthStore'
+import { LoadingSVG } from '../../loading/svg'
 
 const SetPassword = () => {
   const navigate = useNavigate()
 
   const { setUser, setIsAuthenticated, setAuthTab } = useAuthStore()
 
   const [resetData, setResetData] = useState({
-    new: "",
-    confirm: ""
+    new: '',
+    confirm: ''
   })
 
   const [isSubmitted, setIsSubmitted] = useState(false)
@@ -53,7 +53,7 @@ const SetPassword = () => {
 
     if (trimmedNew !== trimmedConfirm) {
       setTimeout(() => setIsSubmitted(false), 500)
-      return toast.error("Password doesn't match")
+      return toast.error('Password does not match')
     }
     else {
       if (trimmedNew.length < 6) {

client/src/components/modal/auth/signup-tab.tsx

@@ -1,13 +1,13 @@
-import React, { useState, useCallback } from "react"
-import { useNavigate } from "react-router-dom"
-import { RegisterDataProps } from "../../../types"
-import { toast } from "sonner"
-import { AuthTab, useAuthStore, useTempStore } from "../../../store/useAuthStore"
-import { LoadingSVG } from "../../loading/svg"
-import { specialCharRegex, usernameRegex, emailRegex } from "../../../data/regex"
-import { MdModeEdit } from "react-icons/md"
-import { GrCloudUpload } from "react-icons/gr"
-import { IoPersonCircleOutline } from "react-icons/io5"
+import React, { useState, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { RegisterDataProps } from '../../../types'
+import { toast } from 'sonner'
+import { AuthTab, useAuthStore, useTempStore } from '../../../store/useAuthStore'
+import { LoadingSVG } from '../../loading/svg'
+import { specialCharRegex, usernameRegex, emailRegex } from '../../../data/regex'
+import { MdModeEdit } from 'react-icons/md'
+import { GrCloudUpload } from 'react-icons/gr'
+import { IoPersonCircleOutline } from 'react-icons/io5'
 
 const SignupTab: React.FC<RegisterDataProps> = ({ registerData, setRegisterData }) => {
     const navigate = useNavigate()