Skip to content

Commit 5a318ef

Browse files
floziaflozia
committed
chore: Update /edit-profile form layout
1 parent 03e2e6e commit 5a318ef

File tree

2 files changed

+62
-45
lines changed

2 files changed

+62
-45
lines changed

‎src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditProfile/SettingsPanelEditProfile.module.scss

+10-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
.profileForm {
44
display: flex;
55
flex-direction: column;
6-
gap: tokens.$spacing-md;
6+
gap: tokens.$spacing-lg;
77
width: 100%;
88

99
legend {
@@ -52,7 +52,7 @@
5252
align-items: flex-start;
5353
display: flex;
5454
flex-direction: column;
55-
gap: tokens.$spacing-sm;
55+
gap: tokens.$spacing-md;
5656
}
5757

5858
.inputWrapper {
@@ -69,6 +69,7 @@
6969
gap: tokens.$spacing-xs;
7070
padding: tokens.$spacing-xs tokens.$spacing-xs tokens.$spacing-xs 0;
7171
text-decoration: none;
72+
text-align: left;
7273

7374
&:hover {
7475
text-decoration: underline;
@@ -78,6 +79,13 @@
7879

7980
.itemDob {
8081
font-weight: 400;
82+
83+
.dobString {
84+
align-items: center;
85+
display: flex;
86+
color: tokens.$color-black;
87+
gap: tokens.$spacing-sm;
88+
}
8189
}
8290

8391
.cancelDialogContents,

‎src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditProfile/SettingsPanelEditProfile.tsx

+52-43
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { useL10n } from "../../../../../../../../hooks/l10n";
2222
import { Button } from "../../../../../../../../components/client/Button";
2323
import { TelemetryButton } from "../../../../../../../../components/client/TelemetryButton";
2424
import {
25+
LockIcon,
2526
MinusCircledIcon,
2627
PlusCircledIcon,
2728
} from "../../../../../../../../components/server/Icons";
@@ -367,37 +368,41 @@ function EditProfileFormInputs(props: {
367368
`settings-edit-profile-info-form-input-error-${profileDataKeyParsed}`,
368369
)}
369370
/>
370-
<strong>
371-
{l10n.getString(
372-
`settings-edit-profile-info-form-fieldset-section-other-label-${profileDataKeyParsed}s`,
373-
)}
374-
</strong>
375371
{props.profileData[`${props.profileDataKey}s`].map(
376372
(item, itemIndex) => {
377373
const inputKey = `${props.profileDataKey}s-${itemIndex}`;
378374
return (
379-
<div key={inputKey} className={styles.inputWrapper}>
380-
<InputField
381-
onChange={(value) =>
382-
props.handleOnInputChange(value, inputKey)
383-
}
384-
name={inputKey}
385-
value={item}
386-
label={l10n.getString(
387-
`settings-edit-profile-info-form-input-label-other-${profileDataKeyParsed}`,
388-
)}
389-
hasFloatingLabel
390-
/>
391-
<RemoveItemButton
392-
itemKey={props.profileDataKey}
393-
onRemove={() => {
394-
props.onRemove(
395-
`${props.profileDataKey}s` as ProfileDataListKey,
396-
itemIndex,
397-
);
398-
}}
399-
/>
400-
</div>
375+
<Fragment key={inputKey}>
376+
{itemIndex === 0 && (
377+
<strong>
378+
{l10n.getString(
379+
`settings-edit-profile-info-form-fieldset-section-other-label-${profileDataKeyParsed}s`,
380+
)}
381+
</strong>
382+
)}
383+
<div className={styles.inputWrapper}>
384+
<InputField
385+
onChange={(value) =>
386+
props.handleOnInputChange(value, inputKey)
387+
}
388+
name={inputKey}
389+
value={item}
390+
label={l10n.getString(
391+
`settings-edit-profile-info-form-input-label-other-${profileDataKeyParsed}`,
392+
)}
393+
hasFloatingLabel
394+
/>
395+
<RemoveItemButton
396+
itemKey={props.profileDataKey}
397+
onRemove={() => {
398+
props.onRemove(
399+
`${props.profileDataKey}s` as ProfileDataListKey,
400+
itemIndex,
401+
);
402+
}}
403+
/>
404+
</div>
405+
</Fragment>
401406
);
402407
},
403408
)}
@@ -430,7 +435,10 @@ function EditProfileFormInputs(props: {
430435
);
431436
return (
432437
<div className={styles.itemDob}>
433-
{dateOfBirthString}
438+
<span className={styles.dobString}>
439+
{dateOfBirthString}
440+
<LockIcon alt="" />
441+
</span>
434442
<p>
435443
{l10n.getFragment(
436444
"settings-edit-profile-info-form-date-of-birth-note",
@@ -452,12 +460,20 @@ function EditProfileFormInputs(props: {
452460
</div>
453461
);
454462
case "phone_numbers":
463+
const phoneNumbers = itemData?.length === 0 ? [""] : itemData;
455464
return (
456465
<>
457-
{(itemData as string[]).map((item, itemIndex) => {
466+
{(phoneNumbers as string[]).map((item, itemIndex) => {
458467
const inputKey = `${props.profileDataKey}-${itemIndex}`;
459468
return (
460469
<Fragment key={inputKey}>
470+
{itemIndex === 1 && (
471+
<strong>
472+
{l10n.getString(
473+
"settings-edit-profile-info-form-fieldset-section-other-label-phone-numbers",
474+
)}
475+
</strong>
476+
)}
461477
<div className={styles.inputWrapper}>
462478
<InputField
463479
type="tel"
@@ -493,13 +509,6 @@ function EditProfileFormInputs(props: {
493509
/>
494510
)}
495511
</div>
496-
{itemIndex === 0 && (
497-
<strong>
498-
{l10n.getString(
499-
"settings-edit-profile-info-form-fieldset-section-other-label-phone-numbers",
500-
)}
501-
</strong>
502-
)}
503512
</Fragment>
504513
);
505514
})}
@@ -534,6 +543,13 @@ function EditProfileFormInputs(props: {
534543
item.city && item.state ? `${item.city}, ${item.state}, USA` : "";
535544
return (
536545
<Fragment key={inputKey}>
546+
{itemIndex === 1 && (
547+
<strong>
548+
{l10n.getString(
549+
"settings-edit-profile-info-form-fieldset-section-other-label-addresses",
550+
)}
551+
</strong>
552+
)}
537553
<div className={styles.inputWrapper}>
538554
<LocationAutocompleteInput
539555
key={inputKey}
@@ -569,13 +585,6 @@ function EditProfileFormInputs(props: {
569585
/>
570586
)}
571587
</div>
572-
{itemIndex === 0 && (
573-
<strong>
574-
{l10n.getString(
575-
"settings-edit-profile-info-form-fieldset-section-other-label-addresses",
576-
)}
577-
</strong>
578-
)}
579588
</Fragment>
580589
);
581590
})}

0 commit comments

Comments
 (0)