fix: update magic input component style

1. update close button style when focus the input
2. hide the search icon when focus the input
3. add gaps for multi tags

Change-Id: Ieef48447ccabc87f6088973bcb34a269d144d6d4

src/components/MagicInput/index.jsx

@@ -578,7 +578,11 @@ class MagicInput extends PureComponent {
             />
             {this.renderMenu()}
           </Col>
-          <Col className={styles['search-icon']}>
+          <Col
+            className={`${styles['search-icon']} ${
+              isFocus ? styles['search-icon-hidden'] : ''
+            }`}
+          >
             <SearchOutlined />
           </Col>
           {this.renderClose()}

src/components/MagicInput/index.less

@@ -19,6 +19,7 @@
     .ant-tag {
       height: 24px;
       margin-right: 4px;
+      margin-bottom: 1px;
       padding: 0 4px;
       color: #fff;
       font-size: 10px;
@@ -140,12 +141,19 @@
   line-height: 32px;
 }
 
+.search-icon-hidden {
+  display: none;
+}
+
 .close-btn-col {
-  height: 24px;
-  line-height: 24px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 30px;
+  line-height: 30px;
 
   .close-btn {
-    height: 24px !important;
+    height: 28px !important;
     padding: 0;
     border: none;
   }