refactor: Minor settings style & copy alterations (#17178)

This commit is contained in:
Bailey Pumfleet
2024-10-19 04:08:49 +00:00
committed by GitHub
parent 76a2822753
commit 474f81f08e
5 changed files with 48 additions and 42 deletions
@@ -235,7 +235,11 @@ const GeneralView = ({ localeProp, user, travelSchedules, revalidatePage }: Gene
)}
/>
{!watchedTzSchedules.length ? (
<Button color="minimal" className="mt-2" onClick={() => setIsTZScheduleOpen(true)}>
<Button
color="secondary"
className="mt-2"
StartIcon="calendar"
onClick={() => setIsTZScheduleOpen(true)}>
{t("schedule_timezone_change")}
</Button>
) : (
@@ -310,7 +314,7 @@ const GeneralView = ({ localeProp, user, travelSchedules, revalidatePage }: Gene
</>
)}
/>
<div className="text-gray text-default mt-2 flex items-center text-sm">
<div className="text-gray text-subtle mt-2 flex items-center text-xs">
{t("timeformat_profile_hint")}
</div>
<Controller
@@ -335,7 +335,7 @@ const ProfileView = () => {
Icon="triangle-alert">
<>
<div className="mb-10">
<p className="text-default mb-4">{t("delete_account_confirmation_message")}</p>
<p className="text-subtle mb-4 text-sm">{t("delete_account_confirmation_message")}</p>
{isCALIdentityProvider && (
<PasswordField
data-testid="password"
@@ -626,7 +626,7 @@ const ProfileForm = ({
onChange(newAvatar);
}}
imageSrc={getUserAvatarUrl({ avatarUrl: value })}
triggerButtonColor={showRemoveAvatarButton ? "secondary" : "primary"}
triggerButtonColor={showRemoveAvatarButton ? "secondary" : "secondary"}
/>
{showRemoveAvatarButton && (
@@ -651,35 +651,36 @@ const ProfileForm = ({
</div>
<div className="mt-6">
<Label>{t("email")}</Label>
{secondaryEmailFields.map((field, index) => (
<CustomEmailTextField
key={field.itemId}
formMethods={formMethods}
formMethodFieldName={`secondaryEmails.${index}.email` as keyof FormValues}
errorMessage={get(formMethods.formState.errors, `secondaryEmails.${index}.email.message`)}
emailVerified={Boolean(field.emailVerified)}
emailPrimary={field.emailPrimary}
dataTestId={`profile-form-email-${index}`}
handleChangePrimary={() => {
const fields = secondaryEmailFields.map((secondaryField, cIndex) => ({
...secondaryField,
emailPrimary: cIndex === index,
}));
updateAllSecondaryEmailFields(fields);
}}
handleVerifyEmail={() => handleResendVerifyEmail(field.email)}
handleItemDelete={() => deleteSecondaryEmail(index)}
/>
))}
<div className="text-default mt-2 flex items-center text-sm">{t("change_email_hint")}</div>
<Button
color="minimal"
StartIcon="plus"
className="mt-2"
onClick={() => handleAddSecondaryEmail()}
data-testid="add-secondary-email">
{t("add_email")}
</Button>
<div className="-mt-2 flex gap-2">
{secondaryEmailFields.map((field, index) => (
<CustomEmailTextField
key={field.itemId}
formMethods={formMethods}
formMethodFieldName={`secondaryEmails.${index}.email` as keyof FormValues}
errorMessage={get(formMethods.formState.errors, `secondaryEmails.${index}.email.message`)}
emailVerified={Boolean(field.emailVerified)}
emailPrimary={field.emailPrimary}
dataTestId={`profile-form-email-${index}`}
handleChangePrimary={() => {
const fields = secondaryEmailFields.map((secondaryField, cIndex) => ({
...secondaryField,
emailPrimary: cIndex === index,
}));
updateAllSecondaryEmailFields(fields);
}}
handleVerifyEmail={() => handleResendVerifyEmail(field.email)}
handleItemDelete={() => deleteSecondaryEmail(index)}
/>
))}
<Button
color="secondary"
StartIcon="plus"
className="mt-2 h-full"
onClick={() => handleAddSecondaryEmail()}
data-testid="add-secondary-email">
{t("add_email")}
</Button>
</div>
</div>
<div className="mt-6">
<Label>{t("about")}</Label>