From 8d8bca0c140b069bccd5f4caa2306413f8498579 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Fri, 27 Sep 2024 01:49:12 +0600
Subject: [PATCH] fix: update UI

---
 .../AccountStreak/AccountStreak.tsx           |  8 ------
 .../AccountStreak/InviteFriends.tsx           | 27 ++++++++++++-------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/AccountStreak/AccountStreak.tsx b/src/components/AccountStreak/AccountStreak.tsx
index 9ffd87bc9..306d660ec 100644
--- a/src/components/AccountStreak/AccountStreak.tsx
+++ b/src/components/AccountStreak/AccountStreak.tsx
@@ -177,14 +177,6 @@ export function AccountStreak(props: AccountStreakProps) {
             <p className="-mt-[0px] mb-[1.5px] text-center text-xs tracking-wide text-slate-500">
               Visit every day to keep your streak going!
             </p>
-            <p className="mt-1.5 text-center text-xs">
-              <a
-                href="/leaderboard"
-                className="text-purple-400 underline-offset-2 hover:underline"
-              >
-                See how you compare to others
-              </a>
-            </p>
 
             <InviteFriends
               refByUserCount={accountStreak?.refByUserCount || 0}
diff --git a/src/components/AccountStreak/InviteFriends.tsx b/src/components/AccountStreak/InviteFriends.tsx
index 00fd5724c..791d7be58 100644
--- a/src/components/AccountStreak/InviteFriends.tsx
+++ b/src/components/AccountStreak/InviteFriends.tsx
@@ -63,18 +63,25 @@ export function InviteFriends(props: InviteFriendsProps) {
       </div>
 
       <p className="mt-2.5 text-center text-xs">
-        🥳 You have invited{' '}
-        <span className="font-medium underline underline-offset-2">
-          {refByUserCount} users so far
-        </span>
+        {refByUserCount > 0 && (
+          <>
+            🥳 You have invited{' '}
+            <span className="font-medium underline underline-offset-2">
+              {refByUserCount} user{refByUserCount > 1 ? 's' : ''} so far
+            </span>
+          </>
+        )}
+        {refByUserCount === 0 && <>🤔 You haven't invited anyone yet</>}
       </p>
 
-      <a
-        href="/leaderboard"
-        className="mt-4 flex justify-center text-center text-sm font-medium text-purple-500 underline-offset-2 hover:underline"
-      >
-        See how you are compare to others
-      </a>
+      <p className="mt-2.5 text-center text-xs">
+        <a
+          href="/leaderboard"
+          className="text-purple-400 underline-offset-2 hover:underline"
+        >
+          See how you compare to others
+        </a>
+      </p>
     </div>
   );
 }