From 49608d94a7782cfbe4c70dc560020940bddaaa80 Mon Sep 17 00:00:00 2001
From: bal7hazar <bal7hazar@proton.me>
Date: Tue, 19 Nov 2024 14:41:39 +0100
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=90=9B=20Minor=20design=20fixes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../profile/src/components/achievements/leaderboard.tsx  | 7 ++-----
 packages/profile/src/components/achievements/trophy.tsx  | 9 +--------
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/profile/src/components/achievements/leaderboard.tsx b/packages/profile/src/components/achievements/leaderboard.tsx
index 874437e9b..4006e538c 100644
--- a/packages/profile/src/components/achievements/leaderboard.tsx
+++ b/packages/profile/src/components/achievements/leaderboard.tsx
@@ -88,12 +88,11 @@ function Row({
           self && "bg-quaternary text-primary",
         )}
       >
-        <div className="flex items-center justify-between grow sticky top-0">
+        <div className="flex items-center justify-between grow sticky top-0 gap-x-3">
           <div className="flex items-center gap-x-4 sticky top-0">
             <p className="text-muted-foreground min-w-6 sticky top-0">{`${rank}.`}</p>
             <User
               username={!username ? address.slice(0, 9) : username}
-              self={self}
               Icon={SpaceInvaderIcon}
             />
           </div>
