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