Merge pull request #21 from emmanueposu/demuthsa

trivia review page css
emmanueposu · May 9, 2024 · 6564bce · 6564bce
2 parents a5c4380 + 551a993
commit 6564bce
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 13 deletions.
diff --git a/trivia-forge/frontend/src/App.css b/trivia-forge/frontend/src/App.css
@@ -111,7 +111,7 @@ h2 {
 .CardPadding {
   margin: 20px;
   padding: 10px;
-  background-color: bisque;
+  background-color: #b3d9ff !important;
 }
 
 footer {
@@ -142,7 +142,6 @@ footer {
   font-family: 'Fredoka One', cursive;
   font-size: 40px;
   border-radius: 70px;
-  /* Rounded corners */
   box-shadow: 0 8px #999;
   /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.1); */
   width: 40%;
@@ -156,4 +155,86 @@ footer {
   background: linear-gradient(to bottom, #ff6700, #ff8c00);
   border: 3px solid #ee7600;
   outline: none;
-}
+}
+
+
+.trivia-review-container {
+  margin: 30px auto;
+  padding: 30px;
+  width: 900px; 
+  max-width: 100%;
+  background-color: #80bfff; 
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+  overflow-y: auto;
+  max-height: 80vh;
+}
+
+.trivia-review-heading {
+  color: #F8F8FF;  
+  padding: 15px;
+  font-size: 40px; 
+  font-weight: bold; 
+  text-shadow: 
+    -1px -1px 0 #000, 
+    1px -1px 0 #000, 
+    -1px 1px 0 #000, 
+    1px 1px 0 #000;
+}
+
+
+.trivia-review-button {
+  font-family: 'Fredoka One', cursive !important;
+  width: 400px; 
+  margin: 10px !important;
+  font-size: 20px !important;
+  padding: 10px 0; 
+  background: linear-gradient(to bottom, #ff8c00, #ff6700); 
+  color: white; 
+  border: none !important; 
+  border-radius: 70px;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+  box-shadow: 0 0 0 3px rgba(255, 103, 0, 0.5);
+}
+
+
+.trivia-review-button:hover,
+.trivia-review-button:focus {
+  transform: translateY(-2px); 
+  background: linear-gradient(to bottom, #ff6700, #ff8c00);
+  border: 3px solid #ee7600;
+  outline: none;
+}
+
+.category-container {
+  width: 100%;
+  padding: 15px;
+  margin-bottom: 20px;
+  background-color: #99ccff; 
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.input-field {
+  width: 90%; 
+  padding: 8px;
+  margin: 10px 0;
+  border: 1px solid #3498db;
+  border-radius: 4px;
+}
+
+.input-label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+.trivia-button-container {
+  margin: 10px;
+  flex: 0 0 auto;
+  text-align: center;
+}
diff --git a/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx b/trivia-forge/frontend/src/Pages/TriviaGenPage.jsx
@@ -22,7 +22,7 @@ function TriviaGenPage() {
     const [Title, setTitle] = useState('');
     const [Theme, setTheme] = useState('');
     const [categories, setCategories] = useState([]);
-    const [isMultipleChoice, setIsMultipleChoice] = useState(true);
+    const [isMultipleChoice, setIsMultipleChoice] = useState(false);
     const navigate = useNavigate();
 
     const handleAddCategory = () => {
@@ -193,7 +193,7 @@ function TriviaGenPage() {
                         <input
                             type="checkbox"
                             checked={isMultipleChoice}
-                            onChange={e => setIsMultipleChoice(e.target.value)}
+                            onChange={e => setIsMultipleChoice(!isMultipleChoice)}
                             //className="form-control" 
                             id="multipleChoice"
                         />

diff --git a/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx b/trivia-forge/frontend/src/Pages/TriviaReviewPage.jsx
@@ -2,23 +2,32 @@ import React from 'react';
 import { useLocation } from 'react-router-dom'; // used to access passed state
 import Categories from '../Components/Categories';
 import { Button } from 'react-bootstrap';
+import '../App.css';
 
 function TriviaReviewPage() {
 	// Reference: https://reactrouter.com/en/main/hooks/use-location
 	// pulls object from state property in TriviaGenPage
 	const location = useLocation();
 	const { game } = location.state;
 	let categories = game.categories;
+
 	return (
 		<div>
-			<h1>Review and Edit Trivia Questions</h1>
-
-			{categories.map((cat, index) => (
-				<Categories key={index} category={cat} />
-
-			))}
-			<Button variant="primary" size="lg" block>
-				Save Changes</Button>
+			<div className="trivia-review-container">
+				<h1 className="trivia-review-heading">Review and Edit Trivia Questions</h1>
+				{categories.map((cat, index) => (
+					<div key={index} className="category-container">
+						<label className="input-label">Category Name:</label>
+						<input type="text" className="input-field" value={cat.name} readOnly />
+						<Categories category={cat} />
+					</div>
+				))}
+			</div>
+			<div block className="trivia-button-container">
+				<Button variant="primary" className="trivia-review-button">
+					Save Changes
+				</Button>
+			</div>
 		</div>
 	);
 }