@@ -107,18 +106,16 @@ function Row({
 
 function User({
   username,
-  self,
   Icon,
 }: {
   username: string;
-  self: boolean;
   Icon: React.ComponentType<StateIconProps>;
 }) {
   return (
     <div className="flex items-center gap-x-2">
       <Icon className="shrink-0" size="default" variant="line" />
       <p className="text-ellipsis line-clamp-1 break-all">
-        {self ? `${username} (you)` : username}
+        {username}
       </p>
     </div>
   );
diff --git a/packages/profile/src/components/achievements/trophy.tsx b/packages/profile/src/components/achievements/trophy.tsx
index acc7a2aef..c5461b4e6 100644
--- a/packages/profile/src/components/achievements/trophy.tsx
+++ b/packages/profile/src/components/achievements/trophy.tsx
@@ -268,13 +268,6 @@ function Progress({
             {`${count.toLocaleString()}`}
           </p>
         </div>
-      ) : total > 1 ? (
-        <div className="flex items-center gap-1">
-          <div className="text-xs text-quaternary-foreground" />
-          <p className="text-xs text-quaternary-foreground font-medium">
-            {`${count.toLocaleString()} of ${total.toLocaleString()}`}
-          </p>
-        </div>
       ) : count >= total ? (
         <div className="flex items-center gap-1">
           <div className="fa-solid fa-check text-xs text-quaternary-foreground" />
@@ -282,7 +275,7 @@ function Progress({
         </div>
       ) : (
         <p className="text-xs text-quaternary-foreground font-medium">
-          {`${count.toLocaleString()} / ${total.toLocaleString()}`}
+          {`${count.toLocaleString()} of ${total.toLocaleString()}`}
         </p>
       )}
     </div>

From 9c04ba2852db60991182ceba7a977f334479b39f Mon Sep 17 00:00:00 2001
From: bal7hazar <bal7hazar@proton.me>
Date: Tue, 19 Nov 2024 14:59:08 +0100
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=90=9B=20Minor=20design=20fixes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../profile/src/components/achievements/trophy.tsx    | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/profile/src/components/achievements/trophy.tsx b/packages/profile/src/components/achievements/trophy.tsx
index c5461b4e6..b9b1e56f1 100644
--- a/packages/profile/src/components/achievements/trophy.tsx
+++ b/packages/profile/src/components/achievements/trophy.tsx
@@ -261,18 +261,13 @@ function Progress({
           )}
         />
       </div>
-      {count >= total && total > 1 ? (
-        <div className="flex items-center gap-1">
+      {count >= total ? (
+        <div className="flex items-center gap-x-2">
           <div className="fa-solid fa-check text-xs text-quaternary-foreground" />
           <p className="text-xs text-quaternary-foreground font-medium">
-            {`${count.toLocaleString()}`}
+            {total > 1 ? `${count.toLocaleString()}` : "Completed"}
           </p>
         </div>
-      ) : count >= total ? (
-        <div className="flex items-center gap-1">
-          <div className="fa-solid fa-check text-xs text-quaternary-foreground" />
-          <p className="text-xs text-quaternary-foreground">Completed</p>
-        </div>
       ) : (
         <p className="text-xs text-quaternary-foreground font-medium">
           {`${count.toLocaleString()} of ${total.toLocaleString()}`}

From 091ddab2cb08b5cf64e392f1c6b24d6bfa0b68d1 Mon Sep 17 00:00:00 2001
From: bal7hazar <bal7hazar@proton.me>
Date: Tue, 19 Nov 2024 15:00:26 +0100
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=92=84=20Code=20format?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/profile/src/components/achievements/leaderboard.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/profile/src/components/achievements/leaderboard.tsx b/packages/profile/src/components/achievements/leaderboard.tsx
index 4006e538c..3a9ed3aab 100644
--- a/packages/profile/src/components/achievements/leaderboard.tsx
+++ b/packages/profile/src/components/achievements/leaderboard.tsx
@@ -114,9 +114,7 @@ function User({
   return (
     <div className="flex items-center gap-x-2">
       <Icon className="shrink-0" size="default" variant="line" />
-      <p className="text-ellipsis line-clamp-1 break-all">
-        {username}
-      </p>
+      <p className="text-ellipsis line-clamp-1 break-all">{username}</p>
     </div>
   );
 }

From 272159ee0e5ccd53a2a1464228ab798205841416 Mon Sep 17 00:00:00 2001
From: bal7hazar <bal7hazar@proton.me>
Date: Tue, 19 Nov 2024 19:21:51 +0100
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=90=9B=20Fix=20some=20padding=20misma?=
 =?UTF-8?q?tches?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/achievements/index.tsx     |  2 +-
 .../src/components/achievements/tab.tsx       | 13 +++--
 .../src/components/achievements/trophies.tsx  | 48 ++++++++++---------
 3 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/packages/profile/src/components/achievements/index.tsx b/packages/profile/src/components/achievements/index.tsx
index d742a8e46..0f6563a1c 100644
--- a/packages/profile/src/components/achievements/index.tsx
+++ b/packages/profile/src/components/achievements/index.tsx
@@ -90,7 +90,7 @@ export function Achievements() {
       {achievements.length ? (
         <LayoutContent className="pb-4 select-none">
           {isSelf && (
-            <div className="flex justify-between gap-4">
+            <div className="flex justify-between gap-x-3 gap-y-4">
               <TrophiesTab
                 active={activeTab === "trophies"}
                 completed={completed}
diff --git a/packages/profile/src/components/achievements/tab.tsx b/packages/profile/src/components/achievements/tab.tsx
index b6fc8cbd5..a2d8430f9 100644
--- a/packages/profile/src/components/achievements/tab.tsx
+++ b/packages/profile/src/components/achievements/tab.tsx
@@ -19,9 +19,9 @@ export function TrophiesTab({
   onClick: () => void;
 }) {
   return (
-    <Tab active={active} onClick={onClick}>
+    <Tab priority={true} active={active} onClick={onClick}>
       <Item Icon={TrophyIcon} active={active} label={"Achievements"} />
-      <p className="bg-quinary text-xs rounded-2xl px-2 py-1 font-bold">
+      <p className="bg-quinary text-xs rounded-2xl px-1.5 py-0.5 font-bold">
         {`${completed}/${total}`}
       </p>
     </Tab>
@@ -40,7 +40,7 @@ export function LeaderboardTab({
   onClick: () => void;
 }) {
   return (
-    <Tab active={active} onClick={onClick}>
+    <Tab priority={false} active={active} onClick={onClick}>
       <Item
         Icon={LeaderboardIcon}
         active={active}
@@ -76,10 +76,12 @@ export function Scoreboard({
 
 export function Tab({
   active,
+  priority,
   onClick,
   children,
 }: {
   active: boolean;
+  priority: boolean;
   onClick: () => void;
   children: React.ReactNode;
 }) {
@@ -88,7 +90,8 @@ export function Tab({
   return (
     <div
       className={cn(
-        "h-10 flex justify-between items-center grow border border-secondary rounded-md px-4 py-2 cursor-pointer",
+        "h-10 grow w-1/2 flex justify-between items-center gap-2 border border-secondary rounded-md p-3 cursor-pointer",
+        priority && "min-w-1/2",
         active ? "opacity-100 bg-secondary" : "opacity-50 bg-background",
         hovered && (active ? "opacity-90" : "bg-secondary/50"),
       )}
@@ -111,7 +114,7 @@ export function Item({
   label: string;
 }) {
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-1">
       <Icon size="sm" variant={active ? "solid" : "line"} />
       <p className="text-sm">{label}</p>
     </div>
diff --git a/packages/profile/src/components/achievements/trophies.tsx b/packages/profile/src/components/achievements/trophies.tsx
index 949601266..cc4849cd6 100644
--- a/packages/profile/src/components/achievements/trophies.tsx
+++ b/packages/profile/src/components/achievements/trophies.tsx
@@ -49,7 +49,7 @@ export function Trophies({
   );
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col gap-4">
       <div className="h-8 bg-secondary py-2 px-3 flex items-center justify-between gap-4 rounded-md overflow-hidden">
         <p className="uppercase text-xs text-quaternary-foreground font-semibold tracking-wider">
           Total
@@ -64,28 +64,30 @@ export function Trophies({
           {`${completed} of ${total}`}
         </p>
       </div>
-      {Object.entries(groups)
-        .filter(([group]) => group !== HIDDEN_GROUP)
-        .map(([group, items]) => (
-          <Group
-            key={group}
-            group={group}
-            items={items}
-            softview={softview}
-            enabled={enabled}
-            onPin={onPin}
-          />
-        ))}
-      <Group
-        key={HIDDEN_GROUP}
-        group={HIDDEN_GROUP}
-        items={(groups[HIDDEN_GROUP] || []).sort(
-          (a, b) => a.earning - b.earning,
-        )}
-        softview={softview}
-        enabled={enabled}
-        onPin={onPin}
-      />
+      <div className="flex flex-col gap-3">
+        {Object.entries(groups)
+          .filter(([group]) => group !== HIDDEN_GROUP)
+          .map(([group, items]) => (
+            <Group
+              key={group}
+              group={group}
+              items={items}
+              softview={softview}
+              enabled={enabled}
+              onPin={onPin}
+            />
+          ))}
+        <Group
+          key={HIDDEN_GROUP}
+          group={HIDDEN_GROUP}
+          items={(groups[HIDDEN_GROUP] || []).sort(
+            (a, b) => a.earning - b.earning,
+          )}
+          softview={softview}
+          enabled={enabled}
+          onPin={onPin}
+        />
+      </div>
     </div>
   );
 }