Style revamp for Inputs

recipes/src/components/Input/index.tsx

@@ -52,15 +52,16 @@ export const ControlledInput = forwardRef<HTMLInputElement, InputProps>(({label,
 type TextareaProps = {
 	[x: string]: any,
 	label?: string,
-	type?: 'text' | 'number' ,
+	rows?: number
 	onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void,
 }
 
-export const Textarea = ({label, type = 'text', ...props }: TextareaProps) => {
+export const Textarea = ({label, type = 'text', rows = 3, ...props }: TextareaProps) => {
 	return (
 		<div className="cbk-light-input">
 			{ label && (<label htmlFor={props.name}>{label}</label>)}
 			<textarea
+				rows={rows}
 				className={props.value ? 'has-value': ''}
 				{...props}
 			/>

recipes/src/components/Input/styles.scss

@@ -64,6 +64,10 @@
 
 .cbk-light-input {
   @include lightInput();
+  label {
+    @include display();
+    text-transform: uppercase;
+  }
 }
 
 .cbk-input-2 {

recipes/src/components/RecipeForm/styles.scss

@@ -2,14 +2,6 @@
 
 .cbk-recipe-form {
   width: 100%;
-  
-  input {
-    width: 100%;
-    border: 0;
-    padding: 4px 0;
-    border-bottom: 1px solid #ccc;
-    background-color: transparent;
-  }
 
   .subrecipe-tabs {
     ul.tab-header {

recipes/src/styles/_ui.scss

@@ -18,10 +18,11 @@ $phone: "(max-width: 839px)";
 
   input,
   textarea {
+    font-family: monospace;
     width: 100%;
     border: 0;
     padding: 4px 0;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid #000;
     background-color: transparent;
     resize: vertical;
   }
@@ -43,19 +44,20 @@ $phone: "(max-width: 839px)";
     bottom: 0px;
     left: 0;
     width: 0;
-    height: 1px;
+    height: 2px;
   
     -webkit-transition: all 0.4s;
     -o-transition: all 0.4s;
     -moz-transition: all 0.4s;
     transition: all 0.4s;
   
-    background: #7f7f7f;
+    background: #000;
   }
   
   input:focus + span::before,
   textarea:focus + span::before {
     width: 100%;
+    box-shadow: 2px 2px 0 1px #eec71a;
   }
   
   input.has-value + span::before,