CSS

2026-06-06 02:26:49 +00:00 · 2020-02-08 21:50:28 +01:00 · 2020-02-08 21:50:28 +01:00 · df86b94dd6
commit df86b94dd6
parent abd510457c
24 changed files with 9451 additions and 108 deletions
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -8,14 +8,6 @@
    <meta name="description" content="Online Meal Planner | Chef's" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
-    />
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
-
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
@ -33,5 +25,7 @@
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
+    <!-- <script type="text/javascript" src="js/materialize.min.js"></script> -->
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> -->
  </body>
 </html>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/src/components/ContactForm.jsx
+++ b/src/components/ContactForm.jsx
@ -41,7 +41,7 @@ export const ContactForm = ({ onSubmit }) => {
          </div>
          <div className="col s12">
            <ContactFormTextArea id="Message" />
-            <ContactFormSubmit text="Send Message" />
+            <ContactFormSubmit text="Send Message" color="orange darken-2" />
          </div>
        </div>
      </div>
@ -82,10 +82,10 @@ const ContactFormTextArea = ({ id }) => {
  );
 };

-const ContactFormSubmit = ({ text }) => {
+const ContactFormSubmit = ({ text, color }) => {
  return (
    <button
-      className="waves-effect waves-light btn"
+      className={`waves-effect waves-light btn ${color}`}
      type="submit"
      name="submit"
    >
--- a/src/components/CopyrightText.jsx
+++ b/src/components/CopyrightText.jsx
@ -2,7 +2,7 @@ import React from "react";

 export const CopyrightText = () => {
  return (
-    <span>
+    <span className="grey-text text-darken-1">
      © 2020 - <span className="logo">Chef's</span> - Made with{" "}
      <span role="img" aria-label="heart">
        ❤️
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@ -11,10 +11,10 @@ export const Footer = () => {
      <div className="row">
        <div className="container">
          <div className=" s12">
-            <h5 className="white-text">Navigation</h5>
+            <h5 className="black-text">Navigation</h5>
            <ul>
              {links.map((link, i) => (
-                <FooterLink key={i} link={link} textColor="grey" />
+                <FooterLink key={i} link={link} textColor="black" />
              ))}
            </ul>
          </div>
--- a/src/components/GitHubLink.jsx
+++ b/src/components/GitHubLink.jsx
@ -3,7 +3,7 @@ import React from "react";
 export const GitHubLink = () => {
  return (
    <a
-      className="grey-text text-lighten-4 right"
+      className="grey-text text-darken-1 right"
      href="https://github.com/rjNemo/meal_planner"
      target="blank"
      rel="noopener"
--- a/src/components/LogInButton.jsx
+++ b/src/components/LogInButton.jsx
@ -1,13 +1,16 @@
 import React from "react";
 import { useAuth0 } from "../utils/auth0-spa";

-export const LogInButton = () => {
+export const LogInButton = ({ color }) => {
  const { loginWithRedirect } = useAuth0();
  const handleClick = () => {
    loginWithRedirect({});
  };
  return (
-    <button className="waves-effect waves-light btn" onClick={handleClick}>
+    <button
+      className={`waves-effect waves-light btn ${color}`}
+      onClick={handleClick}
+    >
      Log in
    </button>
  );
--- a/src/components/Logo.jsx
+++ b/src/components/Logo.jsx
@ -3,12 +3,17 @@ import { Link } from "react-router-dom";

 export const Logo = () => {
  return (
-    <div>
+    <>
      <Link to="/" className="brand-logo">
-        <span role="img" aria-label="cookie">
-          👩‍🍳 <span className="logo">Chef's</span>
-        </span>
+        <img
+          // className="responsive-img"
+          src="/logo192.png"
+          alt="chef's logo"
+          height="30px"
+          style={{ position: "relative", top: "5px" }}
+        />
+        <span className="logo orange-text text-accent-4">Chef's</span>
      </Link>
-    </div>
+    </>
  );
 };
--- a/src/components/MealPresentation.jsx
+++ b/src/components/MealPresentation.jsx
@ -12,42 +12,32 @@ export const MealPresentation = props => {
  return (
    <div className="row">
      <div className="col s12">
-        <div className="card teal darken-1">
-          <div className="card-content white-text">
+        <div className="card orange lighten-1">
+          <div className="card-content black-text">
            <span className="card-title">{mealName}</span>
            <img className="responsive-img" src={imgAddress} alt={mealName} />
            <ul>
              <li>
+                <div className="chip">
+                  <b>Video:</b>
                  <a href={videoAddress} target="blank">
-                  See in video
+                    <i className="close material-icons">video_library</i>
                  </a>
-              </li>
-              {/* <video width="" height="" controls autoplay>
-        <source src={videoAddress} type="video/mp4" />
-        Your browser does not support the video tag.
-      </video> */}
-              {/* <iframe
-        title="video"
-        width="560"
-        height="315"
-        src="https://www.youtube.com/embed/wqZzLAPmr9k"
-        frameborder="0"
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen
-      ></iframe> */}
+                </div>
+                {/* </li>

-              <li>
-                <b>Category: </b> {mealCategory} (
+              <li> */}
+                <div className="chip">
+                  <b>Category: </b> {mealCategory}
                  <Link to={`/categories/${mealCategory}`}>
-                  See every {mealCategory} recipes
+                    <i className="close material-icons">call_made</i>
                  </Link>
-                )
-              </li>
-              <li>
+                </div>
+                {/* </li>
+              <li> */}
+                <div className="chip">
                  <b>Origin:</b> {mealArea}
-                {/* <Link to={`/area/${mealArea}`}>
-                  See every {mealArea} recipes
-                </Link> */}
+                </div>
              </li>
            </ul>
          </div>
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@ -19,17 +19,26 @@ export const Navbar = props => {
            <Logo />
            <ul id="nav-mobile" className="right hide-on-med-and-down">
              {links.map((link, i) => (
-                <FooterLink key={i} link={link} />
+                <FooterLink key={i} link={link} textColor="black" />
              ))}
-              {isAuthenticated && <FooterLink link="profile" />}
+              {isAuthenticated && (
+                <FooterLink link="profile" textColor="black" />
+              )}
              <li>
                <RandomButton
                  handleClick={props.handleClick}
                  url={props.buttonUrl}
                  size="small"
+                  color="orange darken-2"
                />
              </li>
-              <li>{!isAuthenticated ? <LogInButton /> : <LogOutButton />}</li>
+              <li>
+                {!isAuthenticated ? (
+                  <LogInButton color="orange lighten-1" />
+                ) : (
+                  <LogOutButton />
+                )}
+              </li>
            </ul>
            <Link
              to="#"
--- a/src/components/RandomButton.jsx
+++ b/src/components/RandomButton.jsx
@ -1,8 +1,8 @@
 import React from "react";
 import { Link } from "react-router-dom";

-export const RandomButton = ({ url, size = "large", handleClick }) => {
-  const classString = `waves-effect waves-light btn-${size}`;
+export const RandomButton = ({ url, size = "large", handleClick, color }) => {
+  const classString = `waves-effect waves-light btn-${size} ${color}`;
  return (
    <Link to={url}>
      <button
--- a/src/components/Recipe.jsx
+++ b/src/components/Recipe.jsx
@ -3,6 +3,7 @@ import React from "react";
 export const Recipe = props => {
  return (
    <div className="recipe">
+      <div className="divider"></div>
      <h3>Instructions</h3>
      <p className="flow-text">{props.recipe}</p>
    </div>
--- a/src/components/SearchBar.jsx
+++ b/src/components/SearchBar.jsx
@ -1,42 +1,58 @@
 import React from "react";
 import { Link } from "react-router-dom";

-export const SearchBar = props => {
+export const SearchBar = ({
+  searchString,
+  setSearchString,
+  setSearchResults,
+  handleChange,
+  onSubmit
+}) => {
+  const clearSearchBar = () => {
+    setSearchString("");
+    setSearchResults({ meals: [] });
+  };
  return (
+    <div className="section">
      <div className="container">
        <div className=" nav-wrapper">
          <div className="row center-align">
            <form>
              <div className="input-field col s10">
                <input
-                className=""
+                  className="validate"
                  id="search"
                  type="search"
                  required
                  name="search"
-                value={props.searchString}
+                  value={searchString}
                  placeholder="Search for a recipe"
-                onChange={props.handleChange}
+                  onChange={handleChange}
                />
                <label className="label-icon" htmlFor="search">
                  <i className="material-icons">search</i>
                </label>
-              <i className="material-icons">close</i>
+                <i className="material-icons" onClick={clearSearchBar}>
+                  close
+                </i>
              </div>
+              <div className="col s2 valign-wrapper">
                <Link to="/search">
                  <button
-                className="btn-floating waves-effect waves-light"
+                    className="btn-floating waves-effect waves-light orange lighten-2"
                    type="submit"
                    name="searchButton"
                    value="Search"
-                onClick={props.onSubmit}
+                    onClick={onSubmit}
                  >
                    <i className="material-icons right">send</i>
                  </button>
                </Link>
+              </div>
            </form>
          </div>
        </div>
      </div>
+    </div>
  );
 };
--- a/src/components/SideNav.jsx
+++ b/src/components/SideNav.jsx
@ -68,11 +68,16 @@ export const SideNav = props => {
            handleClick={props.handleClick}
            url={props.buttonUrl}
            size="small"
+            color="orange darken-2"
          />
        </li>
        <li>
          <Link to="#">
-            {!isAuthenticated ? <LogInButton /> : <LogOutButton />}
+            {!isAuthenticated ? (
+              <LogInButton color="orange lighten-1" />
+            ) : (
+              <LogOutButton />
+            )}
          </Link>
        </li>

--- a/src/index.css
+++ b/src/index.css
--- a/src/pages/App.jsx
+++ b/src/pages/App.jsx
@ -99,8 +99,10 @@ export const App = () => {
    getData("categories", setCategories);
  };

-  const getSearchResults = () => {
-    getData(searchString, setSearchResults, "search");
+  const getSearchResults = e => {
+    searchString === ""
+      ? e.preventDefault()
+      : getData(searchString, setSearchResults, "search");
  };

  const handleChange = ev => {
@ -150,8 +152,10 @@ export const App = () => {

          <SearchBar
            searchString={searchString}
+            setSearchString={setSearchString}
            handleChange={handleChange}
            onSubmit={getSearchResults}
+            setSearchResults={setSearchResults}
          />
          <SideNav
            showNav={showNav}
--- a/src/pages/CategoryList.jsx
+++ b/src/pages/CategoryList.jsx
@ -11,7 +11,6 @@ export const CategoryListPage = ({ items, getCategories }) => {
  }, []);

  return (
-    <div className="section">
    <div className="container">
      <h1 className="logo">Chef's Categories</h1>
      <ul>
@ -20,6 +19,5 @@ export const CategoryListPage = ({ items, getCategories }) => {
        ))}
      </ul>
    </div>
-    </div>
  );
 };
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@ -8,7 +8,11 @@ export const Home = ({ buttonUrl }) => {
        <div className="row">
          <div className="col s12 m6">
            <h1 className="logo">Chef's Online Cookbook</h1>
-            <RandomButton url={buttonUrl} size="large" />
+            <RandomButton
+              url={buttonUrl}
+              size="large"
+              color="orange darken-2"
+            />
          </div>
          <div className="col s12 m6">
            <img
--- a/src/pages/Meal.jsx
+++ b/src/pages/Meal.jsx
@ -45,10 +45,10 @@ export const Meal = props => {
  return (
    <div className="container">
      <div className="row">
-        <div className="col s12 m6">
+        <div className="col s12 l6">
          <MealPresentation meal={item} />
        </div>
-        <div className="col s12 m6">
+        <div className="col s12 l6">
          <IngredientList ingredients={ingredientList} />
        </div>
      </div>