chore: updated PasswordInput with css variables

deriv-com · Mar 4, 2024 · 45c0a70 · 45c0a70
1 parent c801251
commit 45c0a70
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 36 deletions.
diff --git a/lib/components/PasswordInput/PasswordInput.scss b/lib/components/PasswordInput/PasswordInput.scss
@@ -1,7 +1,3 @@
-$NEUTRAL: #e6e9e9;
-$SUCCESS: #4bb4b3;
-$ERROR: #ec3f3f;
-
 .deriv-password {
     position: relative;
     display: inline-block;
@@ -17,11 +13,11 @@ $ERROR: #ec3f3f;
     &__meter {
         position: absolute;
         z-index: 1;
-        border-radius: 0px 0px 4px 4px;
+        border-radius: 0rem 0rem $border-radius $border-radius;
         width: 100%;
-        height: 4px;
-        background-color: $NEUTRAL;
-        bottom: calc(100% - 42px);
+        height: 0.4rem;
+        background-color: var(--general-hover);
+        bottom: calc(100% - 4rem);
     }
     &__icon {
         display: flex;

diff --git a/lib/components/PasswordInput/PasswordMeter.scss b/lib/components/PasswordInput/PasswordMeter.scss
@@ -4,42 +4,42 @@ $ERROR: #ec3f3f;
 
 .deriv-password__meter__bar {
     height: 100%;
-    border-radius: 0px 0px 4px 4px;
+    border-radius: 0rem 0rem $border-radius $border-radius;
     transition: width 0.25s ease-in-out;
 
     &__initial {
-        background-color: $NEUTRAL;
+        background-color: var(--status-default);
         width: 0%;
-        border-radius: 0px 0px 0px 4px;
+        border-radius: 0rem 0rem 0rem $border-radius;
     }
 
     &--error {
-        background-color: $ERROR;
+        background-color: var(--status-danger);
         width: 0%;
-        border-radius: 0px 0px 0px 4px;
+        border-radius: 0rem 0rem 0rem $border-radius;
     }
 
     &--weak {
-        background-color: $ERROR;
+        background-color: var(--status-danger);
         width: 25%;
-        border-radius: 0px 0px 0px 4px;
+        border-radius: 0rem 0rem 0rem $border-radius;
     }
 
     &--moderate {
-        background-color: $ERROR;
+        background-color: var(--status-danger);
         width: 50%;
-        border-radius: 0px 0px 0px 4px;
+        border-radius: 0rem 0rem 0rem $border-radius;
     }
 
     &--strong {
-        background-color: $SUCCESS;
+        background-color: var(--status-success);
         width: 75%;
-        border-radius: 0px 0px 0px 4px;
+        border-radius: 0rem 0rem 0rem $border-radius;
     }
 
     &--complete {
-        background-color: $SUCCESS;
+        background-color: var(--status-success);
         width: 100%;
-        border-radius: 0px 0px 4px 4px;
+        border-radius: 0rem 0rem $border-radius $border-radius;
     }
 }
diff --git a/src/stories/PasswordInput.stories.tsx b/src/stories/PasswordInput.stories.tsx
@@ -62,11 +62,13 @@ export const Default: Story = {
         const [value, setValue] = useState("");
 
         return (
-            <PasswordInput
-                {...args}
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-            />
+            <div className="theme--light">
+                <PasswordInput
+                    {...args}
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                />
+            </div>
         );
     },
 };
@@ -85,11 +87,13 @@ export const HideMessage: Story = {
         const [value, setValue] = useState("");
 
         return (
-            <PasswordInput
-                {...args}
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-            />
+            <div className="theme--light">
+                <PasswordInput
+                    {...args}
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                />
+            </div>
         );
     },
 };
@@ -107,11 +111,13 @@ export const HidePasswordMeter: Story = {
         const [value, setValue] = useState(args.value);
 
         return (
-            <PasswordInput
-                {...args}
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-            />
+            <div className="theme--light">
+                <PasswordInput
+                    {...args}
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                />
+            </div>
         );
     },
 };