style(ui): input auto fill style update (#1534)

input auto-fill style update

packages/ui/src/components/Input/index.module.scss

@@ -12,32 +12,20 @@
   transition-property: outline, border;
   transition-timing-function: ease-in-out;
   transition-duration: 0.2s;
-  padding: 0 _.unit(4);
 
   .actionButton {
+    position: absolute;
+    right: _.unit(4);
+    top: 50%;
+    transform: translateY(-50%);
     display: none;
     color: var(--color-icon);
     width: 24px;
     height: 24px;
   }
 
-  > *:not(:first-child) {
-    margin-left: _.unit(1);
-  }
-
-  &:focus-within {
-    border: _.border(var(--color-primary));
-
-    .actionButton {
-      display: block;
-    }
-  }
-
-  &.error {
-    border: _.border(var(--color-error));
-  }
-
   input {
+    padding: 0 _.unit(4);
     flex: 1;
     background: none;
     caret-color: var(--color-primary);
@@ -53,8 +41,25 @@
     &:-webkit-autofill {
       box-shadow: 0 0 0 30px var(--color-layer) inset;
       -webkit-text-fill-color: var(--color-text);
+      transition: none;
     }
   }
+
+  &:focus-within {
+    border: _.border(var(--color-primary));
+
+    .actionButton {
+      display: block;
+    }
+
+    input {
+      padding-right: calc(24px + _.unit(4));
+    }
+  }
+
+  &.error {
+    border: _.border(var(--color-error));
+  }
 }
 
 .errorMessage {

packages/ui/src/components/Input/phoneInput.module.scss

@@ -9,6 +9,7 @@
   @include _.flex-row;
   position: relative;
   margin-right: _.unit(1);
+  margin-left: _.unit(4);
 
   > select {
     appearance: none;
@@ -20,6 +21,10 @@
     height: 100%;
     font-size: 0;
   }
+
+  + input {
+    padding-left: _.unit(1);
+  }
 }
 
 :global(body.mobile) {
@@ -33,7 +38,6 @@
   }
 }
 
-
 :global(body.desktop) {
   .countryCodeSelector {
     > svg {

packages/ui/src/scss/normalized.scss

@@ -13,4 +13,6 @@ body {
 input {
   border: none;
   outline: none;
+  padding: 0;
+  margin: 0;
 }