Create and Use new Input component

recipes/src/components/Input/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { InputHTMLAttributes } from 'react';
 import TextField, { HelperText, Input as Field } from '@material/react-text-field';
 import classNames from 'classnames';
 import Button from 'components/Button';
@@ -90,6 +90,15 @@ const Input = ({
 		</div>
 )};
 
+export const Input2: React.FunctionComponent<InputHTMLAttributes<{}>> = (props) => (
+	<div className='cbk-input-2'>
+		<input
+			{...props}
+		/>
+		<span></span>
+	</div>
+)
+
 interface LightInputProps extends FieldProps {
 	label?: string,
 	type?: 'textarea' | 'text' | 'number',

recipes/src/components/Input/styles.scss

@@ -64,4 +64,17 @@
 
 .cbk-light-input {
   @include lightInput();
+}
+
+.cbk-input-2 {
+  @include lightInput();
+  margin-bottom: 0px;
+  display: flex;
+  flex-direction: column;
+  input {
+    padding: 0 8px;
+    width: auto;
+    @include display();
+    
+  }
 }

recipes/src/components/RecipeSearch/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DBRecipe } from 'types/recipes';
 
-import Input from 'components/Input';
+import { Input2 as Input} from 'components/Input';
 import List from 'components/List';
 
 import { getRecipes } from 'containers/Recipes/services';
@@ -102,8 +102,8 @@ class RecipeSearch extends React.Component<Props, State> {
     const { results, search, cursor, openResult } = this.state;
     return (
     <div className='cbk-recipe-search'>
-      <Input 
-        label=''
+      <Input
+        className='cbk-recipe-search__input'
         value={search}
         onChange={this.changeQuery}
         onKeyDown={this.onKeyDown}