From a72903ffa01b2ac60b04f24e2aba02945c52faf9 Mon Sep 17 00:00:00 2001
From: Maddy <polakowska.mag@gmail.com>
Date: Wed, 23 Feb 2022 12:28:25 +0100
Subject: [PATCH] Open Props styling

---
 lesson-04/remix-site/app/db/db.json           |  12 ++
 lesson-04/remix-site/app/routes/recipes.jsx   |   2 +
 .../app/routes/recipes/$recipeId.jsx          |  42 ++--
 .../remix-site/app/routes/recipes/index.jsx   |  16 +-
 .../remix-site/app/routes/recipes/new.jsx     |  12 +-
 lesson-04/remix-site/app/styles/Home.css      |   0
 lesson-04/remix-site/app/styles/NewRecipe.css |  35 +++
 lesson-04/remix-site/app/styles/Recipe.css    |  39 ++++
 lesson-04/remix-site/app/styles/Recipes.css   |  37 ++++
 lesson-04/remix-site/app/styles/global.css    | 203 ++----------------
 10 files changed, 195 insertions(+), 203 deletions(-)
 create mode 100644 lesson-04/remix-site/app/styles/Home.css
 create mode 100644 lesson-04/remix-site/app/styles/NewRecipe.css
 create mode 100644 lesson-04/remix-site/app/styles/Recipe.css
 create mode 100644 lesson-04/remix-site/app/styles/Recipes.css

diff --git a/lesson-04/remix-site/app/db/db.json b/lesson-04/remix-site/app/db/db.json
index 5005083d..f203094c 100644
--- a/lesson-04/remix-site/app/db/db.json
+++ b/lesson-04/remix-site/app/db/db.json
@@ -74,6 +74,18 @@
       ],
       "author": "Magda",
       "img": "https://www.kwestiasmaku.com/sites/v123.kwestiasmaku.com/files/curry_ramen_01.jpg"
+    },
+    {
+      "id": "17f2653bdd0",
+      "title": "Sandwich",
+      "body": "This is a sandwich hihihihiihihi",
+      "seperatedIngredients": [
+        "bread",
+        " lettuce",
+        " cheese"
+      ],
+      "author": "Kasia",
+      "img": "https://assets.epicurious.com/photos/5d3770225c5cb8000935d1db/6:4/w_3272,h_2181,c_limit/crispy-green-goddess-sandwich-recipe-BA-071119.jpg"
     }
   ]
 }
\ No newline at end of file
diff --git a/lesson-04/remix-site/app/routes/recipes.jsx b/lesson-04/remix-site/app/routes/recipes.jsx
index b22e0acd..1ce93980 100644
--- a/lesson-04/remix-site/app/routes/recipes.jsx
+++ b/lesson-04/remix-site/app/routes/recipes.jsx
@@ -1,5 +1,7 @@
 import { Outlet } from "remix";
 
