Improve IngredientList header styles

recipes/src/components/IngredientForm/index.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import Input from 'components/Input';
 import Select from 'components/Select';
-import List, {ListItem, ListItemText} from '@material/react-list';
 import TabBar from 'components/TabBar';
 
-import IRecipe, { ISubRecipe, IAuthor, IDetails, _recipe, _subRecipe, _ingredient, IIngredient, ISuggestion } from 'types/recipes';
+import { ISubRecipe, _recipe, _subRecipe, _ingredient } from 'types/recipes';
 
-import '@material/react-list/dist/list.min.css';
 import './styles.scss';
-import MaterialIcon from '@material/react-material-icon';
 
 type IngredientFormProps = {
   components: ISubRecipe[],
@@ -29,15 +26,6 @@ class IngredientForm extends React.Component<IngredientFormProps, { activeGroup:
 
   handleActiveIndexUpdate = (activeGroup: number) => this.setState({ activeGroup })
 
-  changeTabName = (event: any) => {
-    console.log('change', event);
-  }
-
-  addTag = () => {
-    this.setState({
-
-    })
-  }
   render() {
     const {updateField, components, addSubrecipe, updateSubrecipeName, removeSubrecipe} = this.props;
     const {activeGroup} = this.state;
@@ -56,11 +44,11 @@ class IngredientForm extends React.Component<IngredientFormProps, { activeGroup:
         </div>
         <div className='cbk-ingredients-component'>
           <div className='cbk-ingredients-component-header'>
-            <div>Ingredient Name</div>
-            <div>Quantity</div>
-            <div>Unit</div>
-            <div>Notes</div>
-            <div>Original</div>
+            <span>Ingredient Name</span>
+            <span>Quantity</span>
+            <span>Unit</span>
+            <span>Notes</span>
+            <span>Original</span>
           </div>
           {
             components[activeGroup].ingredients.map((ingredient, index) => (

recipes/src/components/IngredientForm/styles.scss

@@ -8,9 +8,11 @@
   .cbk-ingredients-component {
     &-header {
       display: flex;
+      padding: $spacing-small;
       & > * {
         flex: 1;
         align-self: center;
+        @include button();
       }
     }
     &-item {

recipes/src/components/TabBar/styles.scss

@@ -23,12 +23,7 @@
     }
 
     &__content {
-      font-size: 0.875rem;
-      line-height: 2.25rem;
-      font-weight: 500;
-      letter-spacing: 0.08929em;
-      text-decoration: none;
-      text-transform: uppercase;
+      @include button();
       flex-basis: 95%;
 
       .cbk-input input {

recipes/src/styles/_fonts.scss

@@ -14,4 +14,13 @@ $font-size-large: 16px;
 $font-size-x-large: 20px;
 $font-size-xx-large: 24px;
 $font-size-xxx-large: 32px;
-$font-size-xxxx-large: 34px;
+$font-size-xxxx-large: 34px;
+
+@mixin button() {
+  font-size: 0.875rem;
+  line-height: 2.25rem;
+  font-weight: 500;
+  letter-spacing: 0.1px;
+  text-decoration: none;
+  text-transform: uppercase;
+}