Give RecipeSearch component some design and styles

recipes/src/components/RecipeSearch/index.tsx

@@ -109,9 +109,9 @@ class RecipeSearch extends React.Component<Props, State> {
         onKeyDown={this.onKeyDown}
         onBlur={this.closeResults}
       />
-      <div className='cbk-recipe-search__results'>
         {
           results.length && openResult ? (
+          <div className='cbk-recipe-search__results'>
             <List
               dense
               items={results}
@@ -125,10 +125,11 @@ class RecipeSearch extends React.Component<Props, State> {
                 </div>
               )}
             />
+            </div>
           ) : null
         }
-      </div>
-    </div>)
+    </div>
+    )
   }    
 }
 

recipes/src/components/RecipeSearch/styles.scss

@@ -1,15 +1,33 @@
+@import 'styles/_variables.scss';
+
 .cbk-recipe-search {
   width: 100%;
   position: relative;
+
   &__results {
     display: block;
     width: 100%;
     position: absolute;
     z-index: 10000;
     background-color: white;
+    @include solidBoxShadow();
     .cbk-list {
-      max-height: 20rem;
-      overflow-y: scroll;
+      max-height: 21rem;
+      overflow: hidden;
+      padding: 0;
+      .cbk-list__item--focus,
+      .cbk-list__item:hover
+       {
+         cursor: pointer;
+        background-color: $yellow;
+      }
+    }
+    &__item {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
     }
   }
 }

recipes/src/containers/Planner/styles.scss

@@ -8,6 +8,7 @@
       min-height: 16rem;
       .week {
         display: flex;
+        flex-basis: 100%;
         .day,
         .meal {
           flex: 1;
@@ -33,6 +34,7 @@
             background-color: white;
             box-sizing: border-box;
             margin: 0.5px;
+            padding: 0 $spacing-small/2;
             h5 {
               text-align: center;
               overflow: hidden;
@@ -47,6 +49,9 @@
                 align-self: flex-end;
               }
             }
+            .cbk-recipe-search {
+              width: auto;
+            }
           }
         }
         .meal {

recipes/src/styles/_ui.scss

@@ -62,4 +62,9 @@ $phone: "(max-width: 839px)";
   textarea.has-value + span::before {
     width: 100%;
   }
+}
+
+@mixin solidBoxShadow() {
+  border: 1px solid #000;
+  box-shadow: 3px 3px 0 0 #000;
 }