Improve responsive styles

recipes/src/components/RecipeCard/styles.scss

@@ -6,8 +6,6 @@
   
   &__primary {
     display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
     justify-content: space-between;
 
     &__image.mdc-card__media {
@@ -67,4 +65,14 @@
       }
     }
   }
+
+  @media #{$phone} {
+    padding: $spacing-small;
+    .cbk-recipe-card__primary {
+      flex-direction: column;
+    }
+    .cbk-recipe-card__primary__title {
+      padding: $spacing-regular 0;
+    }
+  }
 }

recipes/src/containers/Recipes/List/index.tsx

@@ -44,9 +44,10 @@ class RecipeList extends Component<RecipeListProps, {phoneDisplay: boolean}> {
 
   handleRecipeSelection(recipe: Recipe) {
     return (event: React.MouseEvent) => {
-      this.props.selectRecipe(recipe) 
       if (this.state.phoneDisplay) {
         this.props.history.push('/recipes/view/' + recipe._id)
+      } else {
+        this.props.selectRecipe(recipe) 
       }
     };
   }

recipes/src/containers/Recipes/View/index.tsx

@@ -3,24 +3,41 @@ import { getRecipeById } from './../services';
 import { RouteComponentProps } from 'react-router';
 
 import RecipeCard from 'components/RecipeCard';
-import { _recipe } from 'types/recipes';
+import Recipe, { _recipe } from 'types/recipes';
 
 interface ViewRecipeProps extends RouteComponentProps<{id: string}>{
 
 }
 
-const ViewRecipe = (props: ViewRecipeProps) => {
-  const [ recipe, setRecipe ] = useState({..._recipe});
+class ViewRecipe extends React.Component<ViewRecipeProps, {recipe: Recipe}> {
+  constructor(props: ViewRecipeProps) {
+    super(props);
+    this.state = {
+      recipe: { ..._recipe }
+    }
+  }
 
-  useEffect(() => {
-    getRecipeById(props.match.params.id).then(recipe => setRecipe(recipe))
-  });
+  componentDidMount() {
+    getRecipeById(this.props.match.params.id).then(
+      recipe => this.setState({ recipe })
+    );
+  }
 
-  return (
-    <div className='cbk-recipe-viewer'>
-      <RecipeCard recipe={recipe}/>
-    </div>
-  )
+  render() {
+    return (
+      <div className='cbk-recipe-viewer'>
+        <RecipeCard recipe={this.state.recipe}/>
+      </div>
+    );
+  }
 }
+// const ViewRecipe = (props: ViewRecipeProps) => {
+//   const [ recipe, setRecipe ] = useState({..._recipe});
+//   return (
+//     <div className='cbk-recipe-viewer'>
+//       <RecipeCard recipe={recipe}/>
+//     </div>
+//   )
+// }
 
 export default ViewRecipe;

recipes/src/styles/_fonts.scss

@@ -7,14 +7,14 @@ $font-weight-light: 300;
 $font-weight-regular: 400;
 $font-weight-bold: 600;
 
-$font-size-x-small: 10px;
-$font-size-small: 12px;
-$font-size-regular: 14px;
-$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-x-small: 0.625rem;
+$font-size-small: 0.75rem;
+$font-size-regular: 0.875rem;
+$font-size-large: 1rem;
+$font-size-x-large: 1.25rem;
+$font-size-xx-large: 1.5rem;
+$font-size-xxx-large: 2rem;
+$font-size-xxxx-large: 2.125rem;
 
 @mixin button() {
   font-size: 0.875rem;

recipes/src/styles/_ui.scss

@@ -1,4 +1,5 @@
 $box-shadow: 0 2px 2px 0 rgba(0,0,0,.16), 0 0 2px 0 rgba(0,0,0,.12);
+$phone: "(max-width: 839px)";
 
 @mixin button-reset {
   border: none;

recipes/src/styles/app.scss

@@ -125,6 +125,9 @@ textarea
   
   #root {
     flex-direction: column;
+    display: flex;
+    flex-wrap: unset;
+
     .cbk-app-drawer {
       flex-basis: unset;
 
@@ -133,13 +136,7 @@ textarea
         flex-direction: row;
         padding: 1rem;
         h1.mdc-drawer__title {
-          margin: 0;
-          padding: 0;
-
-          &:after,
-          &:before {
-            display: none;
-          }
+          display: none;
         }
         .mdc-drawer__header,
         .mdc-list {
@@ -147,13 +144,17 @@ textarea
           padding: 0;
           display: flex;
           flex-direction: row;
+          font-size: $font-size-small;
           .mdc-list-item {
             margin: 0;
+            a {
+              font-size: $font-size-regular;
+            }
           }
         }
 
         .cbk-icon svg {
-          width: 45px!important;
+          width: 35px!important;
         }
       }
     }