Update invite friends UI

src/components/AccountStreak/InviteFriends.tsx

@@ -3,6 +3,7 @@ import { useAuth } from '../../hooks/use-auth';
 import { useCopyText } from '../../hooks/use-copy-text';
 import { cn } from '../../lib/classname';
 import { CheckIcon } from '../ReactIcons/CheckIcon';
+import {TrophyEmoji} from "../ReactIcons/TrophyEmoji.tsx";
 
 type InviteFriendsProps = {
   refByUserCount: number;
@@ -19,84 +20,63 @@ export function InviteFriends(props: InviteFriendsProps) {
     import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh',
   ).toString();
 
-  if (refByUserCount === 1) {
-    return (
-      <div className="mt-6 flex flex-col text-center text-sm border-t border-t-slate-700/40 pt-5 -mx-4 px-4">
-        <p className="text-slate-500">Invite 5 Friends to roadmap.sh</p>
-        <div className="my-4 flex flex-col items-center bg-slate-900/40 pt-5 pb-4 rounded-lg gap-3.5">
-          <div className="flex flex-row items-center justify-center gap-1.5">
-            <Heart className="size-[20px] fill-current text-yellow-300" />
-            <Heart className="size-[20px] fill-current text-yellow-300" />
-            <Heart className="size-[20px] fill-current text-slate-700" />
-            <Heart className="size-[20px] fill-current text-slate-700" />
-            <Heart className="size-[20px] fill-current text-slate-700" />
-          </div>
-          <p className="text-slate-500">2 of 5 friends invited</p>
-        </div>
-        <p className="text-slate-500">
-          Share{' '}
-          <button className="py-px px-1.5 bg-slate-900/40 rounded-md hover:bg-slate-900/70">
-              this link <Copy className="size-3 inline-block" strokeWidth={3} />
-          </button> to
-          invite your friends.
-        </p>
-      </div>
-    );
-  }
-
   return (
-    <div className="">
-      <hr className="-mx-4 my-4 border-slate-700/20" />
-
-      <h4 className="text-base text-slate-200">Invite Friends</h4>
-      <p className="mt-1 text-sm text-slate-400">
-        Invite your friends to join roadmap.sh
+    <div className="-mx-4 mt-6 flex flex-col border-t border-dashed border-t-slate-700 px-4 pt-5 text-center text-sm">
+      <p className="font-medium text-slate-500">
+        Invite people to join roadmap.sh
       </p>
+      <div className="my-4 flex flex-col items-center gap-3.5 rounded-lg bg-slate-900/40 pb-4 pt-5">
+        <div className="flex flex-row items-center justify-center gap-1.5">
+          {Array.from({ length: 10 }).map((_, index) => (
+            <Heart
+              key={index}
+              className={cn(
+                'size-[20px] fill-current',
+                index < refByUserCount ? 'text-yellow-300' : 'text-slate-700',
+                refByUserCount === 0 && index === 0 ? 'text-slate-500' : '',
+              )}
+            />
+          ))}
+        </div>
+        {refByUserCount === 0 && (
+          <p className="text-slate-500">You haven't invited anyone yet.</p>
+        )}
 
-      <div className="mt-4 flex items-center overflow-hidden rounded-md border border-slate-700">
-        <input
-          type="text"
-          className="grow border-none bg-gray-50 bg-transparent p-1 px-2 text-sm text-slate-300 outline-none focus:outline-none"
-          value={referralLink}
-          onDoubleClick={(e) => {
-            e.currentTarget.select();
-            copyText(referralLink);
-          }}
-          readOnly
-        />
+        {refByUserCount > 0 && refByUserCount < 10 && (
+          <p className="text-slate-500">{refByUserCount} of 10 users joined</p>
+        )}
+
+        {refByUserCount >= 10 && (
+          <p className="text-slate-500">
+            🎉 You've invited {refByUserCount} users
+          </p>
+        )}
+      </div>
+      <p className="leading-normal text-slate-500">
+        Share{' '}
         <button
-          className={cn(
-            'flex items-center gap-2 border-l border-slate-700 p-1.5 px-2 text-sm text-white hover:bg-slate-700',
-            isCopied ? 'text-green-500' : '',
-          )}
           onClick={() => {
             copyText(referralLink);
           }}
+          className={cn(
+            'rounded-md bg-slate-700 px-1.5 py-[0.5px] text-slate-300 hover:bg-slate-600',
+            {
+              'bg-green-500 text-black hover:bg-green-500': isCopied,
+            },
+          )}
         >
-          {isCopied ? (
-            <>
-              <CheckIcon additionalClasses="size-3" />
-              Copied
-            </>
-          ) : (
-            <>
-              <Copy className="size-3" />
-              Copy
-            </>
+          {!isCopied ? 'this link' : 'the copied link'}{' '}
+          {!isCopied && (
+            <Copy
+              className="relative -top-[1.25px] inline-block size-3"
+              strokeWidth={3}
+            />
           )}
-        </button>
-      </div>
-
-      <p className="mt-2.5 text-center text-sm">
-        {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</>}
+          {isCopied && (
+            <CheckIcon additionalClasses="relative -top-[1.25px] inline-block size-3" />
+          )}
+        </button>{' '}
+        with anyone you think would benefit from roadmap.sh
       </p>
 
       <p className="mt-6 text-center text-xs">
@@ -104,7 +84,7 @@ export function InviteFriends(props: InviteFriendsProps) {
           href="/leaderboard"
           className="text-purple-400 underline-offset-2 hover:underline"
         >
-          See how you compare to others
+          See how you rank on the leaderboard
         </a>
       </p>
     </div>