From ab619e7f644dfa02d82db39369c71869778129d7 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 13:30:37 +0700
Subject: [PATCH] :art: styles: fix shape input common

:%s
---
 .../InputCommon/InputCommon.module.scss       | 45 ++++++++++---------
 .../common/InputCommon/InputCommon.tsx        |  7 +--
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/components/common/InputCommon/InputCommon.module.scss b/src/components/common/InputCommon/InputCommon.module.scss
index 6b12d2bbd..1c64c764e 100644
--- a/src/components/common/InputCommon/InputCommon.module.scss
+++ b/src/components/common/InputCommon/InputCommon.module.scss
@@ -15,10 +15,10 @@
     .icon + .inputCommon {
       padding-left: 4.8rem;
     }
-    
+
     .inputCommon {
       @apply block w-full transition-all duration-200 rounded bg-white;
-      padding: 1.2rem 1.6rem;
+      padding: 1.6rem;
       border: 1px solid var(--border-line);
       &:hover,
       &:focus,
@@ -31,24 +31,6 @@
       &::placeholder {
         @apply text-label;
       }
-
-      &.custom {
-        @apply custom-border-radius;
-        border: 1px solid transparent;
-        background: var(--gray);
-        &:hover,
-        &:focus,
-        &:active {
-          border: 1px solid var(--primary);
-        }
-      }
-      &.bgTransparent {
-        background: rgb(227, 242, 233, 0.3);
-        color: var(--white);
-        &::placeholder {
-          color: var(--white);
-        }
-      }
     }
 
     &.preserve {
@@ -91,4 +73,27 @@
     color: var(--negative);
     margin-top: 0.4rem;
   }
+
+  &.custom {
+    @apply shape-common;
+    .inputCommon {
+      border: none;
+      background: var(--background-gray);
+      &:hover,
+      &:focus,
+      &:active {
+        @apply shadow-md;
+        border: none;
+      }
+    }
+  }
+  &.bgTransparent {
+    .inputCommon {
+      background: rgb(227, 242, 233, 0.3);
+      color: var(--white);
+      &::placeholder {
+        color: var(--white);
+      }
+    }
+  }
 }
diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx
index 0389c99b3..fbe1df191 100644
--- a/src/components/common/InputCommon/InputCommon.tsx
+++ b/src/components/common/InputCommon/InputCommon.tsx
@@ -6,7 +6,7 @@ import s from './InputCommon.module.scss';
 
 type Ref = {
     focus: () => void
-    getValue: () =>  string | number
+    getValue: () => string | number
 } | null;
 interface Props {
     children?: React.ReactNode,
@@ -63,6 +63,9 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
     return (
         <div className={classNames({
             [s.inputWrap]: true,
+            [s[styleType]]: true,
+            [s.bgTransparent]: backgroundTransparent
+
         })}>
             <div className={classNames({
                 [s.inputInner]: true,
@@ -80,8 +83,6 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
                     onKeyDown={handleKeyDown}
                     className={classNames({
                         [s.inputCommon]: true,
-                        [s[styleType]]: true,
-                        [s.bgTransparent]: backgroundTransparent
                     })}
                 />
             </div>