feat(ui): update UI

Author: Vu Van Duc

src/ui/components/CustomInput/CustomInput.scss

@@ -57,6 +57,7 @@ ion-item.custom-input {
       --padding-top: 0.875rem;
       --padding-bottom: 0.875rem;
       --padding-start: 1.25rem;
+      --padding-end: 1.25rem;
       --ion-item-border-color: var(--ion-color-neutral-400);
       min-height: 3.125rem;
 
@@ -66,13 +67,14 @@ ion-item.custom-input {
     }
 
     ion-button {
-      width: 2rem;
-      height: 2rem;
+      width: 1.5rem;
+      height: 1.5rem;
       margin: auto 0.5rem;
       border-radius: 1.5rem;
       --background: transparent;
       --background-activated: var(--ion-color-neutral-400);
       --box-shadow: none;
+      min-height: auto !important;
 
       &::part(native) {
         padding: 0;

src/ui/components/CustomInput/CustomInput.tsx

@@ -86,37 +86,40 @@ const CustomInput = ({
           onIonBlur={() => handleFocus(false)}
           onKeyDown={hideKeyboard}
           value={value}
-        />
-        {hiddenInput && (
-          <IonButton
-            shape="round"
-            onClick={() => {
-              setHidden(!hidden);
-            }}
-            data-testid={`${dataTestId}-hide-btn`}
-          >
-            <IonIcon
-              slot="icon-only"
-              icon={hidden ? eyeOutline : eyeOffOutline}
-              color="primary"
-            />
-          </IonButton>
-        )}
-        {action && actionIcon && (
-          <IonButton
-            shape="round"
-            data-testid={`${dataTestId}-action`}
-            onClick={(e) => {
-              action(e);
-            }}
-          >
-            <IonIcon
-              slot="icon-only"
-              icon={actionIcon}
-              color="primary"
-            />
-          </IonButton>
-        )}
+        >
+          {hiddenInput && (
+            <IonButton
+              shape="round"
+              onClick={() => {
+                setHidden(!hidden);
+              }}
+              data-testid={`${dataTestId}-hide-btn`}
+              slot="end"
+            >
+              <IonIcon
+                slot="icon-only"
+                icon={hidden ? eyeOutline : eyeOffOutline}
+                color="primary"
+              />
+            </IonButton>
+          )}
+          {action && actionIcon && (
+            <IonButton
+              shape="round"
+              data-testid={`${dataTestId}-action`}
+              onClick={(e) => {
+                action(e);
+              }}
+              slot="end"
+            >
+              <IonIcon
+                slot="icon-only"
+                icon={actionIcon}
+                color="primary"
+              />
+            </IonButton>
+          )}
+        </IonInput>
       </div>
     </IonItem>
   );

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,33 @@
     --min-height: auto;
   }
 
-  ion-item.custom-input .input-line {
-    border: none;
-    text-align: center;
-    font-size: 2rem;
-  }
-
-  ion-input {
-    margin-left: 2rem;
+  ion-item.custom-input {
+    &.error {
+      ion-input {
+        border-color: var(--ion-color-error-800);
+      }
+    }
 
-    &[type="password"] {
-      letter-spacing: 0.25em;
+    .input-line {
+      border: none;
     }
-  }
 
-  .close-button-label {
-    color: var(--ion-color-neutral-800);
+    ion-input {
+      border: 0.125rem solid var(--ion-color-neutral-700);
+      border-radius: 0.5rem;
+      --padding-top: 0.75rem;
+      --padding-bottom: 0.75rem;
+      font-weight: 400;
+      font-size: 1rem;
+
+      &.has-focus {
+        border-color: var(--ion-color-primary-700);
+      }
+
+      &[type="password"] {
+        letter-spacing: 0.25em;
+      }
+    }
   }
 
   .error-message {
@@ -91,6 +102,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

src/ui/pages/CreateSSIAgent/CreateSSIAgent.scss

@@ -19,6 +19,10 @@
       }
     }
 
+    .open-info {
+      margin-bottom: 1.5rem;
+    }
+
     & > * {
       margin: 0;
     }

src/ui/pages/CreateSSIAgent/CreateSSIAgent.tsx

@@ -436,7 +436,7 @@ const CreateSSIAgent = () => {
             <div>
               <IonButton
                 fill="outline"
-                className="copy-button secondary-button"
+                className="open-info secondary-button"
                 onClick={() => setOpenInfo(true)}
               >
                 <IonIcon