Changed styling for step 2 auto-generation

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>

Author: natalialuzuriaga

index.html

@@ -251,11 +251,19 @@ <h4 id="quiz-subheading">
 	</div>
 
 	<div id="auto-generation">
-		<p id="auto-generation-header"></p>
+		<div class="auto-generation-header">
+			<div class="step-header">
+				<div class="step-number">2</div>
+				<h2>Auto Generate Fields</h2>
+			</div>
+			<h4 id="quiz-subheading"> Enter your repository's GitHub URL in order to automatically pre-fill some of the
+				fields in this form </h4>
+			<p><i>This currently only works on <b>public</b> repositories</i></p>
+		</div>
 		<form id="github-url-form">
-			<label for="repo-url">GitHub Repository URL</label><br>
-			<input type="text" id="repo-url" name="repo-url"><br>
-			<input type="submit" id="repo-url-button" value="Submit">
+			<label class="usa-label" for="repo-url">GitHub Repository URL</label>
+			<input class="usa-input" id="repo-url" name="repo-url" />
+			<button class="usa-button" type="submit" id="repo-url-button">Submit</button>
 		</form>
 	</div>
 

js/generateFormComponents.js

@@ -254,11 +254,6 @@ function createFormHeading(title, description) {
 	`;
 }
 
-function createAutoGenerationBox() {
-	const container = document.getElementById("auto-generation-header")
-	container.innerHTML = `<div class="step-header"><div class="step-number">2</div><h2>Auto Generate Fields</h2></div><h4 id="quiz-subheading"> Enter your repository's GitHub URL in order to automatically pre-fill some of the fields in this form </h4> \n <p> <i>This currently only works on <b>public</b> repositories</i> </p>`
-}
-
 // Iterates through each json field and creates component array for Form.io
 function createAllComponents(schema, prefix = "") {
 	let components = [];
@@ -305,7 +300,6 @@ async function createFormComponents() {
 	console.log("JSON Data:", jsonData);
 
 	createFormHeading(jsonData["title"], jsonData["description"]);
-	createAutoGenerationBox()
 
 	components = createAllComponents(jsonData);