From 7dbde6a74a0552425f6202ef8a2b4cb9aca5195d Mon Sep 17 00:00:00 2001
From: Sarim Faraz <sarimfaraz@dyn-172-20-64-43.qatar.cmu.local>
Date: Sat, 7 Dec 2024 17:59:17 +0300
Subject: [PATCH 1/5] Refactor AgeAndGenderRenderer for improved readability
 and maintainability

---
 app/web/features/profile/view/userLabels.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/web/features/profile/view/userLabels.tsx b/app/web/features/profile/view/userLabels.tsx
index 8d29a953e9..3f1c260688 100644
--- a/app/web/features/profile/view/userLabels.tsx
+++ b/app/web/features/profile/view/userLabels.tsx
@@ -180,13 +180,20 @@ const AgeAndGenderRenderer = ({ user }: Props) => {
     }
   };
   return (
-    <>
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+      }}
+    >
       <span>{age}</span>
-      {getBirthdateVerificationIcon(birthdateVerificationStatus)} /&nbsp;
+      {getBirthdateVerificationIcon(birthdateVerificationStatus)}
+      <span>/</span>
       <span>{gender}</span>
       {getGenderVerificationIcon(genderVerificationStatus)}
-      <span> {pronouns && ` (${pronouns})`}</span>
-    </>
+      {pronouns && <span>({pronouns})</span>}
+    </div>
   );
 };
 
@@ -248,3 +255,4 @@ export const RemainingAboutLabels = ({ user }: Props) => {
     </>
   );
 };
+

From dbcda60a8ccb692cd4d491f9bb16a3a32d8e6264 Mon Sep 17 00:00:00 2001
From: Sarim Faraz <sarimfaraz@dyn-172-20-64-43.qatar.cmu.local>
Date: Sat, 7 Dec 2024 18:00:41 +0300
Subject: [PATCH 2/5] Fix inconsistent spacing around slash separator in
 AgeAndGenderRenderer

---
 app/web/features/profile/view/userLabels.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/web/features/profile/view/userLabels.tsx b/app/web/features/profile/view/userLabels.tsx
index 3f1c260688..933b13194a 100644
--- a/app/web/features/profile/view/userLabels.tsx
+++ b/app/web/features/profile/view/userLabels.tsx
@@ -189,7 +189,7 @@ const AgeAndGenderRenderer = ({ user }: Props) => {
     >
       <span>{age}</span>
       {getBirthdateVerificationIcon(birthdateVerificationStatus)}
-      <span>/</span>
+      <span>/&nbsp;</span>
       <span>{gender}</span>
       {getGenderVerificationIcon(genderVerificationStatus)}
       {pronouns && <span>({pronouns})</span>}

From 27856ef84a74b8dd9528ea17c4bd004422b9bcd2 Mon Sep 17 00:00:00 2001
From: Sarim Faraz <sarimfaraz@dyn-172-20-64-43.qatar.cmu.local>
Date: Sat, 7 Dec 2024 18:03:52 +0300
Subject: [PATCH 3/5] Improve top alignment for LabelAndText to support
 multi-line content

---
 app/web/components/LabelAndText.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/web/components/LabelAndText.tsx b/app/web/components/LabelAndText.tsx
index 37f6ba4926..b963608a5f 100644
--- a/app/web/components/LabelAndText.tsx
+++ b/app/web/components/LabelAndText.tsx
@@ -12,6 +12,7 @@ const useStyles = makeStyles((theme) => ({
   root: {
     display: "flex",
     marginTop: theme.spacing(0.5),
+    alignItems: "flex-start", // Ensures the label aligns with the top of multi-line text
   },
   flexItem: {
     flex: "1 1 50%",

From 082d52ff2772531dd5514f670bbfef05f46162df Mon Sep 17 00:00:00 2001
From: Sarim Faraz <sarimfaraz@Sarims-MacBook-Air.local>
Date: Mon, 9 Dec 2024 02:06:41 +0300
Subject: [PATCH 4/5] Made container in useStyles in order to stay consistent
 with CSS styling

---
 app/web/features/profile/view/userLabels.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/web/features/profile/view/userLabels.tsx b/app/web/features/profile/view/userLabels.tsx
index 933b13194a..bfd003bbde 100644
--- a/app/web/features/profile/view/userLabels.tsx
+++ b/app/web/features/profile/view/userLabels.tsx
@@ -107,6 +107,11 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(0.5),
     alignSelf: "center",
   },
+  container: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+  },
 }));
 
 const AgeAndGenderRenderer = ({ user }: Props) => {
@@ -180,13 +185,7 @@ const AgeAndGenderRenderer = ({ user }: Props) => {
     }
   };
   return (
-    <div
-      style={{
-        display: "flex",
-        flexWrap: "wrap",
-        alignItems: "center",
-      }}
-    >
+    <div className={useStyles().container}>
       <span>{age}</span>
       {getBirthdateVerificationIcon(birthdateVerificationStatus)}
       <span>/&nbsp;</span>

From 8c232dc595ba7048470af5cd5f4e084da07f6f65 Mon Sep 17 00:00:00 2001
From: Sarim Faraz <sarimfaraz@Sarims-MacBook-Air.local>
Date: Tue, 10 Dec 2024 00:12:53 +0300
Subject: [PATCH 5/5] Ensure pronouns display without spaces

---
 app/web/features/profile/view/userLabels.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/web/features/profile/view/userLabels.tsx b/app/web/features/profile/view/userLabels.tsx
index bfd003bbde..47aa7dedad 100644
--- a/app/web/features/profile/view/userLabels.tsx
+++ b/app/web/features/profile/view/userLabels.tsx
@@ -191,7 +191,7 @@ const AgeAndGenderRenderer = ({ user }: Props) => {
       <span>/&nbsp;</span>
       <span>{gender}</span>
       {getGenderVerificationIcon(genderVerificationStatus)}
-      {pronouns && <span>({pronouns})</span>}
+      {pronouns && <span>({pronouns.replace(/\s+/g, "")})</span>}
     </div>
   );
 };