From 096db2e8def208cc6450cb49c56515164706e7e4 Mon Sep 17 00:00:00 2001
From: Ceda EI <ceda_ei@protonmail.com>
Date: Fri, 5 Apr 2019 10:04:27 +0530
Subject: [PATCH] Add buttons to modify quest. Add respective scss

---
 src/components/quest.js | 18 ++++++++++++++++--
 src/scss/index.scss     | 36 +++++++++++++++++++++++++++++-------
 2 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/components/quest.js b/src/components/quest.js
index 3e4d70b..c48642e 100644
--- a/src/components/quest.js
+++ b/src/components/quest.js
@@ -64,7 +64,16 @@ export default (quest, sideQuest) => {
 			);
 		}
 		else {
-			return (
+			return (<>
+				<div className="back_only">
+					<button
+						className="back"
+						onClick={() => props.setDisplay(
+							{
+								type: props.display.type + "s"
+							})
+						}>&lt;</button>
+				</div>
 				<div className="quest nes-container with-title is-dark">
 					<p className="title">{type}</p>
 					<div className="quest_element">
@@ -102,8 +111,13 @@ export default (quest, sideQuest) => {
 								/>)}
 						</div>
 					</div>
+					<div className="quest_element">
+						<button className="nes-btn is-primary">Update</button>
+						<button className="nes-btn is-success">Mark as done</button>
+						<button className="nes-btn is-error">Delete</button>
+					</div>
 				</div>
-			);
+			</>);
 		}
 	}
 
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 41139a6..5d88625 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -28,8 +28,24 @@ body {
 	}
 }
 
+.back_only {
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	.back {
+		border: none;
+		color: #FFF;
+		background-color: rgba(0,0,0,0);
+		text-align: right;
+		width: 30px;
+		margin: 0;
+		padding: 0;
+	}
+}
+
 .main {
-	margin: 0 5%;
+	margin: 0 auto;
+	max-width: 1000px;
 	header {
 		width: 100%;
 		margin-top: 1em;
@@ -39,14 +55,14 @@ body {
 	}
 	.body {
 		padding: 0 1em;
+		button {
+			width: 48%;
+			margin: 0 1%;
+			box-sizing: border-box;
+		}
 		.stats {
 			margin: 1em 0;
 			box-sizing: border-box;
-			button {
-				width: 48%;
-				margin: 0 1%;
-				box-sizing: border-box;
-			}
 		}
 		.quest {
 			width: 100%;
@@ -68,6 +84,9 @@ body {
 					flex-direction: row;
 					justify-content: space-between;
 				}
+				button {
+					width: 30%;
+				}
 			}
 
 		}
@@ -118,7 +137,7 @@ body {
 	height: 100vh;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 900px) {
 	.main {
 		header {
 			padding: 1em 1em;
@@ -146,6 +165,9 @@ body {
 						flex-direction: column;
 						justify-content: flex-start;
 					}
+					button {
+						width: 100%;
+					}
 				}
 			}
 			.quests {