Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add margin-top to the repeat-wrapper to prevent the meter from coveri… #1935

Merged
merged 7 commits into from
Dec 16, 2024
Merged

Add margin-top to the repeat-wrapper to prevent the meter from coveri… #1935

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2b428d8
Add margin-top to the repeat-wrapper to prevent the meter from coveri…
eunjuhuss Dec 12, 2024
c7f9338
form wrapper min-height to allow additional stuff
cartja Dec 12, 2024
4bbaf1c
light on dark pw meter
cartja Dec 12, 2024
3a813fc
FF/Mozilla meter draft
cartja Dec 13, 2024
7f29a8d
green that will pass AA against body gray
cartja Dec 16, 2024
470869e
hide meter if field empty
cartja Dec 16, 2024
bb2855e
striped bg for gecko/mozilla, tidying
cartja Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/Common/PasswordStrengthMeter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,9 @@ function PasswordStrengthMeter(props: PasswordStrengthMeterProps) {
<div className={`form-field-error-area ${pwScore >= 3 ? "success" : ""}`} key="1">
{props.password !== undefined && <FormText>{intl.formatMessage({ id: pwStrengthMessages[pwScore] })}</FormText>}
</div>
<meter max="4" value={pwScore} id="password-strength-meter" key="0" />
<div className="meter-wrapper">
<meter max="4" value={pwScore} id="password-strength-meter" key="0" />
</div>
</React.Fragment>
);
}
Expand Down
8 changes: 3 additions & 5 deletions src/components/Dashboard/ChangePasswordCustom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,13 +57,13 @@ export default function ChangePasswordCustomForm(props: ChangePasswordCustomForm
render={(formProps) => {
return (
<form id="passwords-view-form" onSubmit={formProps.handleSubmit}>
<fieldset className="password-format">
<label>
<fieldset>
<legend>
<FormattedMessage
defaultMessage="Tip: Choose a strong password"
description="help text for custom password label"
/>
</label>
</legend>
<ul id="password-custom-help">
{[
<FormattedMessage
Expand All @@ -90,9 +90,7 @@ export default function ChangePasswordCustomForm(props: ChangePasswordCustomForm
return <li key={list.key}>{list}</li>;
})}
</ul>
</fieldset>

<fieldset className="change-password-custom-inputs">
<FinalField
name="custom"
component={NewPasswordInput}
Expand Down
79 changes: 40 additions & 39 deletions src/styles/_ChangePassword.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,61 +19,62 @@ fieldset.toggle-change-password-options {
margin: 1rem;
}

/* Password strength meter */

.meter-wrapper {
//border: 2px solid $border-gray;
background: $border-gray;
border-radius: 10px;
height: 20px;
overflow: hidden;
line-height: 0;

.form-field-error-area:empty + & {
display: none;
}
}
meter {
width: 100%;
height: 2.5rem;
height: 20px;
border: none;
background: repeating-linear-gradient(-55deg, $border-gray, $border-gray 10px, $bg-gray 10px, $bg-gray 20px);
}

meter[value="1"]::-webkit-meter-optimum-value {
background: red;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
meter[value="2"]::-webkit-meter-optimum-value {
background: yellow;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
meter[value="3"]::-webkit-meter-optimum-value {
background: green;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
/* Webkit browsers */
meter::-webkit-meter-bar {
height: 20px;
background: repeating-linear-gradient(-55deg, $border-gray, $border-gray 10px, $bg-gray 10px, $bg-gray 20px);
}
meter[value="4"]::-webkit-meter-optimum-value {
background: green;
meter::-webkit-meter-optimum-value {
background: $txt-gray;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
// meter[value="1"]::-webkit-meter-optimum-value {
// background: $$error-red;
// }
// meter[value="2"]::-webkit-meter-optimum-value {
// background: $error-red;
// }
// meter[value="3"]::-webkit-meter-optimum-value {
// background: $success-green;
// }
// meter[value="4"]::-webkit-meter-optimum-value {
// background: $success-green;
// }

/* Gecko based browsers */
meter[value="1"]::-moz-meter-bar {
background: red;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
meter[value="2"]::-moz-meter-bar {
background: yellow;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
meter[value="3"]::-moz-meter-bar {
background: green;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
meter[value="4"]::-moz-meter-bar {
background: green;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
/* Gecko browsers */
:-moz-meter-optimum::-moz-meter-bar {
background: $txt-gray;
}

.form-field-error-area small.text-muted {
font-size: 0.9rem !important;
color: #d2143a !important;
color: $error-red !important;
}

.form-field-error-area.success small.text-muted {
color: green !important;
color: $success-green !important;
}

@media (max-width: 375px) {
Expand Down
2 changes: 1 addition & 1 deletion src/styles/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ form {
margin-top: 1.25rem;

.form-wrapper {
height: 5.5rem;
min-height: 5.5rem;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ $txt-orange: #c23400; //text on gray or orange
$btn-orange: #db3a00; //white on orange

$error-red: #d2143a;
$success-green: #198754;
$success-green: #177d4d;

/*
* Typography
Expand Down
Loading