fix: update UI

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}

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{' '}
+        {refByUserCount > 0 && (
-        <span className="font-medium underline underline-offset-2">
+          <>
-          {refByUserCount} users so far
+            🥳 You have invited{' '}
-        </span>
+            <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
+      <p className="mt-2.5 text-center text-xs">
-        href="/leaderboard"
+        <a
-        className="mt-4 flex justify-center text-center text-sm font-medium text-purple-500 underline-offset-2 hover:underline"
+          href="/leaderboard"
-      >
+          className="text-purple-400 underline-offset-2 hover:underline"
-        See how you are compare to others
+        >
-      </a>
+          See how you compare to others
+        </a>
+      </p>
     </div>
   );
 }