💅 Fix border of autoSuggest

LiskHQ · Aug 22, 2019 · e046b25 · e046b25
1 parent a7d0ff5
commit e046b25
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/components/toolbox/autoSuggest/autoSuggest.css b/src/components/toolbox/autoSuggest/autoSuggest.css
@@ -1,6 +1,6 @@
 @import '../../app/variables.css';
 
-.recipientField {
+.inputWrapper {
   align-items: center;
   display: flex;
   position: relative;
@@ -14,12 +14,12 @@
     padding-left: 50px;
     padding-right: 30px;
 
-    & ~ .bookmarkContainer {
+    & ~ .listContainer {
       opacity: 0 !important;
       visibility: hidden !important;
     }
 
-    &:focus ~ .bookmarkContainer {
+    &:focus ~ .listContainer {
       opacity: 1 !important;
       visibility: visible !important;
     }
@@ -31,13 +31,16 @@
   left: 16px;
 }
 
-.bookmarkContainer {
+.listContainer {
   @mixin contentLargest;
 
   position: absolute;
   top: 52px;
   width: 100%;
   display: flex;
+  box-sizing: border-box;
+  border: 1px solid var(--dark-border-color);
+  border-radius: var(--border-radius-standard);
   background-color: var(--color-white);
   flex-direction: column;
   justify-content: center;
@@ -59,7 +62,7 @@
   right: 10px;
 }
 
-.bookmarkList {
+.itemList {
   align-items: center;
   box-sizing: border-box;
   display: flex;

diff --git a/src/components/toolbox/autoSuggest/index.js b/src/components/toolbox/autoSuggest/index.js
@@ -134,7 +134,7 @@ class AutoSuggest extends React.Component {
 
     return (
       <Fragment>
-        <span className={`${styles.recipientField} ${className}`}>
+        <span className={`${styles.inputWrapper} ${className}`}>
           <span className={styles.icon}>
             {renderIcon(selectedItem)}
           </span>
@@ -152,9 +152,9 @@ class AutoSuggest extends React.Component {
             className={`${styles.status} ${!this.state.isLoading && selectedItem.value ? styles.show : styles.hide}`}
             name={selectedItem.error ? 'alertIcon' : 'okIcon'}
           />
-          <div className={`${styles.bookmarkContainer}`}>
+          <div className={`${styles.listContainer}`}>
             <div ref={(node) => { this.listContainerRef = node; }}>
-              <ul className={`${styles.bookmarkList} bookmark-list`}>
+              <ul className={`${styles.itemList} bookmark-list`}>
                 {
                 this.getFilterList()
                   .map((item, index) => (