client: wip alignment

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

Hide file tree

Showing 4 changed files with 17 additions and 18 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -83,9 +83,8 @@
     }
 
     #main {
-        padding: 0 10px;
-        padding-top: 75px;
-        padding-bottom: 15px;
+        padding: 10px;
+        padding-top: 70px;
         width: 100%;
     }
 

diff --git a/client/src/components/card/open-debate-card.css b/client/src/components/card/open-debate-card.css
@@ -40,7 +40,6 @@
 }
 
 #open-card .debate-info {
-    padding: 15px 0;
     display: flex;
     gap: 10px;
     font-size: 15px;
@@ -55,6 +54,7 @@
 
 #open-card .user-info {
     width: 70%;
+    padding: 10px 0 15px 0;
     display: flex;
     gap: 10px;
     align-items: center;

diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx
@@ -20,22 +20,22 @@ 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' }}>
-                    <MdModeComment size={15} />
-                    <p>{useFormatNumber(1300)}</p>
+            <div className='user-info'>
+                <img src="/user.jpg" alt="" loading="lazy" />
+                <div className='user-detail'>
+                    <p>Julie Roberts</p>
+                    <p>julieroberts</p>
                 </div>
             </div>
             <div className='debate-footer'>
-                <div className='user-info'>
-                    <img src="/user.jpg" alt="" loading="lazy" />
-                    <div className='user-detail'>
-                        <p>Julie Roberts</p>
-                        <p>julieroberts</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' }}>
+                        <MdModeComment size={15} />
+                        <p>{useFormatNumber(1300)}</p>
                     </div>
                 </div>
                 <p className='created-date'>15 mins ago</p>

diff --git a/client/src/pages/home/style.css b/client/src/pages/home/style.css
@@ -7,6 +7,6 @@
 
 @media screen and (max-width: 480px) {
     #home {
-        gap: 15px;
+        gap: 10px;
     }
 }