web: material ui form inputs on the submission page, "Target" radio buttons

web/src/app/globals.scss

@@ -1,4 +1,5 @@
 $review-border: 1px solid var(--review-border);
+$form-label-fontsize: 1.3rem;
 
 @mixin border-with-radius {
     border: $review-border {
@@ -21,6 +22,7 @@ $review-border: 1px solid var(--review-border);
 	--window-header:       #f5f5f5;
 	--comment-highlighted: #ffffd7;
 	--comment-area:        white;
+	--placeholder-text:    rgb(150,150,150);
 
 	@media (prefers-color-scheme: dark) {
 		--page:                rgb(15,15,15);
@@ -35,6 +37,7 @@ $review-border: 1px solid var(--review-border);
 		--window-header:       rgb(10,10,10);
 		--comment-highlighted: #ffffd7;
 		--comment-area:        rgb(20,20,20);
+		--placeholder-text:    rgb(80,80,80);
 	}
 }
 
@@ -51,4 +54,11 @@ button {
 
 a:active, a:link, a:hover {
 	text-decoration: none;
+}
+
+.spacer {
+    display: block;
+    width: 100%;
+    height: 1px;
+    background-color: var(--review-border);
 }

web/src/app/submissions/[submissionId]/(styles)/page.scss

@@ -14,13 +14,6 @@
     width: 100vw;
 }
 
-.spacer {
-    display: block;
-    width: 100%;
-    height: 1px;
-    background-color: var(--review-border);
-}
-
 .by-creator {
     margin-top: 10px;
 }

web/src/app/submit/(styles)/page.scss

@@ -1,5 +1,37 @@
 @use "../../globals.scss";
 
+::placeholder {
+	color: var(--placeholder-text)
+}
+
+.form-spacer {
+	margin-bottom: 20px;
+
+	&:last-of-type {
+		margin-top: 15px;
+	}
+}
+
+#target-asset-radio {
+	color: var(--text-color);
+	font-size: globals.$form-label-fontsize;
+}
+
+.form-field {
+	width: 850px;
+
+	& label, & input {
+		color: var(--text-color);
+	}
+	& fieldset {
+		border-color: rgb(100,100,100);
+
+	}
+	& span {
+		color: white;
+	}
+}
+
 main {
 	display: grid;
 	justify-content: center;
@@ -15,19 +47,9 @@ header h1 {
 
 form {
 	display: grid;
-	gap: 10px;
+	gap: 25px;
 
-	input {
-		@include globals.border-with-radius;
-		outline: none;
-		background-color: var(--comment-area);
-		height: 40px;
-		width: 500px;;
-		font-size: 1.2rem;
-		margin-bottom: 15px;
+	fieldset {
+		border: blue
 	}
-	label {
-		font-size: 1.3rem;
-		color: var(--text-color);
-	}
-}
+}

web/src/app/submit/page.tsx

@@ -1,4 +1,6 @@
-import { FormControl, FormLabel, RadioGroup, FormControlLabel, Button } from "@mui/material"
+"use client"
+
+import { FormControl, FormLabel, RadioGroup, FormControlLabel, Button, TextField } from "@mui/material"
 import SendIcon from '@mui/icons-material/Send';
 import Webpage from "@/app/_components/webpage"
 import Radio from '@mui/material/Radio';
@@ -10,45 +12,35 @@ const enum Map {
 	Fix,
 }
 
-interface FormDetails {
-	label: string,
-	id: string,
-}
-
-function Field(form_details: FormDetails) {
-	return (<>
-		<label htmlFor={form_details.id}>{`${form_details.label}:`}</label>
-		<input type="text" required id={form_details.id} name={form_details.id}/>
-	</>)
-}
-
 function TargetAsset() {
-	return <FormControl>
-		<FormLabel id="target-asset-radio" sx={{color: "var(--text-color)"}}>Target Asset</FormLabel>
-		<RadioGroup aria-labelledby="target-asset-radio" name="target-asset-radio">
+	return (<FormControl>
+		<FormLabel id="target-asset-radio">Target:</FormLabel>
+		<RadioGroup defaultValue="New" aria-labelledby="target-asset-radio" name="target-asset-radio">
 			<FormControlLabel value="New" control={<Radio/>} label="New"/>
 			<FormControlLabel value="Fix" control={<Radio/>} label="Fix"/>
 		</RadioGroup>
-	</FormControl>
+	</FormControl>)
 }
 
 export default function SubmissionInfoPage() {
     return (
         <Webpage>
-        	<header>
-         		<h1>Submit Map</h1>
-         	</header>
         	<main>
+	        	<header>
+	          		<h1>Submit Asset</h1>
+	            	<span className="spacer form-spacer"></span>
+	          	</header>
 	        	<form>
-	         		<Field label="Display Name" id="display-name"/>
-	         		<Field label="Creator" id="creator"/>
-	           		<Field label="Game ID" id="gameid"/>
-             		<Field label="Asset ID" id="asset-id"/>
-	             	<Field label="Asset Version" id="asset-version"/>
+					<TextField className="form-field" id="display-name"  label="Display Name"  variant="outlined"/>
+					<TextField className="form-field" id="creator"       label="Creator"       variant="outlined"/>
+					<TextField className="form-field" id="game-id"       label="Game ID"       variant="outlined"/>
+					<TextField className="form-field" id="asset-id"      label="Asset ID"      variant="outlined"/>
+					<TextField className="form-field" id="asset-version" label="Asset Version" variant="outlined"/>
 					<TargetAsset/>
 	         	</form>
-				<Button variant="outlined" startIcon={<SendIcon/>} sx={{
-					width: "300px",
+				<span className="spacer form-spacer"></span>
+				<Button variant="contained" startIcon={<SendIcon/>} sx={{
+					width: "400px",
 					height: "50px",
 					marginInline: "auto"
 				}}>Submit</Button>