Andal.LND/frontend-app-profile
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: fixed font sizing issue after applying elm theme (#1228)

Browse Source
This commit is contained in:
Eemaan Amir
2025-07-01 13:58:17 +05:00
committed by GitHub
parent 171016c4eb
commit a9159f6613
10 changed files with 92 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/profile-v2/DateJoined.jsx
View File

@@ -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>

8
src/profile-v2/ProfilePage.jsx
View File

@@ -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

88
src/profile-v2/__snapshots__/ProfilePage.test.jsx.snap
View File

@@ -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

8
src/profile-v2/forms/Bio.jsx
View File

@@ -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} />

8
src/profile-v2/forms/Country.jsx
View File

@@ -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]} />

8
src/profile-v2/forms/Education.jsx
View File

@@ -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

12
src/profile-v2/forms/Name.jsx
View File

@@ -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

8
src/profile-v2/forms/PreferredLanguage.jsx
View File

@@ -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]} />

8
src/profile-v2/forms/SocialLinks.jsx
View File

@@ -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)}

19
src/profile-v2/index.scss
View File

@@ -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;
}