From 1798835807bb4df26cdb223f721de08ff83180ff Mon Sep 17 00:00:00 2001
From: d7hernan <83631798+d7hernan@users.noreply.github.com>
Date: Mon, 21 Nov 2022 00:56:54 -0800
Subject: [PATCH] modified css for CreatePage and color palette for homepage

Co-authored-by: rheabhutada02
Co-authored-by: Kara Hoagland
---
 source/CreatePage.html              |  7 +++-
 source/ReviewDetails.html           | 34 ++++++++++-------
 source/assets/scripts/ReviewCard.js | 10 ++---
 source/static/CreatePage.css        | 48 +++++++++++++++++++++---
 source/static/ReviewDetails.css     | 57 +++++++++++++++++++++++------
 source/static/homepage.css          | 33 +++++++++++++++--
 6 files changed, 150 insertions(+), 39 deletions(-)
diff --git a/source/CreatePage.html b/source/CreatePage.html
index cb05872..fe4b09f 100644
--- a/source/CreatePage.html
+++ b/source/CreatePage.html
@@ -41,6 +41,7 @@
 				<input type="file" accept="image/*" id="mealImg" name="mealImg">
 				</label>
 				<label for="image-alt">
+				<br>
 				Alt Text:
 				<input type="text" id="imgAlt" name="imgAlt">
 				</label>
@@ -50,7 +51,9 @@
 				<label for="Meal: ">Meal:
 				<input type="text" id="mealName" name="mealName" required>
 				</label>
-				<label for="comments">Comments:
+				<label for="comments"> 
+					<br>
+					Comments:
 				<br>
 				<textarea name="comments" id="comments"></textarea>
 				</label>
@@ -73,8 +76,10 @@
 				<label for="tag-form">
 				Tags:
 				<input type="text" id="tag-form" name="tag-form">
+
 				<div class='tag-container' id="tag-container-form">
 				</div>
+
 				<button type="button" id="tag-add-btn">Add Tag</button>
 			</label>
 
diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html
index 6a27560..8edf06b 100644
--- a/source/ReviewDetails.html
+++ b/source/ReviewDetails.html
@@ -6,20 +6,28 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Food Journal</title>
 
-  <!-- Recipe Card Custom Element -->
-  <script src="assets/scripts/ReviewCard.js" type="module"></script>
+    <!-- Recipe Card Custom Element -->
+    <script src="assets/scripts/ReviewCard.js" type="module"></script>
   
-  <!-- Main Stylesheets & Scripts --> 
-  <!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
-  <!-- <link rel="stylesheet" href="/static/reset.css" /> -->
-  <link rel="stylesheet" href="./static/ReviewDetails.css" />
-  <script src="assets/scripts/ReviewDetails.js" type="module"></script>
-
-		</div>
+    <!-- Main Stylesheets & Scripts --> 
+    <!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
+    <!-- <link rel="stylesheet" href="/static/reset.css" /> -->
+    <link rel="stylesheet" href="./static/ReviewDetails.css" />
+    <script src="assets/scripts/ReviewDetails.js" type="module"></script>
+  </head>
+  <body>
+    <header>
+			<div class="top-bar">
+				<img src ="./assets/images/icons/Logo.png" alt="logo" />
+				<h1> Food Journal </h1>
+				<img src ="./assets/images/icons/Logo.png" alt="logo" />
+			</div>
+		</header>
 
 		<!--- meal -->
 		<div class = "meal-name">
-			<h1 id="d-mealName"> Cucumber Salad </h1>
+			<h1 id="d-mealName"> Salad (default name) </h1>
+      		<h1 id="d-restaurant"> Salad Inc. (default name) </h1>
 		</div> 
 			
 		<div class = "meal-pics-and-tags">
@@ -28,13 +36,13 @@
 			alt = "photo" width=40% height=40% id="d-mealImg">
 
 			<div class = "tag-container", id="d-tags">
