women-who-software · BrandyMello · May 19, 2020 · May 19, 2020 · May 19, 2020 · May 19, 2020
diff --git a/public/index.html b/public/index.html
@@ -2,15 +2,13 @@
 <html lang="en">
   <head>
     <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="description"
+      name="Recipe search application"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;800&display=swap" rel="stylesheet">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -25,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Tasty Temptations</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Home from "../Home/Home";
 import {
   IoLogoPinterest,
   IoLogoTwitter,
@@ -7,7 +8,6 @@ import {
 import { MdEmail } from 'react-icons/md';
 import { FaFacebookMessenger } from 'react-icons/fa';
 import Logo from '../../assets/plate.opt.svg';
-import './App.scss'
 // import { render } from '@testing-library/react';
 
 class App extends Component {
@@ -18,19 +18,26 @@ class App extends Component {
   render() {
     return (
       <>
-        <header>
-          <img src={Logo} alt=''/>
-          <h1>Recipe Roulette</h1>
+        <header className="header">
+          <img
+            src={Logo}
+            alt="Plate setting image for a logo"
+            className="header__logo"
+          />
+          <h1 className="header-primary">Tasty Temptations</h1>
         </header>
-        <footer>
-          <IoLogoPinterest/>
-          <IoLogoTwitter/>
-          <IoLogoFacebook/>
-          <MdEmail/>
-          <FaFacebookMessenger/>
+        <main>
+          <Home />
+        </main>
+        <footer className="footer">
+          <IoLogoPinterest className="footer__img" />
+          <IoLogoTwitter className="footer__img" />
+          <IoLogoFacebook className="footer__img" />
+          <MdEmail className="footer__img" />
+          <FaFacebookMessenger className="footer__img" />
         </footer>
       </>
-    )
+    );
   }
 }
 

diff --git a/src/components/App/App.scss b/src/components/App/App.scss
diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
@@ -0,0 +1,99 @@
+import React from "react";
+import { IoMdCheckmark } from "react-icons/io";
+
+const Form = () => {
+  return (
+    <form className="search-form">
+      <div className="search-form--specification">
+        <label for="ingredient" className="search-form__label">
+          Ingredient:
+        </label>
+        <input
+          id="ingredient"
+          className="search-form__input"
+          placeholder="eggs, spinach"
+          type="text"
+        />
+        <ul className="search-form--ingredient-list"></ul>
+      </div>
+      <div className="search-form__checkbox--container">
+        <h3 className="search-form__checkbox--instructions">
+          Click to select dietary restrictions:
+        </h3>
+        <div className="search-form__checkboxes">
+          <div className="search-form__checkbox">
+            <input
+              id="gluten-free"
+              className="search-form__checkbox-input"
+              type="checkbox"
+            />
+            <label for="gluten-free" className="search-form__checkbox-label">
+              <span className="search-form__checkbox-btn search-form__checkbox-org"></span>
+              Gluten Free
+            </label>
+          </div>
+          <div className="search-form__checkbox">
+            <input
+              id="dairy-free"
+              className="search-form__checkbox-input"
+              type="checkbox"
+            />
+            <label for="dairy-free" className="search-form__checkbox-label">
+              <span className="search-form__checkbox-btn search-form__checkbox-red"></span>
+              Dairy Free
+            </label>
+          </div>
+          <div className="search-form__checkbox">
+            <input
+              id="pescatarian"
+              className="search-form__checkbox-input"
+              type="checkbox"
+            />
+            <label for="pescatarian" className="search-form__checkbox-label">
+              <span className="search-form__checkbox-btn search-form__checkbox-gry"></span>
+              Pescatarian
+            </label>
+          </div>
+          <div className="search-form__checkbox">
+            <input
+              id="vegetarian"
+              className="search-form__checkbox-input"
+              type="checkbox"
+            />
+            <label for="vegetarian" className="search-form__checkbox-label">
+              <span className="search-form__checkbox-btn search-form__checkbox-org"></span>
+              Vegetarian
+            </label>
+          </div>
+          <div className="search-form__checkbox">
+            <input
+              id="vegan"
+              className="search-form__checkbox-input"
+              type="checkbox"
+            />
+            <label for="vegan" className="search-form__checkbox-label">
+              <span className="search-form__checkbox-btn search-form__checkbox-red"></span>
+              Vegan
+            </label>
+          </div>
+          <div className="search-form__checkbox">
+            <input
+              id="keto"
+              className="search-form__checkbox-input"
+              type="checkbox"
+            />
+            <label for="keto" className="search-form__checkbox-label">
+              <span className="search-form__checkbox-btn search-form__checkbox-gry"></span>
+              Keto
+            </label>
+          </div>
+        </div>
+        <button className="search-form__button">Submit</button>
+
+        {/* <div className="search-form__button--container"></div> */}
+      </div>
+    </form>
+  );
+};
+
+export default Form;
diff --git a/src/components/Form/Form.test.js b/src/components/Form/Form.test.js
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -0,0 +1,12 @@
+import React from "react";
+import Form from "../Form/Form";
+
+const Home = () => {
+  return (
+    <section className="home">
+      <Form />
+    </section>
+  );
+};
+
+export default Home;
diff --git a/src/components/Home/Home.test.js b/src/components/Home/Home.test.js
diff --git a/src/index.scss b/src/index.scss
@@ -1,12 +1 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: 'Raleway', sans-serif;
-}
+@import "sass/main.scss";
diff --git a/src/sass/abstracts/_functions.scss b/src/sass/abstracts/_functions.scss
diff --git a/src/sass/abstracts/_mixins.scss b/src/sass/abstracts/_mixins.scss
diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss
@@ -0,0 +1,14 @@
+$base-red: #de041f;
+$base-orange: rgb(231, 58, 35);
+
+$black-accent: #000;
+$base-gray: #412e2869;
+$mid-gray: #C0B2B5;
+$lightest-gray: #F0EFEA;
+
+$heading-bottom-margin: 1rem;
+$heading-bottom-margin-med: 4rem;
+$heading-bottom-margin-big: 6rem;
+
+$letter-spacing-wide: .5rem;
+$letter-spacing-mild: .2rem;
diff --git a/src/sass/base/_animations.scss b/src/sass/base/_animations.scss
diff --git a/src/sass/base/_base.scss b/src/sass/base/_base.scss
@@ -0,0 +1,15 @@
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  box-sizing: border-box;
+}
diff --git a/src/sass/base/_typography.scss b/src/sass/base/_typography.scss
@@ -0,0 +1,14 @@
+.header-primary {
+  color: $base-red;
+  font-weight: 600;
+  font-size: 6.8rem;
+  // letter-spacing: $letter-spacing-wide;
+}
+
+body {
+  color: $black-accent;
+  font-weight: 400;
+  font-family: 'Raleway', sans-serif;
+  font-size: 3.6rem;
+  line-height: 1.7;
+}
diff --git a/src/sass/components/_footer.scss b/src/sass/components/_footer.scss
@@ -0,0 +1,12 @@
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding: 3rem;
+
+  &__img {
+    height: 3rem;
+    width: auto;
+    padding: 0 1rem;
+  }
+}
diff --git a/src/sass/components/_form.scss b/src/sass/components/_form.scss
@@ -0,0 +1,102 @@
+.search-form {
+  margin: 2% 5%;
+  font-size: 1.8rem;
+  width: 49%;
+
+  &--specification {
+    display: flex;
+    align-items: center;
+    margin-bottom: $heading-bottom-margin-med; //may need to change as li are added
+  }
+
+  &__label {
+    letter-spacing: $letter-spacing-wide;
+    font-size: 2.1rem;
+    font-weight: 600;
+  }
+
+  &__input {
+    background-color: $lightest-gray;
+    border: none;
+    cursor: pointer;
+    font-family: inherit;
+    color: $base-gray;
+    height: 3rem;
+    letter-spacing: $letter-spacing-mild;
+    padding-left: 1rem;
+    width: 25rem;
+  }
+
+  &__checkboxes {
+    margin-left: 10%;
+  }
+
+  &__checkbox {
+    margin-bottom: $heading-bottom-margin;
+
+    &--instructions {
+      font-size: 2.1rem;
+      font-weight: 400;
+      margin-bottom: $heading-bottom-margin;
+    }
+
+    &-label {
+      margin-left: 1.8rem;
+      letter-spacing: $letter-spacing-mild;
+      cursor: pointer;
+      position: relative;
+    }
+
+    &-org {
+      background-color: $base-orange;
+    }
+
+    &-red {
+      background-color: $base-red;
+    }
+
+    &-gry {
+      background-color: $mid-gray;
+    }
+
+    &-btn {
+      height: 2.6rem;
+      width: 2.6rem;
+      border-radius: 50%;
+      display: inline-block;
+      position: absolute;
+      left: -3.9rem;
+      top: -8%;
+      margin-bottom: .2rem;
+
+      &::after {
+        content: "";
+        display: block;
+        height: 1.3rem;
+        width: 1.3rem;
+        clip-path: polygon(31% 71%, 84% 2%, 100% 14%, 32% 100%, 0 63%, 13% 51%);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: $black-accent;
+        opacity: 0;
+        transition: opacity .25s;
+      }
+    }
+  }
+
+  &__checkbox-input:checked~&__checkbox-label &__checkbox-btn::after {
+    opacity: 1;
+  }
+
+  &__button {
+    height: 3rem;
+    width: 11rem;
+    background-color: $black-accent;
+    color: $lightest-gray;
+    border-radius: 3rem;
+    font-size: 1.8rem;
+    margin: 1rem 10%;
+  }
+}