feat(ui): update UI

Author: Vu Van Duc

src/ui/components/PageHeader/PageHeader.scss

@@ -62,6 +62,10 @@
         font-size: 1rem;
         font-weight: 700;
 
+        & > * {
+          color: var(--ion-color-neutral-700);
+        }
+
         &.md {
           font-size: 0.8rem;
         }

src/ui/components/VerifyPassword/VerifyPassword.scss

@@ -38,22 +38,32 @@
     --min-height: auto;
   }
 
-  ion-item.custom-input .input-line {
-    border: none;
-    text-align: center;
-    font-size: 2rem;
-  }
+  ion-item.custom-input {
+    .input-line {
+      border-width: 0.125rem;
+      overflow: hidden;
+      background: var(--ion-color-neutral-100);
+
+      &:focus-within {
+        border-color: var(--ion-color-primary-700);
+      }
+    }
 
-  ion-input {
-    margin-left: 2rem;
+    ion-input {
+      border-radius: 0.5rem;
+      --padding-top: 0.75rem;
+      --padding-bottom: 0.75rem;
+      font-weight: 400;
+      font-size: 1rem;
 
-    &[type="password"] {
-      letter-spacing: 0.25em;
-    }
-  }
+      .input-wrapper {
+        --background: var(--ion-color-neutral-100);
+      }
 
-  .close-button-label {
-    color: var(--ion-color-neutral-800);
+      &[type="password"] {
+        letter-spacing: 0.25em;
+      }
+    }
   }
 
   .error-message {
@@ -91,6 +101,9 @@
     text-transform: none !important;
     border-radius: 1rem !important;
     border: 1px solid var(--ion-color-neutral-400) !important;
-    height: auto !important;
+
+    &.sc-ion-alert-md {
+      height: auto !important;
+    }
   }
 }

src/ui/components/VerifyPassword/VerifyPassword.tsx

@@ -127,10 +127,11 @@ const VerifyPassword = ({
         <form className="password-input-container">
           <CustomInput
             dataTestId="verify-password-value"
-            hiddenInput={true}
-            autofocus={true}
+            hiddenInput
+            autofocus
             onChangeInput={setVerifyPasswordValue}
             value={verifyPasswordValue}
+            error={showError}
           />
           {showError ? (
             <ErrorMessage