+
+
 export default function Recipes() {
   return (
     <>
diff --git a/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx b/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx
index ebc06a1b..caf8c02a 100644
--- a/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx
+++ b/lesson-04/remix-site/app/routes/recipes/$recipeId.jsx
@@ -1,6 +1,7 @@
 import { Link, redirect } from "remix";
 import { useLoaderData } from "remix";
 import db from "~/db/db.server";
+import RecipeStylesUrl from "~/styles/Recipe.css";
 
 export const loader = async function ({ params }) {
   const recipe = db.data.recipes.find((p) => p.id === params.recipeId);
@@ -22,6 +23,15 @@ export const action = async function ({ request, params }) {
   }
 };
 
+export function links() {
+  return [
+    {
+      rel: "stylesheet",
+      href: RecipeStylesUrl,
+    },
+  ];
+}
+
 export default function Recipe() {
   const { recipe } = useLoaderData();
 
@@ -33,20 +43,24 @@ export default function Recipe() {
           Back
         </Link>
       </div>
-      <img src={recipe.img} style={{width:"100%", height:"200px", objectFit:"cover"}} ></img>
-      <h2>Description</h2>
-      <p className="page-content">{recipe.body}</p>
-      <h2>Ingredients</h2>
-      <ul className="page-content">
-        {recipe.seperatedIngredients.map((ingredient) => {
-            return (
-              <li>
-                {ingredient}
-              </li>
-          )
-        })}</ul>
-        <h2>Author</h2>
-        <p className="page-content">{recipe.author}</p>
+      <div className="recipe-content">
+        <img src={recipe.img} ></img>
+        <div className="recipe-info">
+          <h2>Description</h2>
+          <p className="page-content">{recipe.body}</p>
+          <h2>Ingredients</h2>
+          <ul className="page-content">
+            {recipe.seperatedIngredients.map((ingredient) => {
+                return (
+                  <li>
+                    {ingredient}
+                  </li>
+              )
+            })}</ul>
+            <h2>Author</h2>
+            <p className="page-content">{recipe.author}</p>
+        </div>
+        </div>
       <div className="page-footer">
         <form method="post">
           <input type="hidden" name="_method" value="delete" />
diff --git a/lesson-04/remix-site/app/routes/recipes/index.jsx b/lesson-04/remix-site/app/routes/recipes/index.jsx
index c317f4ae..d052de55 100644
--- a/lesson-04/remix-site/app/routes/recipes/index.jsx
+++ b/lesson-04/remix-site/app/routes/recipes/index.jsx
@@ -1,10 +1,20 @@
 import { Link, useLoaderData } from "remix";
 import db from "~/db/db.server.js";
+import RecipesStylesUrl from "~/styles/Recipes.css";
 
 export async function loader() {
   return db.data.recipes;
 }
 
+export function links() {
+  return [
+    {
+      rel: "stylesheet",
+      href: RecipesStylesUrl,
+    },
+  ];
+}
+
 export default function PostItems() {
   const recipes = useLoaderData();
 
@@ -16,12 +26,12 @@ export default function PostItems() {
           New recipe
         </Link>
       </div>
-      <ul className="posts-list">
+      <ul className="recipe-list">
         {recipes.map((recipe) => (
-          <li key={recipe.id}>
+          <li className="recipe-item" key={recipe.id}>
             <Link to={recipe.id}>
               <h3>{recipe.title}</h3>
-              <img src={recipe.img} style={{width:"100%", height:"200px", objectFit:"cover", borderRadius:"8px"}} ></img>
+              <img className="img" src={recipe.img} style={{width:"100%", height:"200px", objectFit:"cover", borderRadius:"px"}} ></img>
               <p className="page-content">Author: {recipe.author}</p>
             </Link>
           </li>
diff --git a/lesson-04/remix-site/app/routes/recipes/new.jsx b/lesson-04/remix-site/app/routes/recipes/new.jsx
index 9579caa4..f22e9e99 100644
--- a/lesson-04/remix-site/app/routes/recipes/new.jsx
+++ b/lesson-04/remix-site/app/routes/recipes/new.jsx
@@ -1,5 +1,15 @@
 import { Link, redirect } from "remix";
 import db from "~/db/db.server";
+import NewRecipeStylesUrl from "~/styles/NewRecipe.css";
+
+export function links() {
+  return [
+    {
+      rel: "stylesheet",
+      href: NewRecipeStylesUrl,
+    },
+  ];
+}
 
 export const action = async ({ request }) => {
   const form = await request.formData();
@@ -47,7 +57,7 @@ export default function NewRecipe() {
             <label htmlFor="img">Picture URL</label>
             <input type="text" name="img" id="img" />
           </div>
-          <button className="btn btn-block" type="submit">
+          <button className=" btn btn-block" type="submit">
             Add Recipe
           </button>
         </form>
diff --git a/lesson-04/remix-site/app/styles/Home.css b/lesson-04/remix-site/app/styles/Home.css
new file mode 100644
index 00000000..e69de29b
diff --git a/lesson-04/remix-site/app/styles/NewRecipe.css b/lesson-04/remix-site/app/styles/NewRecipe.css
new file mode 100644
index 00000000..457cb5d4
--- /dev/null
+++ b/lesson-04/remix-site/app/styles/NewRecipe.css
@@ -0,0 +1,35 @@
+.page-header{
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+input, textarea {
+    background-color: var(--gray-8);
+    border: none;
+    border-radius: var(--radius-2);
+    padding: var(--size-2);
+    color: var(--gray-0);
+}
+
+input:focus-visible, textarea:focus-visible {
+    outline: 1px solid var(--indigo-7);
+}
+
+.form-control {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--size-4);
+    gap: 4px;
+    width: var(--size-15);
+}
+
+.btn-block {
+    background-color: var(--indigo-7);
+    text-decoration: none;
+    padding: var(--size-2) var(--size-5);
+    color: var(--gray-0);
+    border-radius: var(--radius-round);
+    text-transform: uppercase;
+    height: fit-content;
+    border: none;
+}
\ No newline at end of file
diff --git a/lesson-04/remix-site/app/styles/Recipe.css b/lesson-04/remix-site/app/styles/Recipe.css
new file mode 100644
index 00000000..69d1e522
--- /dev/null
+++ b/lesson-04/remix-site/app/styles/Recipe.css
@@ -0,0 +1,39 @@
+.page-header{
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+img {
+    border-radius: var(--radius-2);
+    height: 400px;
+    width: 700px;
+    object-fit: cover;
+}
+
+.recipe-info {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--gray-8);
+    margin-left: 24px;
+    width: 50%;
+    padding: var(--size-5) var(--size-8);
+    border-radius: var(--radius-2);
+}
+
+.recipe-content {
+    display: flex;
+    flex-direction: row;
+    gap: 32px;
+}
+
+.btn-delete {
+    background-color: var(--red-7);
+    text-decoration: none;
+    padding: var(--size-2) var(--size-5);
+    color: var(--gray-0);
+    border-radius: var(--radius-round);
+    text-transform: uppercase;
+    height: fit-content;
+    border: none;
+    margin: var(--size-6) 0;
+}
\ No newline at end of file
diff --git a/lesson-04/remix-site/app/styles/Recipes.css b/lesson-04/remix-site/app/styles/Recipes.css
new file mode 100644
index 00000000..fd2315a7
--- /dev/null
+++ b/lesson-04/remix-site/app/styles/Recipes.css
@@ -0,0 +1,37 @@
+.btn {
+    background-color: var(--indigo-7);
+    text-decoration: none;
+    padding: var(--size-2) var(--size-5);
+    color: var(--gray-0);
+    border-radius: var(--radius-round);
+    text-transform: uppercase;
+    height: fit-content;
+}
+
+.page-header{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.recipe-item{
+    background-color: var(--gray-8);
+    padding: var(--size-2) var(--size-5);
+    list-style-type: none; 
+    width: 28%;
+    border-radius: var(--radius-2);
+    box-shadow: var(--shadow-3);
+}
+
+.recipe-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 34px;
+    padding: 0 !important;
+}
+
+.img {
+    border-radius: var(--radius-2);
+}
\ No newline at end of file
diff --git a/lesson-04/remix-site/app/styles/global.css b/lesson-04/remix-site/app/styles/global.css
index c0c63d07..4c6da159 100644
--- a/lesson-04/remix-site/app/styles/global.css
+++ b/lesson-04/remix-site/app/styles/global.css
@@ -1,203 +1,36 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
+@import "https://unpkg.com/open-props";
 
 body {
-  font-family: "Poppins", sans-serif;
+  font-family: var(--font-sans);
+  margin: var(--size-6) var(--size-9);
+  background-color: var(--gray-9);
+  color: var(--gray-0);
 }
 
 a {
   text-decoration: none;
-  color: #000;
+  color: var(--gray-0);
 }
 
-ul {
-  list-style: none;
-}
-
-p {
-  margin: 10px 0;
-}
-
-.container {
-  width: 100%;
-  max-width: 960px;
-  margin: auto;
-  padding: 0 30px;
-}
-
-.logo {
-  font-size: x-large;
-  text-transform: uppercase;
-}
-
-.navbar {
+.navbar{
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
   align-items: center;
-  margin-bottom: 30px;
-  background-color: #f4f4f4;
-  padding: 10px 30px;
-  text-transform: uppercase;
-}
-
-.navbar ul {
-  display: flex;
   justify-content: space-between;
-  align-items: center;
 }
 
-.navbar li {
-  margin-left: 20px;
+.nav a {
+  color: var(--gray-4);
 }
 
-.navbar ul li a {
-  color: #000;
+.logo {
   text-transform: uppercase;
-  font-size: 14px;
-  font-weight: bold;
+  color: var(--indigo-4);
+  font-size: var(--font-size-3);
+  font-weight: var(--font-weight-7);
+  font-family: var(--font-mono);
 }
 
-.navbar ul li a:hover {
-  color: #333;
-  border-bottom: 1px solid #333;
-}
-
-.btn {
-  display: inline-block;
-  background: #000;
-  color: #fff;
-  border: none;
-  padding: 10px 20px;
-  margin: 5px;
-  border-radius: 5px;
-  cursor: pointer;
-  text-decoration: none;
-  font-size: 15px;
-  font-family: inherit;
-}
-
-.btn-reverse {
-  background: #fff;
-  color: #000;
-  border-color: #000;
-}
-
-.btn:focus {
-  outline: none;
-}
-
-.btn:active {
-  transform: scale(0.98);
-}
-
-.btn-block {
-  display: block;
-  width: 100%;
-}
-
-.btn-delete {
-  background: darkred;
-  color: #fff;
-  border-color: darkred;
-  font-size: 13px;
-  padding: 5px 10px;
-}
-
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 30px;
-}
-
-.page-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 30px;
-}
-
-.form-control {
-  margin: 20px 0;
-}
-
-.form-control label {
-  display: block;
-}
-
-.form-control input,
-.form-control textarea {
-  width: 100%;
-  height: 40px;
-  margin: 5px;
-  padding: 3px 7px;
-  font-size: 17px;
-}
-
-.form-control textarea {
-  height: 200px;
-}
-
-.form-control-check {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.form-control-check label {
-  flex: 1;
-}
-
-.form-control-check input {
-  flex: 2;
-  height: 20px;
-}
-
-.posts-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 20px;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-.posts-list li {
-  padding: 20px;
-  border: 1px #333 solid;
-  border-radius: 5px;
-}
-
-.posts-list li h3 {
-  margin-bottom: 5px;
-}
-
-.error {
-  color: darkred;
-}
-
-.auth-container {
-  max-width: 600px;
-  margin: auto;
-}
-
-.auth-container h1 {
-  text-align: center;
-}
-
-.auth-container .pageHeader {
-  display: block;
-}
-
-.auth-container fieldset {
-  padding: 15px;
-  border-radius: 5px;
-}
-
-.auth-container fieldset label {
-  margin-right: 10px;
-}
+p, ul{
+  margin: 0;
+}
\ No newline at end of file