From 4073d2cc4bd1ee74a833c4dcd790818bfca720a1 Mon Sep 17 00:00:00 2001
From: rheabhutada02 <83424582+rheabhutada02@users.noreply.github.com>
Date: Mon, 21 Nov 2022 16:07:20 -0800
Subject: [PATCH] fixed and styled review details page

Co-authored-by: Kara Hoagland <KH-Cl@users.noreply.github.com>
Co-authored-by: Arthur Lu <learthurgo@gmail.com>
Co-authored-by: d7hernan <d7hernan@users.noreply.github.com>
---
 source/ReviewDetails.html       | 55 ++++++++++++++++++---------------
 source/static/Form.css          |  2 +-
 source/static/ReviewDetails.css | 10 ++++++
 3 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html
index 9e9d199..c83f2af 100644
--- a/source/ReviewDetails.html
+++ b/source/ReviewDetails.html
@@ -11,8 +11,6 @@
 
 		<!-- 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-->
@@ -30,30 +28,37 @@
 			</div>
 		</header>
 
-		<!--- meal -->
-		<div class = "meal-name">
-			<h1 id="d-mealName"></h1>
-	  		<h1 id="d-restaurant"></h1>
-		</div> 
-			
-		<div class = "meal-pics-and-tags">
-			<!-- image source --> 
-			<img width=40% height=40% id="d-mealImg"/>
-
-			<div class = "tag-container", id="d-tags">
-
-			</div>
-		</div>
-
-		<div class = "stars-and-comments">
-			<img width=10% height=10% id="d-rating"/>
-			<p id = "d-comments"></p>
-		</div>
-
 		<main>
-			<input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">
-			<button type="button" id="update-btn">Update</button>
-			<button type="button" id="delete-btn" class="danger">Delete</button>
+			<div class="journal-form">
+				<form>
+					<fieldset class = "meal-name">
+						<h1 id="d-mealName" style="font-family: Century Gothic;"></h1>
+						<h1 id="d-restaurant" style="font-family: Century Gothic; font-size: 30px;"></h1>
+					</fieldset> 
+
+					<fieldset class = "meal-pics">
+						<!-- image source --> 
+						<img width=40% height=40% id="d-mealImg" style="margin-left: auto; margin-right: auto; display: block;"/>
+					</fieldset>
+		
+					<fieldset class = "stars-and-comments" style="text-align: center;">
+						<img width=30% height=30% id="d-rating" style="margin-left: auto; margin-right: auto; display: block;"/>
+						<p id = "d-comments"></p>
+					</fieldset>
+
+					<fieldset class = "meal-tags">
+						<div class = "tag-container" id="d-tags" style="justify-content: center;"></div>
+					</fieldset>
+
+				</form>
+			</div>
+		
+			<!---Navigation Buttons-->
+			<div style="display: flex; justify-content: center; margin: 10px;">
+				<input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">
+				<button type="button" id="update-btn">Update</button>
+				<button type="button" id="delete-btn" class="danger">Delete</button>
+			</div>
 		</main>
 
 		<div class="journal-form hidden" id="update-form">
diff --git a/source/static/Form.css b/source/static/Form.css
index 3d9bfa8..4dc0fe1 100644
--- a/source/static/Form.css
+++ b/source/static/Form.css
@@ -1,4 +1,4 @@
-.journal-form > h1 {
+.journal-form h1 {
 	font-family: 'testFont';
 	text-align: center;
 }
diff --git a/source/static/ReviewDetails.css b/source/static/ReviewDetails.css
index c7359a2..edefc3d 100644
--- a/source/static/ReviewDetails.css
+++ b/source/static/ReviewDetails.css
@@ -32,4 +32,14 @@ h1 {
 	color:#516754;
 	font-size: 6rem;
     font-family: 'testFont';
+}
+
+.d-tag {
+	background-color: grey;
+	border-radius: 7px;
+	color: white;
+	padding-right: 7px;
+	padding-left: 7px;
+	margin-left: 10px;
+	margin-right: 10px;
 }
\ No newline at end of file