Merge pull request #16 from ai16zpartners/feature/style-fixings

Style Fixing on Leaderboard

.env.example

@@ -0,0 +1,7 @@
+NEXT_PUBLIC_SOLANA_API='' 
+TWITTER_CLIENT_ID=''
+TWITTER_CLIENT_SECRET=''
+DISCORD_CLIENT_ID=''
+DISCORD_CLIENT_SECRET=''
+NEXTAUTH_SECRET=
+NEXTAUTH_URL=''

src/components/LeaderboardPartners.module.css

@@ -8,7 +8,7 @@
 
 .headingParent {
     display: grid;
-    grid-template-columns: 50px 3fr 1fr 1fr;
+    grid-template-columns: 55px 3fr 1fr 1fr;
     align-items: center;
     padding: 12px 16px;
     gap: 16px;
@@ -34,13 +34,14 @@
 
 .row, .row1 {
     display: grid;
-    grid-template-columns: 5px 3fr 5fr 2fr;
+    grid-template-columns: 55px 3fr 1fr ;
     align-items: center;
     padding: 8px 16px;
-    gap: 16px;
+    gap: 10px;
     color: black;
     border-radius: 14px;
     width: 100%;
+    margin-bottom: 6px;
 }
 
 .row {
@@ -52,15 +53,18 @@
 }
 
 .text {
-    font-size: 22px;
+    font-size: 16px;
     font-weight: 600;
     color: #9B8D7D;
-    text-align: left;
+    margin-right: 1rem;
+    /* text-align: right; */
+    /* min-width: 55px; */
 }
 
 .rowChild {
     display: flex;
     align-items: center;
+
 }
 
 .avatarImage {
@@ -74,7 +78,7 @@
 .textParent {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 2px;
 }
 
 .text1 {
@@ -86,7 +90,7 @@
 .text2 {
     color: #9B8D7D;
     font-size: 14px;
-    font-weight: bold;
+    font-weight: 600;
 }
 
 .textWrapper {
@@ -148,7 +152,6 @@
     opacity: 1;
 }
 
-/* Optional: Add a small arrow at the bottom of tooltip */
 .tooltip::after {
     content: '';
     position: absolute;
@@ -162,7 +165,6 @@
 
 @media (max-width: 768px) {
     .headingParent, .row, .row1 {
-        grid-template-columns: 12px 1fr 0.8fr 0.8fr;
         padding: 8px 12px;
         gap: 12px;
     }
@@ -196,6 +198,6 @@
     }
 
     .textParent {
-        gap: 2px;
+        gap: 0px;
     }
-}
+}

src/components/LeaderboardPartners.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { useState, useEffect } from 'react'; 
+import { useState, useEffect } from 'react';
 import Image from "next/image";
 import styles from './LeaderboardPartners.module.css';
 import { useMediaQuery } from 'react-responsive';
@@ -36,7 +36,7 @@ const LeaderboardPartners: FC = () => {
           throw new Error('Failed to fetch data');
         }
         const data = await response.json();
-        
+
         if (!data.partners?.length || !data.trustScores) {
           throw new Error('Invalid or empty data received');
         }
@@ -57,7 +57,7 @@ const LeaderboardPartners: FC = () => {
       } catch (err: any) {
         console.error('Fetch error:', err);
         setError(err.message);
-        
+
         if (retryCount < MAX_RETRIES) {
           setTimeout(() => {
             setRetryCount(prev => prev + 1);
@@ -80,87 +80,77 @@ const LeaderboardPartners: FC = () => {
     return value.toFixed(2);
   };
 
-  const renderSkeletonRow = (index: number) => (
-    <div key={`skeleton-${index}`} className={index % 2 === 0 ? styles.row : styles.row1}>
-      <div className={styles.text}>
-        <div className="animate-pulse bg-gray-300 h-6 w-8 rounded" />
-      </div>
-      <div className={styles.rowChild}>
-        <div className="animate-pulse bg-gray-300 h-[34px] w-[34px] rounded-full" />
-        <div className={styles.textParent}>
-          <div className="animate-pulse bg-gray-300 h-6 w-32 rounded" />
-          <div className="animate-pulse bg-gray-300 h-4 w-16 rounded mt-1" />
-        </div>
-      </div>
-      <div className={styles.textWrapper}>
-        <div className="animate-pulse bg-gray-300 h-6 w-16 rounded" />
-      </div>
-      <div className={styles.text3}>
-        <div className="animate-pulse bg-gray-300 h-6 w-24 rounded" />
-      </div>
+  const Loader = () => (
+    <div className="flex justify-center items-center w-full py-8">
+      <div className="w-8 h-8 border-4 border-[#F98C13] border-t-transparent rounded-full animate-spin" />
     </div>
   );
 
+
   return (
     <div className={styles.frameParent}>
-      <div className={styles.headingParent}>
-        <div className={styles.heading}>PARTNER</div>
-        <div className={styles.heading}></div>
-        <div className={styles.heading2}>TRUST SCORE</div>
-        <div className={styles.heading3}>HOLDINGS</div>
-      </div>
-
       {isLoading ? (
-        Array(5).fill(0).map((_, index) => renderSkeletonRow(index))
+        <Loader />
       ) : error ? (
         <div className={styles.errorMessage}>
           Error loading partners. Retrying... ({retryCount}/{MAX_RETRIES})
         </div>
       ) : !partners?.length ? (
         <div className={styles.emptyMessage}>No partners found</div>
       ) : (
-        partners.map((partner) => (
-          <div key={partner.address} className={partner.rank % 2 === 0 ? styles.row : styles.row1}>
-            <div className={styles.text}>{partner.rank}</div>
-            <div className={styles.rowChild}>
-              <Image 
-                width={34} 
-                height={34} 
-                alt="Partner avatar" 
-                src="/profile_default.png"
-                className={styles.avatarImage} 
-              />
-              <div className={styles.textParent}>
-                <div className={styles.text1}>{partner.displayAddress}</div>
-                <div className={styles.text2}>Partner</div>
-              </div>
-            </div>
-            <div className={styles.textWrapper}>
-              {partner.trustScore === 0 ? (
-                <div className={styles.tooltipContainer}>
-                  <Image 
-                    src="/null.svg"
-                    alt="Null trust score"
-                    width={20}
-                    height={20}
-                    className={styles.trustScoreImage}
+        <>
+          <div className={styles.headingParent}>
+            <div className={styles.heading}>PARTNER</div>
+            <div className={styles.heading}></div>
+            <div className={styles.heading2}>TRUST SCORE</div>
+            <div className={styles.heading3}>HOLDINGS</div>
+          </div>
+          {
+            partners.map((partner) => (
+              <div key={partner.address} className={partner.rank % 2 === 0 ? styles.row : styles.row1}>
+                <div className={styles.rowChild}>
+                  <div className={styles.text}>{partner.rank}</div>
+                  <Image
+                    width={34}
+                    height={34}
+                    alt="Partner avatar"
+                    src="/profile_default.png"
+                    className={styles.avatarImage}
                   />
-                  <span className={styles.tooltip}>
-                  AI Marc is Calculating Trust
-                  </span>
+                  <div className={styles.textParent}>
+                    <div className={styles.text1}>{partner.displayAddress}</div>
+                    <div className={styles.text2}>Partner</div>
+                  </div>
                 </div>
-              ) : (
-                <div className={styles.text3}>{partner.trustScore.toFixed(1)}</div>
-              )}
-            </div>
-            <div className={styles.text3}>
-              {formatHoldings(partner.holdings)}
-            </div>
-          </div>
-        ))
+                <div className={styles.textWrapper}>
+                  {partner.trustScore === 0 ? (
+                    <div className={styles.tooltipContainer}>
+                      <Image
+                        src="/null.svg"
+                        alt="Null trust score"
+                        width={15}
+                        height={15}
+                        className={styles.trustScoreImage}
+                      />
+                      <span className={styles.tooltip}>
+                        AI Marc is Calculating Trust
+                      </span>
+                    </div>
+                  ) : (
+                    <div className={styles.text3}>{partner.trustScore.toFixed(1)}</div>
+                  )}
+                </div>
+                <div className={styles.text3}>
+                  {formatHoldings(partner.holdings)}
+                </div>
+              </div>
+            ))
+          }
+        </>
+
       )}
     </div>
   );
 };
 
-export default LeaderboardPartners;
+export default LeaderboardPartners;

src/components/LeaderboardTotals.module.css

@@ -1,5 +1,6 @@
 .frameParent {
-    width: 100%;
+    width: 579px; /* Set default width */
+    max-width: 100%; 
     position: relative;
     border-radius: 14px;
     background: linear-gradient(180deg, #f98c13, #ffaf03);
@@ -43,7 +44,7 @@
     position: relative;
     line-height: 32px;
     font-weight: 600;
-    font-size: 34px;
+    font-size: 24px;
 }
 
 .headingWrapper {
@@ -65,6 +66,10 @@
 }
 
 @media (max-width: 768px) {
+    .frameParent {
+        width: 100%; 
+        padding: 16px;
+    }
     .instanceParent {
         flex-direction: row;
         gap: 4px;

src/views/home/index.module.css

@@ -4,13 +4,12 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
-    padding: 0 8px;
+    padding: 32px 16px;
 }
 
 .content {
     width: 100%;
-    max-width: 600px;
+    max-width: 800px;
     margin: 0 auto;
 }
 
@@ -19,62 +18,31 @@
     line-height: 42px;
     font-weight: 600;
     color: #242424;
-    margin-bottom: 24px;
+    margin-bottom: 32px;
 }
 
-.buttonParent {
-    border-radius: 14px;
-    background-color: #e8e3d6;
-    overflow: hidden;
-    display: flex;
-    flex-direction: row;
-    align-items: left;
-    justify-content: flex-start;
-    padding: 4px;
-    margin-bottom: 24px;
-}
-
-.button {
-    width: 110px;
-    border-radius: 14px;
-    background-color: #b5ad94;
-    height: 38px;
-    overflow: hidden;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 14px;
-    box-sizing: border-box;
-    max-width: 600px;
-    color: #FFFFFF;
+.section {
+    margin-bottom: 32px;
+    width: 100%;
 }
 
-.button1 {
-    width: 110px;
-    border-radius: 14px;
-    background-color: transparent;
-    height: 38px;
-    overflow: hidden;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 14px;
-    box-sizing: border-box;
-    max-width: 600px;
-    cursor: pointer;
-    color: #9b8d7d;
+.leaderboardWrapper {
+    position: relative;
+    width: 100%;
 }
 
 @media (max-width: 768px) {
     .container {
-        padding: 0;
+        padding: 24px 16px;
     }
 
     .content {
-        padding: 0 8px;
+        padding: 0;
+    }
+
+    .title {
+        font-size: 28px;
+        line-height: 36px;
+        margin-bottom: 24px;
     }
 }