-			
+
 			</div>
 		</div>
 
 		<div class = "stars-and-comments">
 			<img src = "./assets/images/icons/5-star.svg" width=10% height=10% id="d-rating">
-			<p id = "d-comments"> The food was good </p>
+			<p id = "d-comments"> Default comment </p>
 		</div>
 
 		<main>
@@ -43,7 +51,7 @@
 			<button type="button" id="delete-btn" class="danger">Delete</button>
 		</main>
 
-		<div class = journal-form id="update-form-div">
+		<div class = "journal-form" id="update-form-div">
 			<form id="update-food-entry">
 			<fieldset>
 				<legend>Pic:</legend>
diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js
index 06ae059..372c806 100644
--- a/source/assets/scripts/ReviewCard.js
+++ b/source/assets/scripts/ReviewCard.js
@@ -13,7 +13,7 @@ class ReviewCard extends HTMLElement {
 		let styleEl = document.createElement("style");
 		styleEl.textContent = `
       * {
-        font-family: sans-serif;
+        font-family: Century Gothic;
         margin: 0;
         padding: 0;
       }
@@ -28,7 +28,7 @@ class ReviewCard extends HTMLElement {
     
       article {
         align-items: center;
-        border: 1px solid rgb(223, 225, 229);
+        border: 2px solid rgb(31, 41, 32);
         border-radius: 8px;
         display: grid;
         grid-template-rows: 118px 56px 14px 18px 15px 36px;
@@ -53,9 +53,9 @@ class ReviewCard extends HTMLElement {
       }
     
       article>img {
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
-        height: 118px;
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+        height: 119px;
         object-fit: cover;
         margin-left: -16px;
         width: calc(100% + 32px);
diff --git a/source/static/CreatePage.css b/source/static/CreatePage.css
index b8714da..a386e06 100644
--- a/source/static/CreatePage.css
+++ b/source/static/CreatePage.css
@@ -1,7 +1,13 @@
 /* CreatePage.css */
 
+@font-face {
+    font-family: "testFont";
+    src: url(CoveredByYourGrace-Regular.ttf);
+}
+
 body {
-	background-color: #13323b;
+	background-color: #F8F3F1;
+
 }
 
 h1 {
@@ -21,7 +27,8 @@ h1 {
 	position: relative;
 	top: 2.2cm;
 	font-size: 3cm;
-	color: #eaa9bc;
+	color:#516754;
+    font-family: 'testFont';
 }
 
 .top-bar > form {
@@ -31,12 +38,14 @@ h1 {
 
 .journal-form {
 	font-size: 120%;
+	font-family: 'Century Gothic';
 	width: 50%;
 	display: block;
 	margin: auto;
-	color: #ccb3bb;
-	border: 3px solid rgb(7 0 0);
-	background-color: #b52754;
+	color: #516754;
+	border: 2px solid rgb(31, 41, 32);
+	border-radius: 8px;
+	background-color: #f7dfd5;
 }
 
 .hidden,
@@ -85,3 +94,32 @@ h1 {
 .rating > label:hover ~ input:checked ~ label {
 	color: orangered;
 }
+
+.tag-container {
+	display: flex;
+	flex-flow: row wrap;
+}
+  
+.tag {
+	background-color: grey;
+	border-radius: 7px;
+	color: white;
+	padding-right: 7px;
+	padding-left: 7px;
+	margin: 3px;
+}
+  
+.tag::before {
+	display: inline-block;
+	content: "x";
+	height: 15px;
+	width: 15px;
+	margin-right: 4px;
+	text-align: center;
+	color: white;
+	cursor: pointer;
+}
+  
+.tag:hover::before {
+	color: red;
+}
diff --git a/source/static/ReviewDetails.css b/source/static/ReviewDetails.css
index 916dd60..c67c03c 100644
--- a/source/static/ReviewDetails.css
+++ b/source/static/ReviewDetails.css
@@ -1,7 +1,12 @@
 /* ReviewDetails.css */
 
+@font-face {
+    font-family: "testFont";
+    src: url(CoveredByYourGrace-Regular.ttf);
+}
+
 body {
-	background-color: #13323b;
+	background-color: #F8F3F1;
 }
 
 h1 {
@@ -9,28 +14,29 @@ h1 {
 }
 
 .top-bar {
-	margin-top: -8cm;
+	display: flex;
+	justify-content: center;
 }
 
 .top-bar > img {
 	position: relative;
-	top: 7.85cm;
+	align-self: center;
+	padding-left: 2.5%;
+	padding-right: 2.5%;
 }
 
 .top-bar > h1 {
 	position: relative;
-	top: 2.2cm;
-	font-size: 3cm;
-	color: #eaa9bc;
-}
-
-.top-bar > form {
-	position: relative;
-	left: 32cm;
+	text-align: center;
+	/*color: #e4c3d2;*/
+	color:#516754;
+	font-size: 6rem;
+    font-family: 'testFont';
 }
 
 .journal-form {
 	font-size: 120%;
+	font-family: 'Calibria';
 	width: 50%;
 	display: none;
 	margin: auto;
@@ -94,3 +100,32 @@ h1 {
 .rating > label:hover ~ input:checked ~ label {
 	color: orangered;
 }
+
+.journal-form .tag-container{
+	display: flex;
+	flex-flow: row wrap;
+}
+  
+.journal-form .tag{
+	background-color: grey;
+	border-radius: 7px;
+	color: white;
+	padding-right: 7px;
+	padding-left: 7px;
+	margin: 3px;
+}
+  
+.journal-form .tag::before{
+	display: inline-block;
+	content: "x";
+	height: 15px;
+	width: 15px;
+	margin-right: 4px;
+	text-align: center;
+	color: white;
+	cursor: pointer;
+}
+  
+.journal-form .tag:hover::before{
+	color: red;
+}
\ No newline at end of file
diff --git a/source/static/homepage.css b/source/static/homepage.css
index 7e5567b..bf55a47 100644
--- a/source/static/homepage.css
+++ b/source/static/homepage.css
@@ -1,5 +1,6 @@
 /* homepage.css */
 
+
 @font-face {
     font-family: "testFont";
     src: url(CoveredByYourGrace-Regular.ttf);
@@ -8,7 +9,8 @@
 /* Color*/
 body{
     /*background-color: #97a5bd*/
-    background-color: #E3E3EC;
+    /*background-color: #E3E3EC;*/
+	background-color: #F8F3F1;
 }
 
 .top-bar {
@@ -26,7 +28,9 @@ body{
 .top-bar > h1 {
 	position: relative;
 	text-align: center;
-	color: #e4c3d2;
+	/*color: #e4c3d2;*/
+	/*color: rgb(145, 124, 175);*/
+	color:#516754;
 	font-size: 6rem;
     font-family: 'testFont';
 }
@@ -51,8 +55,10 @@ body{
 #recent-reviews-text {
 	text-align: center;
 	font-size: 4rem;
-	color: #e4c3d2;
-    font-family: 'testFont'
+	/* color: #e4c3d2; */
+	/*color: rgb(145, 124, 175);*/
+	color: #516754;
+    font-family: 'testFont';
 }
 
 img#create-btn {
@@ -69,6 +75,25 @@ img#create-btn {
 	justify-content: center;
 }
 
+.review-container > div {
+	background-color: #f1f1f1;
+	text-align: center;
+}}
+
+img#create-btn {
+	position: relative;
+	align-self: center;
+	padding-left: 2.5%;
+	padding-right: 2.5%;
+}
+
+.review-container {
+	display: flex;
+	position: relative;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
 .review-container > div {
 	background-color: #f1f1f1;
 	text-align: center;
