From a9159f661393d6b1d295a136fcfe86d65cad8880 Mon Sep 17 00:00:00 2001
From: Eemaan Amir <57627710+eemaanamir@users.noreply.github.com>
Date: Tue, 1 Jul 2025 13:58:17 +0500
Subject: [PATCH] fix: fixed font sizing issue after applying elm theme (#1228)

---
 src/profile-v2/DateJoined.jsx                 |  4 +-
 src/profile-v2/ProfilePage.jsx                |  8 +-
 .../__snapshots__/ProfilePage.test.jsx.snap   | 88 +++++++++----------
 src/profile-v2/forms/Bio.jsx                  |  8 +-
 src/profile-v2/forms/Country.jsx              |  8 +-
 src/profile-v2/forms/Education.jsx            |  8 +-
 src/profile-v2/forms/Name.jsx                 | 12 +--
 src/profile-v2/forms/PreferredLanguage.jsx    |  8 +-
 src/profile-v2/forms/SocialLinks.jsx          |  8 +-
 src/profile-v2/index.scss                     | 19 +++-
 10 files changed, 92 insertions(+), 79 deletions(-)

diff --git a/src/profile-v2/DateJoined.jsx b/src/profile-v2/DateJoined.jsx
index 5b02d4b..1921ee5 100644
--- a/src/profile-v2/DateJoined.jsx
+++ b/src/profile-v2/DateJoined.jsx
@@ -6,13 +6,13 @@ const DateJoined = ({ date }) => {
   if (!date) { return null; }
 
   return (
-    <span className="small mb-0 text-gray-800">
+    <span className="date-joined mb-0 text-gray-800">
       <FormattedMessage
         id="profile.datejoined.member.since"
         defaultMessage="Member since {year}"
         description="A label for how long the user has been a member"
         values={{
-          year: <span className="font-weight-bold"> <FormattedDate value={new Date(date)} year="numeric" /> </span>,
+          year: <span className="font-weight-bold date-joined"> <FormattedDate value={new Date(date)} year="numeric" /> </span>,
         }}
       />
     </span>
diff --git a/src/profile-v2/ProfilePage.jsx b/src/profile-v2/ProfilePage.jsx
index 2411755..dda1b65 100644
--- a/src/profile-v2/ProfilePage.jsx
+++ b/src/profile-v2/ProfilePage.jsx
@@ -219,7 +219,7 @@ const ProfilePage = ({ params }) => {
                         : 'justify-content-start align-items-start',
                     ])}
                   >
-                    <p className="row m-0 font-weight-bold text-truncate text-primary-500 h3">
+                    <p className="row m-0 font-weight-bold text-truncate text-primary-500 user-name">
                       {params.username}
                     </p>
                     {isBlockVisible(name) && (
@@ -293,7 +293,7 @@ const ProfilePage = ({ params }) => {
                 >
                   <div className="m-0">
                     <div className="row m-0 pb-1.5 align-items-center">
-                      <p data-hj-suppress className="h5 font-weight-bold m-0">
+                      <p data-hj-suppress className="field-headings font-weight-bold m-0">
                         {intl.formatMessage(messages['profile.username'])}
                       </p>
                       <OverlayTrigger
@@ -310,9 +310,9 @@ const ProfilePage = ({ params }) => {
                         <InfoOutline className="m-0 info-icon" />
                       </OverlayTrigger>
                     </div>
-                    <h4 className="edit-section-header text-gray-700">
+                    <h6 className="edit-section-header text-gray-700">
                       {params.username}
-                    </h4>
+                    </h6>
                   </div>
                   {isBlockVisible(name) && (
                   <Name
diff --git a/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap b/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap
index 2280c10..83c08a8 100644
--- a/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap
+++ b/src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap
@@ -73,7 +73,7 @@ exports[`<ProfilePage /> Renders correctly in various states successfully redire
               class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
             >
               <p
-                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
+                class="row m-0 font-weight-bold text-truncate text-primary-500 user-name"
               >
                 staffTest
               </p>
@@ -123,7 +123,7 @@ exports[`<ProfilePage /> Renders correctly in various states successfully redire
                 class="row m-0 pb-1.5 align-items-center"
               >
                 <p
-                  class="h5 font-weight-bold m-0"
+                  class="field-headings font-weight-bold m-0"
                   data-hj-suppress="true"
                 >
                   Username
@@ -142,11 +142,11 @@ exports[`<ProfilePage /> Renders correctly in various states successfully redire
                   />
                 </svg>
               </div>
-              <h4
+              <h6
                 class="edit-section-header text-gray-700"
               >
                 staffTest
-              </h4>
+              </h6>
             </div>
           </div>
           <div
@@ -210,7 +210,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
               class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
             >
               <p
-                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
+                class="row m-0 font-weight-bold text-truncate text-primary-500 user-name"
               >
                 verified
               </p>
@@ -223,11 +223,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                 class="row pt-2 m-0 g-1rem"
               >
                 <span
-                  class="small mb-0 text-gray-800"
+                  class="date-joined mb-0 text-gray-800"
                 >
                   Member since 
                   <span
-                    class="font-weight-bold"
+                    class="font-weight-bold date-joined"
                   >
                      
                     2017
@@ -278,7 +278,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                 class="row m-0 pb-1.5 align-items-center"
               >
                 <p
-                  class="h5 font-weight-bold m-0"
+                  class="field-headings font-weight-bold m-0"
                   data-hj-suppress="true"
                 >
                   Username
@@ -297,11 +297,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                   />
                 </svg>
               </div>
-              <h4
+              <h6
                 class="edit-section-header text-gray-700"
               >
                 verified
-              </h4>
+              </h6>
             </div>
             <div
               class="pgn-transition-replace-group position-relative pt-40px"
@@ -313,7 +313,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                   class="row m-0 pb-1.5 align-items-center"
                 >
                   <p
-                    class="h5 font-weight-bold m-0"
+                    class="field-headings font-weight-bold m-0"
                     data-hj-suppress="true"
                   >
                     Full name
@@ -360,7 +360,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                 style="padding: .1px 0px;"
               >
                 <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
+                  class="field-headings font-weight-bold m-0 pb-1.5"
                   data-hj-suppress="true"
                 >
                   Country
@@ -393,7 +393,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                 style="padding: .1px 0px;"
               >
                 <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
+                  class="field-headings font-weight-bold m-0 pb-1.5"
                   data-hj-suppress="true"
                 >
                   Primary language spoken
@@ -426,7 +426,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                 style="padding: .1px 0px;"
               >
                 <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
+                  class="field-headings font-weight-bold m-0 pb-1.5"
                   data-hj-suppress="true"
                 >
                   Education
@@ -463,7 +463,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                 style="padding: .1px 0px;"
               >
                 <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
+                  class="field-headings font-weight-bold m-0 pb-1.5"
                   data-hj-suppress="true"
                 >
                   Bio
@@ -501,7 +501,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                       class="pt-40px"
                     >
                       <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
+                        class="field-headings font-weight-bold m-0 pb-1.5"
                         data-hj-suppress="true"
                       >
                         X
@@ -631,7 +631,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
             >
               <p
-                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
+                class="row m-0 font-weight-bold text-truncate text-primary-500 user-name"
               >
                 staff
               </p>
@@ -644,11 +644,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                 class="row pt-2 m-0 g-1rem"
               >
                 <span
-                  class="small mb-0 text-gray-800"
+                  class="date-joined mb-0 text-gray-800"
                 >
                   Member since 
                   <span
-                    class="font-weight-bold"
+                    class="font-weight-bold date-joined"
                   >
                      
                     2017
@@ -718,7 +718,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                 class="row m-0 pb-1.5 align-items-center"
               >
                 <p
-                  class="h5 font-weight-bold m-0"
+                  class="field-headings font-weight-bold m-0"
                   data-hj-suppress="true"
                 >
                   Username
@@ -737,11 +737,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                   />
                 </svg>
               </div>
-              <h4
+              <h6
                 class="edit-section-header text-gray-700"
               >
                 staff
-              </h4>
+              </h6>
             </div>
             <div
               class="pgn-transition-replace-group position-relative pt-40px"
@@ -753,7 +753,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                   class="row m-0 pb-1.5 align-items-center"
                 >
                   <p
-                    class="h5 font-weight-bold m-0"
+                    class="field-headings font-weight-bold m-0"
                     data-hj-suppress="true"
                   >
                     Full name
@@ -819,7 +819,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                 style="padding: .1px 0px;"
               >
                 <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
+                  class="field-headings font-weight-bold m-0 pb-1.5"
                   data-hj-suppress="true"
                 >
                   Country
@@ -871,7 +871,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                 style="padding: .1px 0px;"
               >
                 <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
+                  class="field-headings font-weight-bold m-0 pb-1.5"
                   data-hj-suppress="true"
                 >
                   Primary language spoken
@@ -923,7 +923,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                 style="padding: .1px 0px;"
               >
                 <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
+                  class="field-headings font-weight-bold m-0 pb-1.5"
                   data-hj-suppress="true"
                 >
                   Education
@@ -979,7 +979,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                 style="padding: .1px 0px;"
               >
                 <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
+                  class="field-headings font-weight-bold m-0 pb-1.5"
                   data-hj-suppress="true"
                 >
                   Bio
@@ -1036,7 +1036,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                       class="pt-40px"
                     >
                       <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
+                        class="field-headings font-weight-bold m-0 pb-1.5"
                         data-hj-suppress="true"
                       >
                         X
@@ -1088,7 +1088,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                       class="pt-40px"
                     >
                       <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
+                        class="field-headings font-weight-bold m-0 pb-1.5"
                         data-hj-suppress="true"
                       >
                         Facebook
@@ -1140,7 +1140,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                       class="pt-40px"
                     >
                       <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
+                        class="field-headings font-weight-bold m-0 pb-1.5"
                         data-hj-suppress="true"
                       >
                         LinkedIn
@@ -1374,7 +1374,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
             >
               <p
-                class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
+                class="row m-0 font-weight-bold text-truncate text-primary-500 user-name"
               >
                 staff
               </p>
@@ -1387,11 +1387,11 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                 class="row pt-2 m-0 g-1rem"
               >
                 <span
-                  class="small mb-0 text-gray-800"
+                  class="date-joined mb-0 text-gray-800"
                 >
                   Member since 
                   <span
-                    class="font-weight-bold"
+                    class="font-weight-bold date-joined"
                   >
                      
                     2017
@@ -1452,7 +1452,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                 class="row m-0 pb-1.5 align-items-center"
               >
                 <p
-                  class="h5 font-weight-bold m-0"
+                  class="field-headings font-weight-bold m-0"
                   data-hj-suppress="true"
                 >
                   Username
@@ -1471,11 +1471,11 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                   />
                 </svg>
               </div>
-              <h4
+              <h6
                 class="edit-section-header text-gray-700"
               >
                 staff
-              </h4>
+              </h6>
             </div>
             <div
               class="pgn-transition-replace-group position-relative pt-40px"
@@ -1487,7 +1487,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                   class="row m-0 pb-1.5 align-items-center"
                 >
                   <p
-                    class="h5 font-weight-bold m-0"
+                    class="field-headings font-weight-bold m-0"
                     data-hj-suppress="true"
                   >
                     Full name
@@ -1553,7 +1553,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                 style="padding: .1px 0px;"
               >
                 <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
+                  class="field-headings font-weight-bold m-0 pb-1.5"
                   data-hj-suppress="true"
                 >
                   Country
@@ -1605,7 +1605,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                 style="padding: .1px 0px;"
               >
                 <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
+                  class="field-headings font-weight-bold m-0 pb-1.5"
                   data-hj-suppress="true"
                 >
                   Primary language spoken
@@ -1657,7 +1657,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                 style="padding: .1px 0px;"
               >
                 <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
+                  class="field-headings font-weight-bold m-0 pb-1.5"
                   data-hj-suppress="true"
                 >
                   Education
@@ -1713,7 +1713,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                 style="padding: .1px 0px;"
               >
                 <p
-                  class="h5 font-weight-bold m-0 pb-1.5"
+                  class="field-headings font-weight-bold m-0 pb-1.5"
                   data-hj-suppress="true"
                 >
                   Bio
@@ -1770,7 +1770,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                       class="pt-40px"
                     >
                       <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
+                        class="field-headings font-weight-bold m-0 pb-1.5"
                         data-hj-suppress="true"
                       >
                         X
@@ -1822,7 +1822,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                       class="pt-40px"
                     >
                       <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
+                        class="field-headings font-weight-bold m-0 pb-1.5"
                         data-hj-suppress="true"
                       >
                         Facebook
@@ -1874,7 +1874,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                       class="pt-40px"
                     >
                       <p
-                        class="h5 font-weight-bold m-0 pb-1.5"
+                        class="field-headings font-weight-bold m-0 pb-1.5"
                         data-hj-suppress="true"
                       >
                         LinkedIn
diff --git a/src/profile-v2/forms/Bio.jsx b/src/profile-v2/forms/Bio.jsx
index 797bbb6..ed7422b 100644
--- a/src/profile-v2/forms/Bio.jsx
+++ b/src/profile-v2/forms/Bio.jsx
@@ -57,7 +57,7 @@ const Bio = ({
                 className="m-0 pb-3"
                 isInvalid={error !== null}
               >
-                <p data-hj-suppress className="h5 font-weight-bold m-0 pb-2.5">
+                <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-2.5">
                   {intl.formatMessage(messages['profile.bio.about.me'])}
                 </p>
                 <textarea
@@ -85,7 +85,7 @@ const Bio = ({
         ),
         editable: (
           <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+            <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
               {intl.formatMessage(messages['profile.bio.about.me'])}
             </p>
             <EditableItemHeader
@@ -99,7 +99,7 @@ const Bio = ({
         ),
         empty: (
           <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+            <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
               {intl.formatMessage(messages['profile.bio.about.me'])}
             </p>
             <EmptyContent onClick={handleOpen}>
@@ -113,7 +113,7 @@ const Bio = ({
         ),
         static: (
           <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+            <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
               {intl.formatMessage(messages['profile.bio.about.me'])}
             </p>
             <EditableItemHeader content={bio} />
diff --git a/src/profile-v2/forms/Country.jsx b/src/profile-v2/forms/Country.jsx
index 86cd039..dec9b0f 100644
--- a/src/profile-v2/forms/Country.jsx
+++ b/src/profile-v2/forms/Country.jsx
@@ -58,7 +58,7 @@ const Country = ({
                 className="m-0 pb-3"
                 isInvalid={error !== null}
               >
-                <p data-hj-suppress className="h5 font-weight-bold m-0 pb-2.5">
+                <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-2.5">
                   {intl.formatMessage(messages['profile.country.label'])}
                 </p>
                 <select
@@ -95,7 +95,7 @@ const Country = ({
         ),
         editable: (
           <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+            <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
               {intl.formatMessage(messages['profile.country.label'])}
             </p>
             <EditableItemHeader
@@ -109,7 +109,7 @@ const Country = ({
         ),
         empty: (
           <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+            <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
               {intl.formatMessage(messages['profile.country.label'])}
             </p>
             <EmptyContent onClick={handleOpen}>
@@ -119,7 +119,7 @@ const Country = ({
         ),
         static: (
           <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+            <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
               {intl.formatMessage(messages['profile.country.label'])}
             </p>
             <EditableItemHeader content={countryMessages[country]} />
diff --git a/src/profile-v2/forms/Education.jsx b/src/profile-v2/forms/Education.jsx
index 5b877fe..1339c1d 100644
--- a/src/profile-v2/forms/Education.jsx
+++ b/src/profile-v2/forms/Education.jsx
@@ -55,7 +55,7 @@ const Education = ({
                 className="m-0 pb-3"
                 isInvalid={error !== null}
               >
-                <p data-hj-suppress className="h5 font-weight-bold m-0 pb-2.5">
+                <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-2.5">
                   {intl.formatMessage(messages['profile.education.education'])}
                 </p>
                 <select
@@ -95,7 +95,7 @@ const Education = ({
         ),
         editable: (
           <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+            <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
               {intl.formatMessage(messages['profile.education.education'])}
             </p>
             <EditableItemHeader
@@ -113,7 +113,7 @@ const Education = ({
         ),
         empty: (
           <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+            <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
               {intl.formatMessage(messages['profile.education.education'])}
             </p>
             <EmptyContent onClick={handleOpen}>
@@ -127,7 +127,7 @@ const Education = ({
         ),
         static: (
           <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+            <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
               {intl.formatMessage(messages['profile.education.education'])}
             </p>
             <EditableItemHeader
diff --git a/src/profile-v2/forms/Name.jsx b/src/profile-v2/forms/Name.jsx
index f3e2993..8a66e27 100644
--- a/src/profile-v2/forms/Name.jsx
+++ b/src/profile-v2/forms/Name.jsx
@@ -50,7 +50,7 @@ const Name = ({
             <form onSubmit={handleSubmit}>
               <div className="form-group">
                 <div className="row m-0 pb-2.5 align-items-center">
-                  <p data-hj-suppress className="h5 font-weight-bold m-0">
+                  <p data-hj-suppress className="field-headings font-weight-bold m-0">
                     {intl.formatMessage(messages['profile.name.full.name'])}
                   </p>
                   <OverlayTrigger
@@ -68,11 +68,11 @@ const Name = ({
                   </OverlayTrigger>
                 </div>
                 <EditableItemHeader content={name} />
-                <h4 className="font-weight-normal">
+                <h6 className="font-weight-normal">
                   <Hyperlink destination={accountSettingsUrl} target="_blank">
                     {intl.formatMessage(messages['profile.name.redirect'])}
                   </Hyperlink>
-                </h4>
+                </h6>
               </div>
               <FormControls
                 visibilityId="visibilityName"
@@ -87,7 +87,7 @@ const Name = ({
         editable: (
           <>
             <div className="row m-0 pb-1.5 align-items-center">
-              <p data-hj-suppress className="h5 font-weight-bold m-0">
+              <p data-hj-suppress className="field-headings font-weight-bold m-0">
                 {intl.formatMessage(messages['profile.name.full.name'])}
               </p>
               <OverlayTrigger
@@ -116,7 +116,7 @@ const Name = ({
         empty: (
           <>
             <div className="row m-0 pb-1.5 align-items-center">
-              <p data-hj-suppress className="h5 font-weight-bold m-0">
+              <p data-hj-suppress className="field-headings font-weight-bold m-0">
                 {intl.formatMessage(messages['profile.name.full.name'])}
               </p>
               <OverlayTrigger
@@ -141,7 +141,7 @@ const Name = ({
         static: (
           <>
             <div className="row m-0 pb-1.5 align-items-center">
-              <p data-hj-suppress className="h5 font-weight-bold m-0">
+              <p data-hj-suppress className="field-headings font-weight-bold m-0">
                 {intl.formatMessage(messages['profile.name.full.name'])}
               </p>
               <OverlayTrigger
diff --git a/src/profile-v2/forms/PreferredLanguage.jsx b/src/profile-v2/forms/PreferredLanguage.jsx
index 54e0e17..c20553c 100644
--- a/src/profile-v2/forms/PreferredLanguage.jsx
+++ b/src/profile-v2/forms/PreferredLanguage.jsx
@@ -62,7 +62,7 @@ const PreferredLanguage = ({
                 className="m-0 pb-3"
                 isInvalid={error !== null}
               >
-                <p data-hj-suppress className="h5 font-weight-bold m-0 pb-2.5">
+                <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-2.5">
                   {intl.formatMessage(messages['profile.preferredlanguage.label'])}
                 </p>
                 <select
@@ -96,7 +96,7 @@ const PreferredLanguage = ({
         ),
         editable: (
           <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+            <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
               {intl.formatMessage(messages['profile.preferredlanguage.label'])}
             </p>
             <EditableItemHeader
@@ -110,7 +110,7 @@ const PreferredLanguage = ({
         ),
         empty: (
           <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+            <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
               {intl.formatMessage(messages['profile.preferredlanguage.label'])}
             </p>
             <EmptyContent onClick={handleOpen}>
@@ -120,7 +120,7 @@ const PreferredLanguage = ({
         ),
         static: (
           <>
-            <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+            <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
               {intl.formatMessage(messages['profile.preferredlanguage.label'])}
             </p>
             <EditableItemHeader content={languageMessages[value]} />
diff --git a/src/profile-v2/forms/SocialLinks.jsx b/src/profile-v2/forms/SocialLinks.jsx
index 60677fc..d0f163e 100644
--- a/src/profile-v2/forms/SocialLinks.jsx
+++ b/src/profile-v2/forms/SocialLinks.jsx
@@ -154,7 +154,7 @@ const SocialLinks = ({
             <div>
               {socialLinks.map(({ platform }) => (
                 <div key={platform} className="pt-40px">
-                  <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+                  <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
                     {platformDisplayInfo[platform].name}
                   </p>
                   <EmptyContent onClick={() => handleOpen(platform)}>
@@ -179,7 +179,7 @@ const SocialLinks = ({
                 .filter(({ socialLink }) => Boolean(socialLink))
                 .map(({ platform, socialLink }) => (
                   <div key={platform} className="pt-40px">
-                    <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+                    <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
                       {platformDisplayInfo[platform].name}
                     </p>
                     <EditableItemHeader
@@ -196,7 +196,7 @@ const SocialLinks = ({
             <div>
               {socialLinks.map(({ platform, socialLink }) => (
                 <div key={platform} className="pt-40px">
-                  <p data-hj-suppress className="h5 font-weight-bold m-0 pb-1.5">
+                  <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-1.5">
                     {platformDisplayInfo[platform].name}
                   </p>
                   {renderPlatformContent(platform, socialLink, activePlatform === platform)}
@@ -210,7 +210,7 @@ const SocialLinks = ({
             <div>
               {socialLinks.map(({ platform, socialLink }) => (
                 <div key={platform} className="pt-40px">
-                  <p data-hj-suppress className="h5 font-weight-bold m-0 pb-2.5">
+                  <p data-hj-suppress className="field-headings font-weight-bold m-0 pb-2.5">
                     {platformDisplayInfo[platform].name}
                   </p>
                   {renderPlatformContent(platform, socialLink, activePlatform === platform)}
diff --git a/src/profile-v2/index.scss b/src/profile-v2/index.scss
index 87907c2..821cd5d 100644
--- a/src/profile-v2/index.scss
+++ b/src/profile-v2/index.scss
@@ -30,8 +30,16 @@
 }
 
 .profile-page {
+  .user-name {
+    font-size: 22px;
+    line-height: 28px;
+  }
+  .date-joined {
+    font-size: 14px;
+    line-height: 24px;
+  }
   .edit-section-header {
-    font-size: var(--pgn-typography-font-size-h4-base);
+    font-size: var(--pgn-typography-font-size-h6-base);
     display: block;
     font-weight: 400;
     letter-spacing: 0;
@@ -148,9 +156,14 @@
   }
 }
 
+.field-headings{
+  font-size: 14px;
+  line-height: 20px;
+}
+
 .info-icon {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 18px;
+  height: 18px;
   padding-left: 0.125rem;
 }