Merged in fix/update-password-phone-input (pull request #2298)

fix: update password and deprecated phone inputs to be consistent with other existing inputs in signup

Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/index.tsx

@@ -34,7 +34,7 @@ export default function Phone({
   disabled = false,
   label,
   name = "phoneNumber",
-  placeholder = "",
+  placeholder,
   readOnly = false,
   registerOptions = {
     required: true,

apps/scandic-web/components/TempDesignSystem/Form/Input/input.module.css

@@ -1,15 +1,15 @@
 .helpText {
   align-items: flex-start;
   display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }
 
 .error {
   align-items: center;
   color: var(--Text-Interactive-Error);
   display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
-  margin: var(--Spacing-x1) 0 0;
+  margin: var(--Space-x1) 0 0;
 }
 
 .error svg {

apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx

@@ -24,7 +24,7 @@ export default function PasswordInput({
   label,
   "aria-label": ariaLabel,
   disabled = false,
-  placeholder = "",
+  placeholder,
   registerOptions = {},
   visibilityToggleable = true,
   isNewPassword = false,

apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/passwordInput.module.css

@@ -1,79 +1,22 @@
-.container {
-  align-content: center;
-  background-color: var(--Main-Grey-White);
-  border-color: var(--Scandic-Beige-40);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--Corner-radius-md);
-  display: grid;
-  height: 60px;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
-  transition: border-color 200ms ease;
-  position: relative;
-}
-
-.container:has(.input:active, .input:focus) {
-  border-color: var(--Scandic-Blue-90);
-}
-
-.container:has(.input:disabled) {
-  background-color: var(--Main-Grey-10);
-  border: none;
-  color: var(--Main-Grey-40);
-}
-
-.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
-  border-color: var(--Scandic-Red-60);
-}
-
-.input {
-  background: none;
-  border: none;
-  color: var(--Main-Grey-100);
-  height: 18px;
-  margin: 0;
-  order: 2;
-  overflow: visible;
-  padding: 0;
-}
-
-.input:not(:active, :focus):placeholder-shown {
-  height: 0px;
-  transition: height 150ms ease;
-}
-
-.input:focus,
-.input:focus:placeholder-shown,
-.input:active,
-.input:active:placeholder-shown {
-  height: 18px;
-  transition: height 150ms ease;
-  outline: none;
-}
-
-.input:disabled {
-  color: var(--Main-Grey-40);
-}
-
 .helpText {
   align-items: flex-start;
   display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }
 
 .error {
   align-items: center;
-  color: var(--Scandic-Red-60);
+  color: var(--Text-Interactive-Error);
   display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
-  margin: var(--Spacing-x1) 0 0;
+  margin: var(--Space-x1) 0 0;
 }
 
 .errors {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--Spacing-x-one-and-half) var(--Spacing-x1);
+  gap: var(--Space-x15) var(--Space-x1);
-  padding-top: var(--Spacing-x1);
+  padding-top: var(--Space-x1);
 }
 
 .inputWrapper {