UI redesign for invite page

src/components/AccountStreak/InviteFriends.tsx

@@ -3,7 +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";
+import { TrophyEmoji } from '../ReactIcons/TrophyEmoji.tsx';
 
 type InviteFriendsProps = {
   refByUserCount: number;
@@ -21,65 +21,61 @@ export function InviteFriends(props: InviteFriendsProps) {
   ).toString();
 
   return (
-    <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">
+    <div className="-mx-4 mt-6 flex flex-col border-t border-dashed border-t-slate-700/40 px-4 pt-5 text-center text-sm">
+      <p className="text-slate-500">Invite people to join roadmap.sh</p>
+
+      <div className="flex flex-col items-center rounded-lg bg-slate-900/40 pb-4 pt-5 my-4">
+        <p className="text-xs text-slate-500">
+          {refByUserCount === 0 && <>You haven't invited anyone yet.</>}
+          {refByUserCount > 0 && refByUserCount < 10 && (
+            <>{refByUserCount} of 10 users joined</>
+          )}
+        </p>
+
+        {refByUserCount >= 10 && <>🎉 You've invited {refByUserCount} users</>}
+
+        <div className="my-3 flex flex-row items-center justify-center gap-1">
           {Array.from({ length: 10 }).map((_, index) => (
             <Heart
               key={index}
               className={cn(
-                'size-[20px] fill-current',
+                'size-[23px] 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>
-        )}
-
-        {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>
-        )}
+        <p className={'mb-3 text-xs text-slate-500'}>
+          Share the link below with anyone you think would benefit from using
+          roadmap.sh
+        </p>
+        <p className="text-slate-500">
+          <button
+            onClick={() => {
+              copyText(referralLink);
+            }}
+            className={cn(
+              'rounded-md bg-slate-700 px-3 py-1 text-xs text-slate-300 hover:bg-slate-600',
+              {
+                'bg-green-500 text-black hover:bg-green-500': isCopied,
+              },
+            )}
+          >
+            {!isCopied ? 'Copy Invite Link' : 'Invite Link Copied'}{' '}
+            {!isCopied && (
+              <Copy
+                className="relative -top-[1.25px] ml-1.5 inline-block size-3"
+                strokeWidth={3}
+              />
+            )}
+            {isCopied && (
+              <CheckIcon additionalClasses="relative ml-1.5 -top-[1.25px] inline-block size-3" />
+            )}
+          </button>
+        </p>
       </div>
-      <p className="leading-normal text-slate-500">
-        Share{' '}
-        <button
-          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 ? 'this link' : 'the copied link'}{' '}
-          {!isCopied && (
-            <Copy
-              className="relative -top-[1.25px] inline-block size-3"
-              strokeWidth={3}
-            />
-          )}
-          {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">
+      <p className="text-center text-xs">
         <a
           href="/leaderboard"
           className="text-purple-400 underline-offset-2 hover:underline"