1. Updating the profile widget template (profile.html)
2. Updating the profile widget styles (profile.css)
We recommend that you either keep a single "Save" button for the whole widget or provide each block with its individual "Save" button.
Updating the profile widget template (profile.html)
Each block must contain the following base components:
-
Notification of successful update (format:
flashProfile[*name of block*]Updated); -
Error Notification (format:
profile-[*name of block*]-errors-list; -
Control fields;
-
Button for saving changes (format:
actionUpdateProfile[*name of block*]); -
Button for canceling changes (format:
actionRestoreProfile[*name of block*]);
The email block also contains additional components:
-
-
-
notification of sending a confirmation code (email and phone number);
-
phone number confirmation window.
-
-
To avoid duplicating the display of error and successful profile updates messages, the following code should be removed from the template:
HTML
<errors-list></errors-list>
<div class="complete-msg" flashProfileUpdated>
<t>Profile updated</t>
</div>
Full code of new profile.html template
HTML
<div class="content-padding-tb">
<div class="tp-data-block">
<div class="tp-data-block-header">
<t>General</t>
</div>
<profile-name-errors-list></profile-name-errors-list>
<div flashProfileNameUpdated>
<div class="complete-msg" data-e2e="name-updated-msg">
<i class="complete-msg-icon"></i>
<t>General has been changed.</t>
</div>
</div>
<div class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="first_name">
<t>First name</t>
</label>
<div class="controls">
<input fieldProfileFirstName id="first_name" placeholder="{{ 'First name' | t }}" type="text" />
<span class="error-message" showIfFirstNameInvalid><t>First name is required</t></span>
</div>
</div>
</div>
<div class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="last_name">
<t>Last name</t>
</label>
<div class="controls">
<input fieldProfileLastName id="last_name" placeholder="{{ 'Last name' | t }}" type="text" />
<span class="error-message" showIfForLastNameInvalid><t>Last name is required</t></span>
</div>
</div>
</div>
<div class="tp-data-block-actions">
<button actionUpdateProfileName class="btn btn-small btn-green">
<t>Save</t>
</button>
<button actionRestoreProfileName class="btn btn-small">
<t>Cancel</t>
</button>
</div>
</div>
<div class="tp-data-block">
<div class="tp-data-block-header">
<t>Email</t>
</div>
<profile-email-errors-list></profile-email-errors-list>
<div flashProfileEmailUpdated>
<div class="complete-msg" data-e2e="email-updated-msg">
<i class="complete-msg-icon"></i>
<t>Email has been changed.</t>
</div>
</div>
<div flashProfileEmailConfirmSent>
<div class="complete-msg" data-e2e="email-resend-msg">
<i class="complete-msg-icon"></i>
<t>A new verification email has been sent. Please confirm your email address.</t>
</div>
</div>
<div class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="email">
<t>Email</t>
</label>
<div class="controls">
<input fieldProfileEmail id="email" placeholder="{{ 'Email' | t }}" type="text" />
<span class="error-message" showIfEmailInvalidBy="EMAIL_REQUIRED"><t>Email is required</t></span>
<span class="error-message" showIfEmailInvalidBy="EMAIL_OR_PHONE_REQUIRED"><t>Email or phone is required</t></span>
</div>
</div>
<div class="control-group" *showIfEmailChanged>
<label class="control-label" for="email-current_password">
<t>Current Password</t>
</label>
<div class="controls">
<input
fieldProfileEmailCurrentPassword=""
id="email-current_password"
placeholder="{{ 'Current password' | t }}"
type="password"
/>
<span class="error-message" showIfPasswordInvalid><t>Password is required</t></span>
</div>
</div>
<div class="control-group">
<div *showIfResendConfirmationEmailNeeded class="controls help">
<span class="title" data-e2e="resendTitle"><t>This email address is not confirmed.</t></span>
<div>
<a actionResendConfirmationEmail class="btn btn-link" data-e2e="resendLink">
<t>Resend validation email</t>
</a>
</div>
</div>
</div>
</div>
<div class="tp-data-block-actions">
<button actionUpdateProfileEmail class="btn btn-small btn-green">
<t>Save</t>
</button>
<button actionRestoreProfileEmail class="btn btn-small">
<t>Cancel</t>
</button>
</div>
</div>
<div class="tp-data-block">
<div *showIfPasswordless>
<div class="tp-form form-horizontal">
<div class="control-label">
<a *onChangePassword class="btn btn-link" data-e2e="onChangePassword">
<t>Add a password</t>
</a>
</div>
</div>
</div>
<div *showIfCanAddPassword>
<div class="tp-data-block-header">
<t>Password</t>
</div>
<profile-password-errors-list></profile-password-errors-list>
<div flashProfilePasswordUpdated>
<div class="complete-msg" data-e2e="password-updated-msg">
<i class="complete-msg-icon"></i>
<t>Password has been changed.</t>
</div>
</div>
<div>
<div *hideIfChangePassword class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="password">
<t>Password</t>
</label>
<div class="controls">
<input
disabled
id="password"
placeholder="{{ 'Password' | t }}"
readonly
type="password"
value="********"
/>
</div>
</div>
<div class="control-group">
<div class="controls help">
<div>
<a *onChangePassword class="btn btn-link" data-e2e="onChangePassword">
<t>Change password</t>
</a>
</div>
</div>
</div>
</div>
<div *showIfChangePasswordPasswordless class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="current_password">
<t>Password</t>
</label>
<div class="controls">
<input
fieldProfileCurrentPassword
id="current_password"
placeholder="{{ 'Password' | t }}"
type="password"
/>
<span class="error-message" showIfPasswordInvalid><t>Password is required</t></span>
<div class="control-divider"></div>
</div>
</div>
</div>
<div *showIfChangePassword class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="new_password">
<t>New password</t>
</label>
<div class="controls">
<input fieldProfileNewPassword id="new_password" placeholder="{{ 'New password' | t }}" type="password" />
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_REQUIRED"><t>Password is required</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_MIXED_CASE"><t>Password must contain lowercase and uppercase letters</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_ALPHANUMERIC"><t>Password must contain both letters and numbers</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_SPECIAL_CHARACTERS"><t>Password must contain any characters</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_CANT_CONTAIN_EMAIL"><t>Password can not contain the user's email address</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_MIN_LENGTH"><t>Minimum number of characters required for user password.</t></span>
</div>
</div>
</div>
<div *showIfChangePasswordPasswordless class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="repeat_password">
<t>Confirm new password</t>
</label>
<div class="controls">
<input
fieldProfileRepeatNewPassword
id="repeat_password"
placeholder="{{ 'Confirm new password' | t }}"
type="password"
/>
<span class="error-message" showIfConfirmPasswordInvalid><t>New and confirmation password do not match</t></span>
</div>
</div>
</div>
</div>
<div class="tp-data-block-actions">
<button actionUpdateProfilePassword class="btn btn-small btn-green">
<t>Save</t>
</button>
<button actionRestoreProfilePassword class="btn btn-small">
<t>Cancel</t>
</button>
</div>
</div>
</div>
<div class="tp-data-block">
<div class="tp-data-block-header">
<t>Profile information</t>
</div>
<profile-custom-fields-errors-list></profile-custom-fields-errors-list>
<div flashProfileCustomFieldsUpdated>
<div class="complete-msg" data-e2e="custom-fields-updated-msg">
<i class="complete-msg-icon"></i>
<t>Profile information has been changed.</t>
</div>
</div>
<custom-fields class="tp-form form-horizontal">
<ng-template let-field>
<div class="control-group">
<label [fieldName]="field.field_name" class="control-label" customFieldLabel mouseOverTooltip></label>
<div [fieldName]="field.field_name" class="control-label-icon" showForTooltipType="InfoIcon">
<i [fieldName]="field.field_name" class="pn-icon pn-icon-tooltip" infoIconTooltip></i>
</div>
<div class="controls">
<custom-field-input [fieldName]="field.field_name"></custom-field-input>
</div>
</div>
</ng-template>
</custom-fields>
<div class="tp-data-block-actions">
<button actionUpdateProfileCustomFields class="btn btn-small btn-green">
<t>Save</t>
</button>
<button actionRestoreProfileCustomFields class="btn btn-small">
<t>Cancel</t>
</button>
</div>
</div>
<div class="tp-data-block" showIfSocialAuthAvailable>
<div class="tp-data-block-header">
<t>Social accounts</t>
</div>
<div class="tp-form form-horizontal" showIfAppleAvailable>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon apple"></i>
Apple
</div>
<div class="controls">
<span class="social-linked" showIfAppleLinked><t>Connected</t></span>
<div class="social-buttons">
<apple-unlink>
<t>Disconnect</t>
</apple-unlink>
<apple-link>
<t>Connect account</t>
</apple-link>
</div>
</div>
</div>
</div>
<div class="tp-form form-horizontal" showIfFacebookAvailable>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon facebook"></i>
Facebook
</div>
<div class="controls">
<span class="social-linked" showIfFacebookLinked><t>Connected</t></span>
<div class="social-buttons">
<facebook-unlink>
<t>Disconnect</t>
</facebook-unlink>
<facebook-link>
<t>Connect account</t>
</facebook-link>
</div>
</div>
</div>
</div>
<div class="tp-form form-horizontal" showIfGoogleAvailable>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon google"></i>
Google
</div>
<div class="controls">
<span class="social-linked" showIfGoogleLinked><t>Connected</t></span>
<div class="social-buttons">
<google-unlink>
<t>Disconnect</t>
</google-unlink>
<google-link>
<t>Connect account</t>
</google-link>
</div>
</div>
</div>
</div>
<div class="tp-form form-horizontal" showIfTwitterAvailable>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon twitter"></i>
Twitter
</div>
<div class="controls">
<span class="social-linked" showIfTwitterLinked><t>Connected</t></span>
<div class="social-buttons">
<twitter-unlink>
<t>Disconnect</t>
</twitter-unlink>
<twitter-link>
<t>Connect account</t>
</twitter-link>
</div>
</div>
</div>
</div>
<div class="tp-form form-horizontal" showIfLinkedinAvailable>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon linkedin"></i>
LinkedIn
</div>
<div class="controls">
<span class="social-linked" showIfLinkedinLinked><t>Connected</t></span>
<div class="social-buttons">
<linkedin-unlink>
<t>Disconnect</t>
</linkedin-unlink>
<linkedin-link>
<t>Connect account</t>
</linkedin-link>
</div>
</div>
</div>
</div>
<div class="tp-form form-horizontal" showIfMicrosoftAvailable>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon microsoft"></i>
Microsoft
</div>
<div class="controls">
<span class="social-linked" showIfMicrosoftLinked><t>Connected</t></span>
<div class="social-buttons">
<microsoft-unlink>
<t>Disconnect</t>
</microsoft-unlink>
<microsoft-link>
<t>Connect account</t>
</microsoft-link>
</div>
</div>
</div>
</div>
<div class="tp-form form-horizontal">
<open-id-list showIfOpenIdAvailable>
<ng-template>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon openid" openIdIcon></i>
<span openIdTitle></span>
</div>
<div class="controls clearfix">
<span class="social-linked" showIfOpenIdLinked><t>Connected</t></span>
<div class="social-buttons">
<openid-unlink>
<t>Disconnect</t>
</openid-unlink>
<openid-link>
<t>Connect account</t>
</openid-link>
</div>
</div>
</div>
</ng-template>
</open-id-list>
</div>
</div>
<div *showIfDeleteAccountEnabled class="delete-account">
<div *hideIfDeleteAccountInitiated>
<a actionDeleteAccountInitiated class="delete-account-button" role="button">
<t>Delete account</t>
</a>
</div>
<div *showIfDeleteAccountInitiated class="delete-account-container">
<div class="delete-account-confirmation-close">
<button class="delete-account-confirmation-close-btn" actionCloseDeleteAccount></button>
</div>
<div class="delete-account-content">
<div>
<div *hideIfDeleteAccountFailed>
<p *showIfDeleteAccountInitiated class="delete-account-hint">
<t>Enter the password to confirm your decision to delete your account.</t>
</p>
</div>
<p *showIfDeleteAccountFailed class="delete-account-failed">
<t>Account deletion failed. Please, make sure that password is valid.</t>
</p>
</div>
<div class="delete-account-controls">
<div class="delete-account-password-icon-wrapper">
<i class="delete-account-password-icon"></i>
</div>
<input fieldProfileConfirmDeleteAccountPassword id="confirm_delete_account_password"
placeholder="{{ 'Password' | t }}" type="password">
<button actionDeleteAccount class="btn">
<t>Confirm</t>
</button>
</div>
</div>
</div>
</div>
</div>
Changes of "First name" and "Last name" fields ("General" block)
Old code
HTML
<div class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="first_name">
<t>First name</t>
</label>
<div class="controls">
<input fieldProfileFirstName id="first_name" placeholder="{{ 'First name' | t }}" type="text">
<span class="error-message" showIfFirstNameInvalid><t>First name is required</t></span>
</div>
</div>
</div>
<div class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="last_name">
<t>Last name</t>
</label>
<div class="controls">
<input fieldProfileLastName id="last_name" placeholder="{{ 'Last name' | t }}" type="text">
<span class="error-message" showIfForLastNameInvalid><t>Last name is required</t></span>
</div>
</div>
</div>
New code
HTML
<div class="tp-data-block">
<div class="tp-data-block-header">
<t>General</t>
</div>
<profile-name-errors-list></profile-name-errors-list>
<div flashProfileNameUpdated>
<div class="complete-msg" data-e2e="name-updated-msg">
<i class="complete-msg-icon"></i>
<t>General has been changed.</t>
</div>
</div>
<div class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="first_name">
<t>First name</t>
</label>
<div class="controls">
<input fieldProfileFirstName id="first_name" placeholder="{{ 'First name' | t }}" type="text" />
<span class="error-message" showIfFirstNameInvalid><t>First name is required</t></span>
</div>
</div>
</div>
<div class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="last_name">
<t>Last name</t>
</label>
<div class="controls">
<input fieldProfileLastName id="last_name" placeholder="{{ 'Last name' | t }}" type="text" />
<span class="error-message" showIfForLastNameInvalid><t>Last name is required</t></span>
</div>
</div>
</div>
<div class="tp-data-block-actions">
<button actionUpdateProfileName class="btn btn-small btn-green">
<t>Save</t>
</button>
<button actionRestoreProfileName class="btn btn-small">
<t>Cancel</t>
</button>
</div>
</div>
Email field changes ("Email" block)
Old code
HTML
<div class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="email">
<t>Email</t>
</label>
<div class="controls">
<input fieldProfileEmail id="email" placeholder="{{ 'Email' | t }}" type="text">
<span class="error-message" showIfEmailInvalidBy="EMAIL_REQUIRED"><t>Email is required</t></span>
<span class="error-message" showIfEmailInvalidBy="EMAIL_OR_PHONE_REQUIRED"><t>Email or phone is required</t></span>
<div *showIfResendConfirmationEmailNeeded class="help">
<span class="title" data-e2e="resendTitle"><t>This email address is not confirmed.</t></span>
<div>
<a actionResendConfirmationEmail class="btn btn-link" data-e2e="resendLink">
<t>Resend validation email</t>
</a>
</div>
</div>
</div>
</div>
</div>
New code
HTML
<div class="tp-data-block">
<div class="tp-data-block-header">
<t>Email</t>
</div>
<profile-email-errors-list></profile-email-errors-list>
<div flashProfileEmailUpdated>
<div class="complete-msg" data-e2e="email-updated-msg">
<i class="complete-msg-icon"></i>
<t>Email has been changed.</t>
</div>
</div>
<div flashProfileEmailConfirmSent>
<div class="complete-msg" data-e2e="email-resend-msg">
<i class="complete-msg-icon"></i>
<t>A new verification email has been sent. Please confirm your email address.</t>
</div>
</div>
<div class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="email">
<t>Email</t>
</label>
<div class="controls">
<input fieldProfileEmail id="email" placeholder="{{ 'Email' | t }}" type="text" />
<span class="error-message" showIfEmailInvalidBy="EMAIL_REQUIRED"><t>Email is required</t></span>
<span class="error-message" showIfEmailInvalidBy="EMAIL_OR_PHONE_REQUIRED"><t>Email or phone is required</t></span>
</div>
</div>
<div class="control-group" *showIfEmailChanged>
<label class="control-label" for="email-current_password">
<t>Current Password</t>
</label>
<div class="controls">
<input
fieldProfileEmailCurrentPassword=""
id="email-current_password"
placeholder="{{ 'Current password' | t }}"
type="password"
/>
<span class="error-message" showIfPasswordInvalid><t>Password is required</t></span>
</div>
</div>
<div class="control-group">
<div *showIfResendConfirmationEmailNeeded class="controls help">
<span class="title" data-e2e="resendTitle"><t>This email address is not confirmed.</t></span>
<div>
<a actionResendConfirmationEmail class="btn btn-link" data-e2e="resendLink">
<t>Resend validation email</t>
</a>
</div>
</div>
</div>
</div>
<div class="tp-data-block-actions">
<button actionUpdateProfileEmail class="btn btn-small btn-green">
<t>Save</t>
</button>
<button actionRestoreProfileEmail class="btn btn-small">
<t>Cancel</t>
</button>
</div>
</div>
Password fields changes ("Password" block)
Old code
HTML
<div *hideChangePassword class="tp-form form-horizontal">
<div class="control-group">
<label *hideIfPasswordless class="control-label" for="password">
<t>Password</t>
</label>
<div class="controls">
<input *hideIfPasswordless disabled id="password" placeholder="{{ 'Password' | t }}" readonly
type="password" value="********">
<div class="help">
<div>
<a *onChangePassword class="btn btn-link" data-e2e="onChangePassword">
<t *hideIfPasswordless>Change password</t>
<t *showIfPasswordless>Click here to add a password</t>
</a>
</div>
</div>
</div>
</div>
</div>
<div *showChangePasswordPasswordless class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="current_password">
<t>Current Password</t>
</label>
<div class="controls">
<input fieldProfileCurrentPassword="" id="current_password" placeholder="{{ 'Current password' | t }}"
type="password">
<span class="error-message" showIfPasswordInvalid><t>Password is required</t></span>
</div>
</div>
</div>
<div *showChangePassword class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="new_password">
<t>New password</t>
</label>
<div class="controls">
<input fieldProfileNewPassword id="new_password" placeholder="{{ 'New password' | t }}" type="password">
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_REQUIRED"><t>Password is required</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_MIXED_CASE"><t>Password must contain lowercase and uppercase letters</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_ALPHANUMERIC"><t>Password must contain both letters and numbers</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_SPECIAL_CHARACTERS"><t>Password must contain any characters</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_CANT_CONTAIN_EMAIL"><t>Password can not contain the user's email address</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_MIN_LENGTH"><t>Minimum number of characters required for user password.</t></span>
</div>
</div>
</div>
<div *showChangePassword class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="repeat_password">
<t>Confirm new password</t>
</label>
<div class="controls">
<input fieldProfileRepeatNewPassword id="repeat_password" placeholder="{{ 'Confirm new password' | t }}"
type="password">
<span class="error-message" showIfConfirmPasswordInvalid><t>New and confirmation password do not match</t></span>
<div class="help">
<div>
<a *offChangePassword class="btn btn-link">
<t>Set a password later</t>
</a>
</div>
</div>
</div>
</div>
</div>
New code
HTML
<div class="tp-data-block">
<div *showIfPasswordless>
<div class="tp-form form-horizontal">
<div class="control-label">
<a *onChangePassword class="btn btn-link" data-e2e="onChangePassword">
<t>Add a password</t>
</a>
</div>
</div>
</div>
<div *showIfCanAddPassword>
<div class="tp-data-block-header">
<t>Password</t>
</div>
<profile-password-errors-list></profile-password-errors-list>
<div flashProfilePasswordUpdated>
<div class="complete-msg" data-e2e="password-updated-msg">
<i class="complete-msg-icon"></i>
<t>Password has been changed.</t>
</div>
</div>
<div>
<div *hideIfChangePassword class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="password">
<t>Password</t>
</label>
<div class="controls">
<input
disabled
id="password"
placeholder="{{ 'Password' | t }}"
readonly
type="password"
value="********"
/>
</div>
</div>
<div class="control-group">
<div class="controls help">
<div>
<a *onChangePassword class="btn btn-link" data-e2e="onChangePassword">
<t>Change password</t>
</a>
</div>
</div>
</div>
</div>
<div *showIfChangePasswordPasswordless class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="current_password">
<t>Password</t>
</label>
<div class="controls">
<input
fieldProfileCurrentPassword
id="current_password"
placeholder="{{ 'Password' | t }}"
type="password"
/>
<span class="error-message" showIfPasswordInvalid><t>Password is required</t></span>
<div class="control-divider"></div>
</div>
</div>
</div>
<div *showIfChangePassword class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="new_password">
<t>New password</t>
</label>
<div class="controls">
<input fieldProfileNewPassword id="new_password" placeholder="{{ 'New password' | t }}" type="password" />
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_REQUIRED"><t>Password is required</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_MIXED_CASE"><t>Password must contain lowercase and uppercase letters</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_ALPHANUMERIC"><t>Password must contain both letters and numbers</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_SPECIAL_CHARACTERS"><t>Password must contain any characters</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_CANT_CONTAIN_EMAIL"><t>Password can not contain the user's email address</t></span>
<span class="error-message" showIfNewPasswordInvalidBy="PASSWORD_MIN_LENGTH"><t>Minimum number of characters required for user password.</t></span>
</div>
</div>
</div>
<div *showIfChangePasswordPasswordless class="tp-form form-horizontal">
<div class="control-group">
<label class="control-label" for="repeat_password">
<t>Confirm new password</t>
</label>
<div class="controls">
<input
fieldProfileRepeatNewPassword
id="repeat_password"
placeholder="{{ 'Confirm new password' | t }}"
type="password"
/>
<span class="error-message" showIfConfirmPasswordInvalid><t>New and confirmation password do not match</t></span>
</div>
</div>
</div>
</div>
<div class="tp-data-block-actions">
<button actionUpdateProfilePassword class="btn btn-small btn-green">
<t>Save</t>
</button>
<button actionRestoreProfilePassword class="btn btn-small">
<t>Cancel</t>
</button>
</div>
</div>
</div>
Custom fields changes ("Profile information" block)
Old code
HTML
<custom-fields class="tp-form form-horizontal">
<ng-template let-field>
<div class="control-group">
<label [fieldName]="field.field_name"
class="control-label"
customFieldLabel
mouseOverTooltip
></label>
<div [fieldName]="field.field_name" class="control-label-icon" showForTooltipType="InfoIcon">
<i [fieldName]="field.field_name" class="pn-icon pn-icon-tooltip" infoIconTooltip></i>
</div>
<div class="controls">
<custom-field-input [fieldName]="field.field_name"></custom-field-input>
</div>
</div>
</ng-template>
</custom-fields>
New code
HTML
<div class="tp-data-block">
<div class="tp-data-block-header">
<t>Profile information</t>
</div>
<profile-custom-fields-errors-list></profile-custom-fields-errors-list>
<div flashProfileCustomFieldsUpdated>
<div class="complete-msg" data-e2e="custom-fields-updated-msg">
<i class="complete-msg-icon"></i>
<t>Profile information has been changed.</t>
</div>
</div>
<custom-fields class="tp-form form-horizontal">
<ng-template let-field>
<div class="control-group">
<label [fieldName]="field.field_name" class="control-label" customFieldLabel mouseOverTooltip></label>
<div [fieldName]="field.field_name" class="control-label-icon" showForTooltipType="InfoIcon">
<i [fieldName]="field.field_name" class="pn-icon pn-icon-tooltip" infoIconTooltip></i>
</div>
<div class="controls">
<custom-field-input [fieldName]="field.field_name"></custom-field-input>
</div>
</div>
</ng-template>
</custom-fields>
<div class="tp-data-block-actions">
<button actionUpdateProfileCustomFields class="btn btn-small btn-green">
<t>Save</t>
</button>
<button actionRestoreProfileCustomFields class="btn btn-small">
<t>Cancel</t>
</button>
</div>
</div>
"Social accounts" block changes
Old code
HTML
<div class="tp-form form-horizontal" showIfSocialAuthAvailable>
<div class="control-group">
<h2 class="control-label social-accounts-title">
<t>Social accounts</t>
</h2>
<div class="controls">
<div class="social-group clearfix" showIfAppleAvailable>
<div class="social-caption">
<i class="social-icon apple"></i>
Apple
</div>
<span class="social-linked" showIfAppleLinked><t>Account connected</t></span>
<div class="social-buttons">
<apple-unlink>
<t>Disconnect</t>
</apple-unlink>
<apple-link>
<t>Connect account</t>
</apple-link>
</div>
</div>
<div class="social-group clearfix" showIfFacebookAvailable>
<div class="social-caption">
<i class="social-icon facebook"></i>
Facebook
</div>
<span class="social-linked" showIfFacebookLinked><t>Account connected</t></span>
<div class="social-buttons">
<facebook-unlink>
<t>Disconnect</t>
</facebook-unlink>
<facebook-link>
<t>Connect account</t>
</facebook-link>
</div>
</div>
<div class="social-group clearfix" showIfGoogleAvailable>
<div class="social-caption">
<i class="social-icon google"></i>
Google
</div>
<span class="social-linked" showIfGoogleLinked><t>Account connected</t></span>
<div class="social-buttons">
<google-unlink>
<t>Disconnect</t>
</google-unlink>
<google-link>
<t>Connect account</t>
</google-link>
</div>
</div>
<div class="social-group clearfix" showIfTwitterAvailable>
<div class="social-caption">
<i class="social-icon twitter"></i>
Twitter
</div>
<span class="social-linked" showIfTwitterLinked><t>Account connected</t></span>
<div class="social-buttons">
<twitter-unlink>
<t>Disconnect</t>
</twitter-unlink>
<twitter-link>
<t>Connect account</t>
</twitter-link>
</div>
</div>
<div class="social-group clearfix" showIfLinkedinAvailable>
<div class="social-caption">
<i class="social-icon linkedin"></i>
LinkedIn
</div>
<span class="social-linked" showIfLinkedinLinked><t>Account connected</t></span>
<div class="social-buttons">
<linkedin-unlink>
<t>Disconnect</t>
</linkedin-unlink>
<linkedin-link>
<t>Connect account</t>
</linkedin-link>
</div>
</div>
<div class="social-group clearfix" showIfMicrosoftAvailable>
<div class="social-caption">
<i class="social-icon microsoft"></i>
Microsoft
</div>
<span class="social-linked" showIfMicrosoftLinked><t>Account connected</t></span>
<div class="social-buttons">
<microsoft-unlink>
<t>Disconnect</t>
</microsoft-unlink>
<microsoft-link>
<t>Connect account</t>
</microsoft-link>
</div>
</div>
<open-id-list showIfOpenIdAvailable>
<ng-template>
<div class="social-group clearfix">
<div class="social-caption">
<i class="social-icon openid" openIdIcon></i>
<span openIdTitle></span>
</div>
<span class="social-linked" showIfOpenIdLinked><t>Account connected</t></span>
<div class="social-buttons">
<openid-unlink>
<t>Disconnect</t>
</openid-unlink>
<openid-link>
<t>Connect account</t>
</openid-link>
</div>
</div>
</ng-template>
</open-id-list>
</div>
</div>
</div>
New code
HTML
<div class="tp-data-block" showIfSocialAuthAvailable>
<div class="tp-data-block-header">
<t>Social accounts</t>
</div>
<div class="tp-form form-horizontal" showIfAppleAvailable>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon apple"></i>
Apple
</div>
<div class="controls">
<span class="social-linked" showIfAppleLinked><t>Connected</t></span>
<div class="social-buttons">
<apple-unlink>
<t>Disconnect</t>
</apple-unlink>
<apple-link>
<t>Connect account</t>
</apple-link>
</div>
</div>
</div>
</div>
<div class="tp-form form-horizontal" showIfFacebookAvailable>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon facebook"></i>
Facebook
</div>
<div class="controls">
<span class="social-linked" showIfFacebookLinked><t>Connected</t></span>
<div class="social-buttons">
<facebook-unlink>
<t>Disconnect</t>
</facebook-unlink>
<facebook-link>
<t>Connect account</t>
</facebook-link>
</div>
</div>
</div>
</div>
<div class="tp-form form-horizontal" showIfGoogleAvailable>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon google"></i>
Google
</div>
<div class="controls">
<span class="social-linked" showIfGoogleLinked><t>Connected</t></span>
<div class="social-buttons">
<google-unlink>
<t>Disconnect</t>
</google-unlink>
<google-link>
<t>Connect account</t>
</google-link>
</div>
</div>
</div>
</div>
<div class="tp-form form-horizontal" showIfTwitterAvailable>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon twitter"></i>
Twitter
</div>
<div class="controls">
<span class="social-linked" showIfTwitterLinked><t>Connected</t></span>
<div class="social-buttons">
<twitter-unlink>
<t>Disconnect</t>
</twitter-unlink>
<twitter-link>
<t>Connect account</t>
</twitter-link>
</div>
</div>
</div>
</div>
<div class="tp-form form-horizontal" showIfLinkedinAvailable>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon linkedin"></i>
LinkedIn
</div>
<div class="controls">
<span class="social-linked" showIfLinkedinLinked><t>Connected</t></span>
<div class="social-buttons">
<linkedin-unlink>
<t>Disconnect</t>
</linkedin-unlink>
<linkedin-link>
<t>Connect account</t>
</linkedin-link>
</div>
</div>
</div>
</div>
<div class="tp-form form-horizontal" showIfMicrosoftAvailable>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon microsoft"></i>
Microsoft
</div>
<div class="controls">
<span class="social-linked" showIfMicrosoftLinked><t>Connected</t></span>
<div class="social-buttons">
<microsoft-unlink>
<t>Disconnect</t>
</microsoft-unlink>
<microsoft-link>
<t>Connect account</t>
</microsoft-link>
</div>
</div>
</div>
</div>
<div class="tp-form form-horizontal">
<open-id-list showIfOpenIdAvailable>
<ng-template>
<div class="control-group">
<div class="control-label social-caption">
<i class="social-icon openid" openIdIcon></i>
<span openIdTitle></span>
</div>
<div class="controls clearfix">
<span class="social-linked" showIfOpenIdLinked><t>Connected</t></span>
<div class="social-buttons">
<openid-unlink>
<t>Disconnect</t>
</openid-unlink>
<openid-link>
<t>Connect account</t>
</openid-link>
</div>
</div>
</div>
</ng-template>
</open-id-list>
</div>
</div>
"Delete account" block changes
Old code
HTML
<div *showIfDeleteAccountEnabled class="delete-account">
<a actionDeleteAccountInitiated class="delete-account-button" role="button">
<t>Delete account</t>
</a>
<p *hideIfDeleteAccountInitiated class="delete-account-hint">
<t>You will enter the password to confirm your decision.</t>
</p>
<div *showIfDeleteAccountInitiated class="delete-account-container">
<div>
<input fieldProfileConfirmDeleteAccountPassword id="confirm_delete_account_password"
placeholder="{{ 'Password' | t }}"
type="password">
<div *hideIfDeleteAccountFailed>
<p *showIfDeleteAccountInitiated class="delete-account-hint">
<t>Enter the password to confirm your decision.</t>
</p>
</div>
<p *showIfDeleteAccountFailed class="delete-account-failed">
<t>Account deletion failed. Please, make sure that password is valid.</t>
</p>
</div>
<button actionDeleteAccount class="btn">
<t>Confirm</t>
</button>
</div>
</div>
<div>
<div class="actions">
<button actionUpdateProfile class="btn btn-green">
<t>Save changes</t>
</button>
</div>
</div>
New code
HTML
<div *showIfDeleteAccountEnabled class="delete-account">
<div *hideIfDeleteAccountInitiated>
<a actionDeleteAccountInitiated class="delete-account-button" role="button">
<t>Delete account</t>
</a>
</div>
<div *showIfDeleteAccountInitiated class="delete-account-container">
<div class="delete-account-confirmation-close">
<button class="delete-account-confirmation-close-btn" actionCloseDeleteAccount></button>
</div>
<div class="delete-account-content">
<div>
<div *hideIfDeleteAccountFailed>
<p *showIfDeleteAccountInitiated class="delete-account-hint">
<t>Enter the password to confirm your decision to delete your account.</t>
</p>
</div>
<p *showIfDeleteAccountFailed class="delete-account-failed">
<t>Account deletion failed. Please, make sure that password is valid.</t>
</p>
</div>
<div class="delete-account-controls">
<div class="delete-account-password-icon-wrapper">
<i class="delete-account-password-icon"></i>
</div>
<input fieldProfileConfirmDeleteAccountPassword id="confirm_delete_account_password"
placeholder="{{ 'Password' | t }}" type="password">
<button actionDeleteAccount class="btn">
<t>Confirm</t>
</button>
</div>
</div>
</div>
</div>
Updating the profile widget styles (profile.css)
The new profile template uses grid layout. Each block with controls must be wrapped with a class
(exclusion delete user block).
Changes in error notification styles
Old code
.error-list {
margin-bottom: 10px;
}
New code
.error-list {
margin-bottom: 10px;
background-color: #F86A6A;
border-radius: 4px;
padding: 15px 20px;
}
.error-list ul {
list-style: inside;
margin-top: 15px;
margin-left: 35px;
}
.error-list ul li{
margin-top: 5px;
}
.error-content {
align-items: center;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas: "icon error action";
grid-gap: 15px;
}
.error-list .error {
padding: 0;
grid-area: error;
}
.error-icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCAxNkMxMy4zMTM3IDE2IDE2IDEzLjMxMzcgMTYgMTBDMTYgNi42ODYyOSAxMy4zMTM3IDQgMTAgNEM2LjY4NjI5IDQgNCA2LjY4NjI5IDQgMTBDNCAxMy4zMTM3IDYuNjg2MjkgMTYgMTAgMTZaTTEwIDE4QzE0LjQxODMgMTggMTggMTQuNDE4MyAxOCAxMEMxOCA1LjU4MTcyIDE0LjQxODMgMiAxMCAyQzUuNTgxNzIgMiAyIDUuNTgxNzIgMiAxMEMyIDE0LjQxODMgNS41ODE3MiAxOCAxMCAxOFpNMTEgMTFWNkg5VjExSDExWk0xMCAxNEMxMC41NTIzIDE0IDExIDEzLjU1MjMgMTEgMTNDMTEgMTIuNDQ3NyAxMC41NTIzIDEyIDEwIDEyQzkuNDQ3NzIgMTIgOSAxMi40NDc3IDkgMTNDOSAxMy41NTIzIDkuNDQ3NzIgMTQgMTAgMTRaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
display: block;
grid-area: icon;
min-width: 20px;
min-height: 20px;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
opacity: .6;
}
.error-close-icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjU4NTg2IDEwTDMuNzkyOTcgNS4yMDcxMkw1LjIwNzE4IDMuNzkyOTFMMTAuMDAwMSA4LjU4NThMMTQuNzkzIDMuNzkyOTFMMTYuMjA3MiA1LjIwNzEyTDExLjQxNDMgMTBMMTYuMjA3MiAxNC43OTI5TDE0Ljc5MyAxNi4yMDcxTDEwLjAwMDEgMTEuNDE0Mkw1LjIwNzE4IDE2LjIwNzFMMy43OTI5NyAxNC43OTI5TDguNTg1ODYgMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
display: block;
grid-area: action;
min-width: 20px;
min-height: 20px;
background-repeat: no-repeat;
opacity: .6;
cursor: pointer;
}
.error-close-icon:hover {
opacity: 1;
}
Changes in information notification styles
Old code
.complete-msg {
padding: 10px;
margin-bottom: 10px;
background: #dff0d8;
}
New code
.complete-msg {
padding: 10px;
margin-bottom: 10px;
background: #428BCA;
border-radius: 4px;
color: white;
font-weight: 400;
display: flex;
align-items: center;
}
.complete-msg .complete-msg-icon {
min-width: 20px;
min-height: 20px;
display: block;
margin-right: 15px;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNSAxMS41TDcgMTVMMTYuNSA1LjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjYiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K");
}
Changes in button styles
1. Change properties in '.btn'
Old code
padding: 0 18px;
color: #a1aab6;
border: 1px solid #d8dadd;
font-family: 'Graphik Web Regular', Helvetica, Arial, sans-serif;
New code
padding: 0 15px;
color: rgba(135, 135, 135, 1);
background-color: #EDEDED;
border: none;
font-family: Arial, 'Graphik Web Regular', Helvetica, sans-serif;
2. Change properties in '.btn-group.btn-small .btn'
Old code
padding: 0 8px;
New code
padding: 0 15px;
3. Delete the 'opacity' property in this code
.btn.disabled,
.btn[disabled],
.btn.disabled:hover,
.btn[disabled]:hover,
.btn.disabled:active,
.btn[disabled]:active
New code
.btn.disabled,
.btn[disabled],
.btn.disabled:hover,
.btn[disabled]:hover,
.btn.disabled:active,
.btn[disabled]:active {
cursor: default;
pointer-events: none;
box-shadow: none;
}
4. Add the 'font-size' size property to '.btn-link', '.btn-link:active', and '.btn-link [disabled]'
New code
.btn-link,
.btn-link:active,
.btn-link[disabled] {
background-color: transparent;
background-image: none;
box-shadow: none;
font-size: 13px;
}
5. Change properties in '.btn-link'
Old code
color: #0088cc;
New code
color: #428BCA;
6. Change properties in '.btn-link:hover' and '.btn-link:focus'
Old code
color: #005580;
text-decoration: underline;
New code
color: #428BCA;
text-decoration: none;
7. Change selectors
Old code
label,
select,
button,
input[type='button'],
input[type='reset'],
input[type='submit'],
input[type='radio'],
input[type='checkbox'] {
cursor: pointer;
}
New code
label[mouseovertooltip],
select,
button,
input[type='button'],
input[type='reset'],
input[type='submit'],
input[type='radio'],
input[type='checkbox'] {
cursor: pointer;
}
8. Change properties in '.btn.social:focus', '.btn-green:focus', '.btn.social:hover', and '.btn-green:hover'
Old code
background-color: #88d47b;
New code
background-color: #74B46A;
9. Change properties in '.btn.social:active' and '.btn-green:active'
Old code
background-color: #73bb67;
New code
background-color: #74B46A;
10. Сhange properties in '.btn.social:disabled', '.btn-green [disabled]', and '.btn-green:disabled'
Old code
background-color: #81c875;
New code
background-color: #CDE9C8;
11. Сhange properties in '.btn.social:disabled:hover', '.btn-green[disabled]:hover', and '.btn-green:disabled:hover'
Old code
background-color: #81c875;
New code
background-color: #CDE9C8;
12. Add code
New code
.btn[disabled] {
color: rgba(135, 135, 135, 0.4);
}
.btn-green[disabled] {
color: rgba(255, 255, 255, 1);
}
.btn:hover,
.btn:active {
background-color: #E1E1E1;
}
.tp-form .btn.btn-link {
padding: 0;
}
13. Change properties in 'a.primary'
New code
font-family: Arial, 'Graphik Web Medium', Helvetica, sans-serif;
14. Change properties in 'a.button'
New code
font-family: Arial, 'Graphik Web Regular', Helvetica, sans-serif;
15. Change properties in '.btn'
New code
border-radius: 4px;
16. Change properties in '.delete-account-button'
Old code
.delete-account-button {
color: #f86a6a;
}
New code
.delete-account-button {
color: #f86a6a;
padding: 0;
}
Changes in input styles
1. Сhange properties in 'input[type='text']', 'input[type='password']', 'input[type='number']', and 'input[type='tel']'
New code
font-family: Arial, 'Graphik Web Regular', Helvetica, sans-serif;
font-size: 13px;
height: 40px;
2. Add code
New code
HTML
</h3>
<pre>.input[tabindex='0'].has-errors,
input[type='text'].has-errors,
input[type='password'].has-errors,
input[type='number'].has-errors,
input[type='tel'].has-errors {
border: 1px solid #F86A6A;
}
input[disabled],
.input[disabled],
input[disabled]:hover,
.input[disabled]:hover {
background-color: #EDEDED;
border: 1px solid #EDEDED;
}</pre>
<h3 data-puniqid="79fda1f45c3de57">
3. Add selectors and change properties
Old code
.input[tabindex='0']:focus,
input[type='text']:focus,
input[type='password']:focus,
input[type='number']:focus,
input[type='tel']:focus {
border: 1px solid #cccccc;
box-shadow: 0 0 3px rgba(204, 204, 204, 0.5);
outline: 0;
}
New code
.input[tabindex='0']:focus,
input[type='text']:focus,
input[type='password']:focus,
input[type='number']:focus,
input[type='tel']:focus,
.input[tabindex='0']:hover,
input[type='text']:hover,
input[type='password']:hover,
input[type='number']:hover,
input[type='tel']:hover{
border: 1px solid #428BCA;
box-shadow: none;
outline: 0;
}
4. Change properties in 'textarea:focus'
Old code
HTML
</h3>
<pre>border: 1px solid #e5e5e5;</pre>
<h3 data-renderer-start-pos="57013" data-puniqid="bc9e2d74fbba7f0">
New code
border: 1px solid #428BCA;
5. Change properties in '.input'
Old code
.input {
display: block;
width: 100%;
background: #ffffff;
font-size: 16px;
padding: 5px 8px;
box-sizing: border-box;
border: 1px solid #e4e7eb;
border-radius: 5px;
color: #333333;
text-align: left;
cursor: pointer;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
New code
.input {
display: block;
width: 100%;
background: #ffffff;
font-size: 13px;
padding: 5px 8px;
height: 40px;
line-height: 30px;
box-sizing: border-box;
border: 1px solid #e4e7eb;
border-radius: 5px;
color: #333333;
text-align: left;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
6. Change properties in '.input.with-placeholder'
Old code
font-size: 15px;
New code
font-size: 13px;
7. Change properties in '.custom-field-has-errors .input', '.custom-field-has-errors .pn-button-group .pn-button-group__item', and '.custom-field-has-errors input'
Old code
border-color: #ef9193;
New code
border-color: #F86A6A;
8. Change properties in '.validation-error'
Old code
color: #eb6465;
New code
color: #F86A6A;
9. Change properties in '.error-message'
Old code
color: #eb6465;
New code
color: #F86A6A;
10. Change properties in '.custom-field-type-number .arrow-increment'
New code
top: 12px;
11. Change properties in '.custom-field-type-number .arrow-decrement'
New code
top: 20px;
12. Add code
New code
.custom-field-type-boolean .field-checkbox-label {
height: 40px;
line-height: 40px;
}
13. Change properties in '.delete-account-container input'
Old code
.delete-account-container input {
height: 42px;
min-width: 307px;
}
New code
.delete-account-container input {
height: 40px;
min-width: 307px;
padding: 0 40px;
}
Changes in common styles
1. Change properties in 'span.title'
Old code
span.title {
color: #a1aab6;
padding: 10px 0 0 18px;
display: block;
}
New code
span.title {
color: #a1aab6;
display: block;
}
2. If you have a duplicate of this code, delete it
label,
select,
button,
input[type='button'],
input[type='reset'],
input[type='submit'],
input[type='radio'],
input[type='checkbox'] {
cursor: pointer;
}
3. Change properties in 'body'
Old code
body {
font-size: 13px;
}
New code
body {
font-size: 15px;
}
4. Change properties in '.tp-form .control-group'
Old code
.tp-form .control-group {
margin-bottom: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
}
New code
.tp-form .control-group {
display: grid;
grid-template-columns: 1fr auto 400px;
grid-gap: 10px;
grid-template-areas: "label tooltip control";
align-items: start;
}
5. Change properties in '.tp-form .controls'
Old code
.tp-form .controls {
padding-left: 30px;
width: 100%;
}
New code
.tp-form .controls {
grid-area: control;
width: 100%;
min-height: 40px;
}
6. Add code
New code
.controls .control-divider {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 20px;
margin-bottom: 10px;
}
7. Change properties in '.tp-form .control-label'
Old code
.tp-form .control-label {
width: 170px;
}
New code
.tp-form .control-label {
grid-area: label;
font-size: 13px;
margin-top: 12px;
}
8. Change properties in '.tp-form .control-label-icon'
Old code
margin-left: 5px;
margin-right: -25px;
New code
margin-top: 12px;
grid-area: tooltip;
9. Change properties in '.pn-phone-confirmation'
Old code
.pn-phone-confirmation {
padding: 24px;
border: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
New code
.pn-phone-confirmation {
padding: 20px;
border: 1px solid rgba(0, 0, 0, .1);
margin-top: 20px;
height: 230px;
}
10. Change properties in '.pn-phone-confirmation .pn-phone-confirmation-text p'
Old code
max-width: 370px;
New code
max-width: 400px;
11. Change code
Old code
.pn-phone-confirmation .pn-phone-confirmation-close {
position: absolute;
right: 20px;
}
New code
.pn-phone-confirmation .pn-phone-confirmation-close,
.delete-account-confirmation-close{
position: relative;
}
12. Change code
Old code
HTML
</h3>
<pre>.pn-phone-confirmation .pn-phone-confirmation-close .pn-phone-confirmation-close-btn {
width: 20px;
height: 20px;
box-shadow: none;
outline: none;
border: none;
opacity: .6;
background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg %3E%3Cpath d='M3 3L13 13M13 3L3 13' stroke='%230F0F15' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A") center center no-repeat;
}</pre>
<h3 data-puniqid="7708c1e00fa4379">
New code
.pn-phone-confirmation .pn-phone-confirmation-close .pn-phone-confirmation-close-btn,
.delete-account-confirmation-close .delete-account-confirmation-close-btn{
position: absolute;
right: 0;
width: 20px;
height: 20px;
box-shadow: none;
outline: none;
border: none;
opacity: .4;
background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg %3E%3Cpath d='M3 3L13 13M13 3L3 13' stroke='%230F0F15' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A") center center no-repeat;
}
13. Add code
New code
.pn-phone-confirmation .pn-phone-confirmation-close .pn-phone-confirmation-close-btn:hover,
.delete-account-confirmation-close .delete-account-confirmation-close-btn:hover {
opacity: 1;
}
14. Add code
New code
.content-padding-tb .actions {
margin-top: 20px;
}
.tp-data-block {
padding: 20px 0px;
border-bottom: 1px solid #e4e7eb;
}
.tp-data-block-header {
line-height: 24px;
font-weight: 400;
font-size: 16px;
margin-bottom: 20px;
}
.tp-data-block-actions {
margin-top: 10px;
display: flex;
align-items: center;
}
15. Change code
Old code
.content-padding-tb {
clear: both;
padding: 24px 0;
}
New code
.content-padding-tb {
clear: both;
padding: 24px 0;
max-width: 580px;
}
16. Change code
Old code
.social-linked,
.social-caption {
height: 40px;
line-height: 40px;
}
New code
.social-linked {
height: 40px;
line-height: 40px;
}
17. Change properties in '.social-linked::before'
Old code
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAASwSURBVFiFxZltbFNlFMd/5952AtvoJEqUDyQawSyL8SV7A2PChEgIGIgxQ42gX00MtnUOE+d83BaJoawLRqIoJpoIhpgYeVEIBCTibKcJEt/iC2CMCUQRGLAXu557/LC1abfRt7Xj/6n33POc8+u5zz3P06dCkWRO+KuGr84QgBkVw2ru7blUjLhSyKCWky3lFUPOw8CDCPXAHQrl4wIPAL+rEFXkyOAN1r7Q3aGBkgK2RTYssC27RZTHFSrzzHVZ0F1x27u5q3bzqaICmq9a5uJxXgOeVrDzBBuf0FFhh1jWS6Z2y/kpA7ZH/SsF+QCYMxWwSXRehHWmPnwgk5OV6aaJ+ltB9lJ8OICbVNlvosFgJqdrAppIsEOR16XAFylHWYpuMdGguZbDpMlNxN+iIptLhjWJFIIdDeHwePsEwPZIYDXCJyWu3AQpqOXKGrOoe0+qPQ3C9AbmqM3PwNzphEvROSnT6tQmnz4Hbe3i+sEB3ELM6kg1JCtoosGFoD9Ntc9NVQJOXJ3qrsatv0FaBV3/9YYDULA9lue5xLUABHoDM302ZxV8Jc5/Grg9B79LMui71TSZYQvA59EV0wB3ROyBu0R4OQffKndm/3IYe8TqytJSkgnslQrfClO7fdDUh7sUMq4eACIsA/CMRagvGZ1yuN9lbbjGxBImCz0D4mSc8zrKZKGIQHVJ4ET3SKVvZXhxeChhMn3BJ0E+zvZCilCNIrLx242+GU4s592voKcUuRmYnTmBHuqPy+p0OP8jqHyk4M0l19CId7blicUqcofj5H9eZ5FryRKBfzP4fUp51apUuPaIfx0qu3OFA5gFlZbXiue05orwPXH7oU33vfFPZ133CVRWCfRPhJODDPoeMylzzkT8j1oiOwrps9aQZ9aVXBxVmTkiTvLbm8buiOO6y1MhR+FmrzFNZjgVDpGd+VQuoUG4IgCvRAP9ZJlTY/rTwV7S1RA6kwTo89+jKodAjp+1rzZvr90+krwXDa4Hfa+QyglcNA3hOYml7tccx8334Bw0x1vnJSHqe74Ty2m67OgTaXB9gWZFC3qsAKqkrMVKb84DYYF6R75ui7bcloSp2/qDz+dzzFHjAWiPBp5SZReJPluILO1NAoqlx/IcPt/GOZBWyRoTM0uM094XXCvwLll+72STuvJFEpCBqs8ELuYZYyHekd7USrb3BdaL6k6mUrlRnbcqfZ9D2n7Qv02RZ/KNJPBLzNamMlceUOXDIsAhIm+a+u5nIfUxWBIC4vkGU7jT60ikaHAwguOGkliJD6YufFrQdwqMO78YcKOSt8yinj8SV+kT2ZE24O/iJCpI5yhz21MNaYBmcfiCKzQLONPLBUDchebxx3YTWkFnffgYqi9OH9eoFFo7G8JfjrdP2qtMY09IVDpLjzUqQV6d7FRh9F4Gmai/VZFNTLHpZpAryAumobv7Wg5Zt1rmm8AyVX0flXnZfPPUX6qyvqOx+2gmp6yVMXXhw+KlRtC3i/HyCDgo20TjNdngxvxzV1tkwwKPWM+DNCvcmCfbBWC3Y3tCRT8CHi/zoylzBy8tFUdWiXA/GQ7RETkOuo9y35HUXXZJASeFLtHfEP8DO1a8xdokWtoAAAAASUVORK5CYII=');
New code
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iMTAiIGZpbGw9IiM0MjhCQ0EiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04IDE0TDUgMTFMNiAxMEw4IDEyTDE0IDZMMTUgN0w4IDE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
18. Remove code
Old code
.btn.social {
min-width: 164px;
}
19. Change properties in '.delete-account-container'
Old code
.delete-account-container {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 16px;
}
New code
.delete-account-container {
margin-top: 20px;
border: 1px solid rgba(0,0,0,.1);
padding: 20px;
min-height: 170px;
}
20. Add code
New code
.delete-account-content {
min-height: 130px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.delete-account-controls {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
}
.delete-account-password-icon-wrapper {
position: absolute;
}
.delete-account-password-icon {
position: relative;
width: 20px;
height: 20px;
top: 10px;
left: 10px;
display: block;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiA2VjdIOFY2QzggNC44OTU0MyA4Ljg5NTQzIDQgMTAgNEMxMS4xMDQ2IDQgMTIgNC44OTU0MyAxMiA2Wk02IDZDNiAzLjc5MDg2IDcuNzkwODYgMiAxMCAyQzEyLjIwOTEgMiAxNCAzLjc5MDg2IDE0IDZWN1Y3LjAwMDI1TDE2IDcuMDAwM1YxOEg0VjdMNiA3LjAwMDA1VjdWNlpNMTQgOUgxMkg4SDZWMTZIMTRWOVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=");
}