logo font, meal page new style

package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.9.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#ee6e73" />
     <meta name="description" content="Chef's | Meal Planner" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

src/components/CardEntry.js

@@ -8,7 +8,7 @@ export const CardEntry = props => {
       <li>
         <div className="row">
           <div className="col s12 m6">
-            <div className="card ">
+            <div className="card hoverable">
               <div className="card-image">
                 <img src={strMealThumb} alt={strMeal} />
               </div>

src/components/CategoryEntry.js

@@ -12,18 +12,22 @@ const CategoryEntry = props => {
 
   return (
     // <CardEntry item={meal} />
-    <Link to={`${url}${strCategory}`}>
+    <Link to={`${url}/${strCategory}`}>
       <li>
         <div className="row">
           <div className="col s12">
-            <div className="card horizontal">
+            <div className="card horizontal hoverable">
-              <div className="card-image">
+              <div className="card-image valign-wrapper">
-                <img src={strCategoryThumb} alt={strCategory} />
+                <img
+                  className="responsive-img"
+                  src={strCategoryThumb}
+                  alt={strCategory}
+                />
                 {/* <span className="card-title red-text">{strCategory}</span> */}
               </div>
               <div className="card-stacked">
                 <div className="card-content black-text">
-                  <h4>{strCategory}</h4>
+                  <h4 className="logo">{strCategory}</h4>
                   <p>{strCategoryDescription}</p>
                 </div>
               </div>

src/components/CopyrightText.js

@@ -3,7 +3,7 @@ import React from "react";
 export const CopyrightText = () => {
   return (
     <span>
-      © 2020 - Chef's - Made with{" "}
+      © 2020 - <span className="logo">Chef's</span> - Made with{" "}
       <span role="img" aria-label="heart">
         ❤️
       </span>

src/components/IngredientList.js

@@ -4,14 +4,22 @@ export const IngredientList = props => {
   const { ingredients } = props;
   return (
     <div className="ingredientList">
-      <h3>Ingredients</h3>
+      <table className="striped highlight responsive-table">
-      <ul>
+        <thead>
-        {ingredients.map((ing, i) => (
+          <tr>
-          <li key={i}>
+            <th>Ingredient</th>
-            <b>{ing[0]}:</b> {ing[1]}
+            <th>Quantity</th>
-          </li>
+          </tr>
-        ))}
+        </thead>
-      </ul>
+        <tbody>
+          {ingredients.map((ing, i) => (
+            <tr key={i}>
+              <td>{ing[0]}</td>
+              <td>{ing[1]}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   );
 };

src/components/Logo.js

@@ -3,10 +3,10 @@ import { Link } from "react-router-dom";
 
 export const Logo = () => {
   return (
-    <div className="logo">
+    <div>
       <Link to="/" className="brand-logo">
         <span role="img" aria-label="cookie">
-          👩‍🍳 Chef's
+          👩‍🍳 <span className="logo">Chef's</span>
         </span>
       </Link>
     </div>

src/components/Recipe.js

@@ -4,7 +4,7 @@ export const Recipe = props => {
   return (
     <div className="recipe">
       <h3>Instructions</h3>
-      <div dangerouslySetInnerHTML={{ __html: props.recipe }} />
+      <p className="flow-text">{props.recipe}</p>
     </div>
   );
 };

src/components/SearchBar.js

@@ -16,7 +16,7 @@ export const SearchBar = props => {
           />
           <Link to="/search">
             <button
-              className="btn-floating waves-effect waves-light  right  "
+              className="btn-floating waves-effect waves-light"
               type="submit"
               name="searchButton"
               value="Search"

src/index.css

@@ -8,6 +8,7 @@ body {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
+  /* background-color: #fafafa; */
 }
 
 div {
@@ -21,4 +22,5 @@ div {
 
 .logo {
   font-family: "Marck Script", cursive;
+  text-decoration: underline;
 }

src/pages/Category.js

@@ -16,7 +16,7 @@ export const CategoryPage = props => {
 
   return (
     <div className="container">
-      <h1>Chef's {strCategory} Recipes</h1>
+      <h1 className="logo">Chef's {strCategory} Recipes</h1>
       {meals.meals === null ? (
         <Redirect to="/404" />
       ) : (
@@ -27,7 +27,7 @@ export const CategoryPage = props => {
               <Link to={`/${meal.idMeal}`}>
                 <div className="row">
                   <div className="col s12 m6">
-                    <div className="card ">
+                    <div className="card hoverable">
                       <div className="card-image">
                         <img src={meal.strMealThumb} alt={meal.strMeal} />
                       </div>

src/pages/CategoryList.js

@@ -12,7 +12,7 @@ export const CategoryListPage = props => {
   return (
     <div className="section">
       <div className="container">
-        <h1>The Chef's Meal Categories</h1>
+        <h1 className="logo">Chef's Categories</h1>
         <ul>
           {categories.map((category, i) => (
             <CategoryEntry key={i} category={category} />

src/pages/Home.js

@@ -7,7 +7,7 @@ export const HomePage = props => {
       <div className="container ">
         <div className="row">
           <div className="col s12 m6">
-            <h1>The Chef's Meal Suggestions</h1>
+            <h1 className="logo">Chef's Online Cookbook</h1>
             <RandomButton url={props.buttonUrl} size="large" />
           </div>
           <div className="col s12 m6">

src/pages/Meal.js

@@ -50,9 +50,9 @@ export const MealPage = props => {
           </div>
           <div className="col s12 m6">
             <IngredientList ingredients={ingredientList} />
-            <Recipe recipe={strInstructions} />
           </div>
         </div>
+        <Recipe recipe={strInstructions} />
       </div>
     );
   } else {

src/pages/Search.js

@@ -10,7 +10,7 @@ export const SearchPage = props => {
 
   return (
     <div className="container">
-      <h1>Search Results for: {searchString} </h1>
+      <h1 className="logo">Results for: {searchString}</h1>
       {meals[0] === undefined ? (
         <div className="center-align">
           <p>