client: modify debate card design

Casuals4Fun · Apr 19, 2024 · d474489 · d474489
1 parent 96c1adc
commit d474489
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 9 deletions.
diff --git a/client/src/components/card/closed-debate-card.css b/client/src/components/card/closed-debate-card.css
@@ -117,6 +117,9 @@
 
 #closed-card .right .debate-info p {
     font-size: 14px;
+}
+
+#closed-card .right .debate-info .created-at {
     color: var(--card_color_secondary);
 }
 

diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx
@@ -2,6 +2,7 @@ import "./closed-debate-card.css";
 import { Link } from "react-router-dom";
 import DebateBar from "./debate-bar";
 import useFormatNumber from "../../hooks/useFormatNumber";
+import { FaComments } from "react-icons/fa";
 
 const ClosedDebateCard = () => {
     return (
@@ -31,8 +32,11 @@ const ClosedDebateCard = () => {
                     <DebateBar debateFrom={423} debateBy={516} />
                 </div>
                 <div className='debate-info'>
-                    <p>{useFormatNumber(210)} comments</p>
-                    <p>5 days ago</p>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '5px', fontSize: '15px', fontWeight: '600' }}>
+                        <FaComments size={15} />
+                        <p>{useFormatNumber(1300)}</p>
+                    </div>
+                    <p className='created-at'>5 days ago</p>
                 </div>
             </div>
         </div>

diff --git a/client/src/components/card/debate-bar.css b/client/src/components/card/debate-bar.css
@@ -26,15 +26,17 @@
 .debate-bar .from-vote,
 .debate-bar .to-vote {
     position: absolute;
+    display: flex;
+    align-items: center;
     font-size: 15px;
-    font-weight: 500;
+    font-weight: 600;
     color: var(--card_background);
 }
 
 .debate-bar .from-vote {
-    left: 20px;
+    left: 10px;
 }
 
 .debate-bar .to-vote {
-    right: 20px;
+    right: 10px;
 }
diff --git a/client/src/components/card/debate-bar.tsx b/client/src/components/card/debate-bar.tsx
@@ -1,6 +1,7 @@
 import "./debate-bar.css";
 import React from "react";
 import useFormatNumber from "../../hooks/useFormatNumber";
+import { IoCaretUpSharp } from "react-icons/io5";
 
 interface BarProps {
     debateFrom: number;
@@ -22,14 +23,20 @@ const DebateBar: React.FC<BarProps> = ({ debateFrom, debateBy }) => {
                         borderRight: `${debateFrom !== 0 && debateBy !== 0 ? "2.5px solid var(--card_background)" : ""}`
                     }}
                 />
-                <p className='from-vote'>{useFormatNumber(debateFrom)}</p>
+                <div className='from-vote'>
+                    <IoCaretUpSharp size={20} />
+                    <p>{useFormatNumber(debateFrom)}</p>
+                </div>
             </>
             <>
                 <div
                     className='right-side'
                     style={{ width: `${rightPercentage}%` }}
                 />
-                <p className='to-vote'>{useFormatNumber(debateBy)}</p>
+                <div className='to-vote'>
+                    <IoCaretUpSharp size={20} />
+                    <p>{useFormatNumber(debateBy)}</p>
+                </div>
             </>
         </div>
     );

diff --git a/client/src/components/card/open-debate-card.css b/client/src/components/card/open-debate-card.css
@@ -39,8 +39,16 @@
     color: var(--card_color_secondary);
 }
 
+#open-card .debate-info {
+    padding: 15px 0;
+    display: flex;
+    gap: 10px;
+    font-size: 15px;
+    font-weight: 600;
+    /* color: var(--card_color_secondary); */
+}
+
 #open-card .debate-footer {
-    padding-top: 15px;
     display: flex;
     align-items: end;
     justify-content: space-between;
@@ -118,6 +126,6 @@
     }
 
     #open-card .debate-body {
-        -webkit-line-clamp: 7;
+        -webkit-line-clamp: 6;
     }
 }
diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx
@@ -1,5 +1,8 @@
 import "./open-debate-card.css";
 import { Link } from "react-router-dom";
+import useFormatNumber from "../../hooks/useFormatNumber";
+import { IoCaretUpSharp } from "react-icons/io5";
+import { FaComments } from "react-icons/fa";
 
 const OpenDebateCard = () => {
     return (
@@ -17,6 +20,16 @@ const OpenDebateCard = () => {
                 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!
                 Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem.
             </p>
+            <div className='debate-info'>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
+                    <IoCaretUpSharp size={20} />
+                    <p>{useFormatNumber(4500)}</p>
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                    <FaComments size={15} />
+                    <p>{useFormatNumber(1300)}</p>
+                </div>
+            </div>
             <div className='debate-footer'>
                 <div className='user-info'>
                     <img src="/user.jpg" alt="" />