Merge pull request #1935 from SUNET/eunju-language-missing-data

Add margin-top to the repeat-wrapper to prevent the meter from coveri…
SUNET · Dec 16, 2024 · 3f9954a · 3f9954a
2 parents bd5c61a + bb2855e
commit 3f9954a
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 47 deletions.
diff --git a/src/components/Common/PasswordStrengthMeter.tsx b/src/components/Common/PasswordStrengthMeter.tsx
@@ -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>
   );
 }

diff --git a/src/components/Dashboard/ChangePasswordCustom.tsx b/src/components/Dashboard/ChangePasswordCustom.tsx
@@ -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
@@ -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}

diff --git a/src/styles/_ChangePassword.scss b/src/styles/_ChangePassword.scss
@@ -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) {

diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss
@@ -7,7 +7,7 @@ form {
   margin-top: 1.25rem;
 
   .form-wrapper {
-    height: 5.5rem;
+    min-height: 5.5rem;
   }
 }
 

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -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