Small style and UX tweaks to question generation modal & confirm bar

src/components/question-generator.jsx

@@ -86,9 +86,9 @@ const QsetGenerator = () => {
 			document.getElementById('num-questions').classList.add('invalid')
 			setNumberError('Please enter a number greater than 0')
 			return false
-		} else if (numQuestions > 8) {
+		} else if (numQuestions > 16) {
 			document.getElementById('num-questions').classList.add('warning')
-			setWarning('Note: Generating this many questions may not work, or will take a while.')
+			setWarning('Note: Generating this many questions will take a while and may not work at all.')
 			return true
 		} else {
 			document.getElementById('num-questions').classList.remove('invalid')
@@ -111,13 +111,15 @@ const QsetGenerator = () => {
 
 	return (
 		<div>
-			<h1>Generate Questions (Beta Feature)</h1>
+			<h1>Generate Questions</h1>
 			{loading && <div className="loading">
 				<LoadingIcon/>
 				<p>Generating questions. Do not close this window.</p>
 			</div>}
 			<div id="generate_form">
-				<span><strong>This question generator is powered by AI, so errors in the generated content can occur</strong>. There will be an option after generation is complete to keep or revert all changes.</span>
+				<span><strong>Question Generation is powered by AI, so errors in the generated content can occur</strong>. After generation is complete you will be prompted to keep the content or discard it. You may need
+				to make edits to the generated content before saving your widget.</span>
+				<span>Note that this feature will only create text content. Image or media generation is not currently supported.</span>
 				<span className="error">{serverError}</span>
 				<div id="topic-field">
 					<label htmlFor="topic">Topic</label>
@@ -129,10 +131,10 @@ const QsetGenerator = () => {
 					<span className="error">{numberError}</span>
 					<input id="num-questions" type="number" defaultValue="8" min="1" placeholder="Number to generate" onChange={onNumberChange}/>
 				</div>
-				<div>
+				{/* <div>
 					<input type="checkbox" id="include-images" name="include-images" onChange={(e) => setIncludeImages(e.target.checked)}/>
 					<label htmlFor="include-images">Include images</label>
-				</div>
+				</div> */}
 				<div>
 					<input type="checkbox" id="build-off-existing" name="build-off-existing" onChange={(e) => setBuildOffExisting(e.target.checked)}/>
 					<label htmlFor="build-off-existing">Keep current questions <span className="warning">(If left unselected, this will replace all existing questions)</span></label>

src/components/question-generator.scss

@@ -1,95 +1,95 @@
 @import './include.scss';
 
 .generate {
-    border-radius: 5px;
-    margin: 10px;
-
-    h1 {
-        background: #10a37f;
-        padding: 10px;
-        margin: 0px;
-        font-size: 1em;
-        font-weight: bold;
-        color: #ffffff;
-    }
-
-    .loading {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        background-color: rgba(0, 0, 0, 0.5);
-
-        backdrop-filter: blur(10px);
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        z-index: 10;
-
-        p {
-            margin-bottom: 150px;
-            font-size: 1.1em;
-            color: white;
-        }
-    }
-
-    #generate_form {
-        margin: 2em;
-        display: flex;
-        flex-direction: column;
-        gap: 1em;
-
-        #topic-field {
-            display: flex;
-            flex-direction: column;
-            gap: 0.5em;
-
-            #topic {
-                padding: 0.5em;
-            }
-        }
-
-        #num-questions-field {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-
-            input {
-                max-width: 100px;
-            }
-        }
-
-    }
-    .actions {
-        position: fixed;
-        width: 80px;
-        left: 50%;
-        bottom: 0px;
-        margin-left: -40px;
-        padding-bottom: 14px;
-        z-index: 10;
-
-        text-align: center;
-        font-size: 1.1em;
-
-        a {
-            color: #000000;
-        }
-    }
-
-    .error {
-        color: red;
-        font-size: 0.8em;
-    }
-
-    .invalid {
-        border: 2px solid red;
-        border-radius: 3px;
-    }
-
-    .warning {
-        color: #f1814b;
-        font-size: 0.8em;
-    }
+	border-radius: 5px;
+	margin: 10px;
+
+	h1 {
+		background: #3690E6;
+		padding: 10px;
+		margin: 0px;
+		font-size: 1em;
+		font-weight: bold;
+		color: #ffffff;
+	}
+
+	.loading {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100vh;
+		background-color: rgba(0, 0, 0, 0.5);
+
+		backdrop-filter: blur(10px);
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		z-index: 10;
+
+		p {
+			margin-bottom: 150px;
+			font-size: 1.1em;
+			color: white;
+		}
+	}
+
+	#generate_form {
+		margin: 2em;
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+
+		#topic-field {
+			display: flex;
+			flex-direction: column;
+			gap: 0.5em;
+
+			#topic {
+				padding: 0.5em;
+			}
+		}
+
+		#num-questions-field {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+
+			input {
+				max-width: 100px;
+			}
+		}
+
+	}
+	.actions {
+		position: fixed;
+		width: 80px;
+		left: 50%;
+		bottom: 0px;
+		margin-left: -40px;
+		padding-bottom: 14px;
+		z-index: 10;
+
+		text-align: center;
+		font-size: 1.1em;
+
+		a {
+			color: #000000;
+		}
+	}
+
+	.error {
+		color: red;
+		font-size: 0.8em;
+	}
+
+	.invalid {
+		border: 2px solid red;
+		border-radius: 3px;
+	}
+
+	.warning {
+		color: #f1814b;
+		font-size: 0.8em;
+	}
 }

src/components/widget-creator-page.scss

@@ -156,10 +156,14 @@ a {
 			background: linear-gradient(#ffffff, #ffe5cc);
 		}
 	}
-}
 
-#qset-generation-confirmation-bar {
-	background-color: #10a37f;
+	&#qset-generation-confirmation-bar {
+		background-color: #3690E6;
+
+		button:hover {
+			background: linear-gradient(#ffffff, #bbdeff);
+		}
+	}
 }
 
 .dot {