fix(autocomplete): update autocomplete design (#288)

* fix(autocomplete): update autocomplete design

#287

* fix(autocomplete): fix no results message

* test(autocomplete): fix broken test

Author: rishichawda

lib/autocomplete/index.js

@@ -247,7 +247,7 @@ class AutoComplete extends Component {
             {item[`${labelKey}`]}
           </div>
         );
-      }) : 'No results found!';
+      }) : <span className={theme['no-results']}>No results found!</span>;
   };
 
   render() {

lib/autocomplete/tests/edgecases.test.js

@@ -29,7 +29,7 @@ describe('AutoComplete Edge Cases tests', () => {
     wrappedComponent.setProps({ data: [] });
     const simulatedValue = () => wrappedComponent
       .find('#autocomplete-list')
-      .children().length;
+      .children('div').length;
 
     wrappedComponent.find('input').simulate('focus');
     expect(simulatedValue()).equal(expectedValue);

lib/autocomplete/theme.module.scss

@@ -1,7 +1,6 @@
 @import '../globals/_theme.scss';
 @import '../globals/animations.module.scss';
 @import '../globals/common.scss';
-
 :local(.autocomplete) {
     @include customScroll();
     width: 16em;
@@ -18,43 +17,43 @@
             border: none;
             border-bottom: 2px solid $input-bottom-border;
             outline: none;
-            &:focus {
-                border-bottom: 2px solid $secondary-input-active-border;
-            }
         }
     }
-
-
     :local(.autocomplete-list) {
         z-index: 1;
         box-sizing: border-box;
         height: fit-content;
         height: -moz-fit-content;
-        text-align: center;
         max-height: 300px;
         width: 100%;
         overflow-y: auto;
         box-shadow: $dropdown-menu-shadow;
         border-radius: 2px;
-        margin-top: 10px;
+        margin-top: 0.2em;
         padding: 2% 0;
         position: absolute;
         background-color: white;
-
         @include sectionEntry(0.25s);
-        
+        :local(.no-results) {
+            display: flex;
+            padding: 2% 5%;
+            box-sizing: border-box;
+            color: rgba(0, 0, 0, 0.5);
+            font-size: 0.8em;
+        }
         :local(.autocomplete-list-item) {
             display: block;
             box-sizing: border-box;
+            text-align: left;
             cursor: pointer;
-            padding: 2% 2%;
+            padding: 5% 4%;
             box-shadow: none;
             &:hover {
-                background-color: $input-active-item;
+                background-color: rgba(160, 198, 255, 0.77);
             }
         }
         :local(.item-hover) {
-            background-color: $input-active-item;
+            background-color: rgba(160, 198, 255, 0.77);
         }
     }
 }
@@ -63,16 +62,16 @@
     &::after {
         content: '';
         display: block;
-        background-color: $primary-input-active-border !important;
+        background-color: rgba(160, 198, 255, 0.77) !important;
         height: 2px;
         @include inputFocus();
         animation-duration: 0.3s;
         animation-timing-function: linear;
         margin-top: -2px;
         position: relative;
         /* Safari only style */
-        @media not all and (min-resolution:.001dpcm) {
-          bottom: 2px;
+        @media not all and (min-resolution: .001dpcm) {
+            bottom: 2px;
         }
     }
 }