client: modify styling

Casuals4Fun · May 2, 2024 · 4ea6c02 · 4ea6c02
1 parent 9fd28b1
commit 4ea6c02
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 62 deletions.
diff --git a/client/README.md b/client/README.md
diff --git a/client/index.html b/client/index.html
@@ -5,10 +5,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Regular.ttf" type="font/ttf">
-  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Medium.ttf" type="font/ttf">
-  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-SemiBold.ttf" type="font/ttf">
-  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Bold.ttf" type="font/ttf">
+  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Regular.ttf" type="font/ttf" crossOrigin="anonymous" />
+  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Medium.ttf" type="font/ttf" crossOrigin="anonymous" />
+  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-SemiBold.ttf" type="font/ttf" crossOrigin="anonymous" />
+  <link rel="preload" as="font" href="/fonts/Onest/static/Onest-Bold.ttf" type="font/ttf" crossOrigin="anonymous" />
   <link rel="preload" as="image" href="/logo.png" type="image/png" />
 
   <link rel="icon" href="/logo.png" type="image/png" />

diff --git a/client/src/components/button/toggle-theme.css b/client/src/components/button/toggle-theme.css
@@ -67,8 +67,4 @@
 
 .theme__button input[type=checkbox]:checked+.display label .circle .moon {
     opacity: 0;
-}
-
-/* .theme__button label:active .circle {
-    width: 50px;
-} */
+}
diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx
@@ -20,11 +20,11 @@ const ClosedDebateCard = () => {
             <div className='right'>
                 <div className='user-info'>
                     <div className='debate-from'>
-                        <img src="/user1.webp" alt="" />
+                        <img src="/user1.webp" alt="" loading="lazy" />
                         <p>Aniket Das</p>
                     </div>
                     <div className='debate-by'>
-                        <img src="/user2.jpeg" alt="" />
+                        <img src="/user2.jpeg" alt="" loading="lazy" />
                         <p>Pratik Prasad</p>
                     </div>
                 </div>

diff --git a/client/src/components/card/open-debate-card.css b/client/src/components/card/open-debate-card.css
@@ -32,7 +32,7 @@
 #open-card .debate-body {
     overflow: hidden;
     display: -webkit-box;
-    -webkit-line-clamp: 5;
+    -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     padding-top: 10px;
     font-size: 16px;
@@ -45,7 +45,6 @@
     gap: 10px;
     font-size: 15px;
     font-weight: 600;
-    /* color: var(--card_color_secondary); */
 }
 
 #open-card .debate-footer {
@@ -104,7 +103,7 @@
     }
 
     #open-card .debate-body {
-        -webkit-line-clamp: 6;
+        -webkit-line-clamp: 5;
     }
 }
 
@@ -124,8 +123,4 @@
     #open-card .debate-header a {
         padding-top: 0;
     }
-
-    #open-card .debate-body {
-        -webkit-line-clamp: 6;
-    }
 }
diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx
@@ -32,7 +32,7 @@ const OpenDebateCard = () => {
             </div>
             <div className='debate-footer'>
                 <div className='user-info'>
-                    <img src="/user.jpg" alt="" />
+                    <img src="/user.jpg" alt="" loading="lazy" />
                     <div className='user-detail'>
                         <p>Julie Roberts</p>
                         <p>julieroberts</p>

diff --git a/client/src/components/sidebar/profile.css b/client/src/components/sidebar/profile.css
@@ -1,21 +1,53 @@
+:root {
+    --text_primary: #0a0a0a;
+    --text_secondary: #AAAAAA;
+    --text_tertiary: #212122;
+}
+
+[data-theme='dark'] {
+    --text_primary: #9f9f9f;
+    --text_secondary: #fff;
+    --text_tertiary: #868686;
+}
+
 .profile__wrapper {
     position: relative;
     display: flex;
     gap: 10px;
     align-items: center;
 }
 
-.profile__wrapper .login-btn {
-    width: 125px;
+.profile__wrapper .join-btn {
     height: 40px;
     display: flex;
-    gap: 5px;
     align-items: center;
     justify-content: center;
-    border-radius: 30px;
-    font-size: 17.5px;
-    background-color: var(--explore_input_bg);
-    color: var(--body_color);
+    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;
+    font-weight: 600;
+    font-size: 20px;
+    font-family: inherit;
+}
+
+@keyframes shine {
+    0% {
+        background-position: 0;
+    }
+
+    60% {
+        background-position: 180px;
+    }
+
+    100% {
+        background-position: 180px;
+    }
+}
+
+.profile__wrapper .join-btn svg {
+    display: none;
 }
 
 .profile__image,
@@ -129,13 +161,18 @@
 }
 
 @media screen and (max-width: 767px) {
-    .profile__wrapper .login-btn {
+    .profile__wrapper .join-btn {
         width: 40px;
         height: 40px;
         border-radius: 50%;
+        background: var(--explore_input_bg);
+    }
+
+    .profile__wrapper .join-btn svg {
+        display: block;
     }
 
-    .profile__wrapper .login-btn p {
+    .profile__wrapper .join-btn p {
         display: none;
     }
 

diff --git a/client/src/components/sidebar/profile.tsx b/client/src/components/sidebar/profile.tsx
@@ -92,7 +92,7 @@ const Profile = () => {
                         onClick={handleToggleMenu}
                     >
                         {user.avatar ? (
-                            <img src={user.avatar} alt="" />
+                            <img src={user.avatar} alt="" loading="lazy" />
                         ) : (
                             <FaRegUser style={{ width: '50%', height: '50%' }} />
                         )}
@@ -108,12 +108,12 @@ const Profile = () => {
                         {theme === Theme.Dark ? <img className="sun" src="theme/sun.svg" alt="" /> : <img className="moon" src="theme/moon.png" alt="" />}
                     </button>
                     <button
-                        className='login-btn'
+                        className='join-btn'
                         style={{ border: `${authTab !== AuthTab.Closed ? '2px solid var(--body_color)' : ''}` }}
                         onClick={() => setAuthTab(AuthTab.Login)}
                     >
                         <GoPerson size={20} />
-                        <p>Login</p>
+                        <p>Join now</p>
                     </button>
                 </>
             )}
@@ -124,7 +124,7 @@ const Profile = () => {
                         <div className="profile-wrapper">
                             <div className='modal-profile__image'>
                                 {user.avatar ? (
-                                    <img src={user.avatar} alt="" />
+                                    <img src={user.avatar} alt="" loading="lazy" />
                                 ) : (
                                     <FaRegUser style={{ width: '50%', height: '50%' }} />
                                 )}