Reasonable anonymous component.

frontend/src/App.css

@@ -1,6 +1,6 @@
 .App {
   background-color: var(--background-color);
   color: var(--primary-text-color) !important;
-  min-height: 100vh;
-  width: 100%;
+  height: 100vh;
+  width: 10vh;
 }

frontend/src/App.jsx

@@ -7,6 +7,7 @@ import Table from 'react-bootstrap/Table';
 import Alert from 'react-bootstrap/Alert';
 import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
+import Card from 'react-bootstrap/Card';
 
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -26,41 +27,41 @@ function App() {
 
     // If no user, must be scanned/set otherwise
     return (
-	<Container>
+	<>
 	    {user === "" ?
 	     <NoUserView setUser={setUser} />
 	     :
 	     <UserView user={user} setUser={setUser} />}
-	</Container>
+	</>
     );
 }
 
 function NoUserView({setUser}) {
     const [preUser, setPreUser] = useState("");
     return (
-	<>
-	    <Row>
-		<Col>
-		    <Form.Group>
-			<Form.Label>User:</Form.Label>
-			<Form.Control type="text" placeholder="Username"
-				      value={preUser} onChange={(v) => setPreUser(v.target.value)} />
-			<Form.Text>Which user is using this App?</Form.Text>
-		    </Form.Group>
-		</Col>
-	    </Row>
-	    <Row>
-		<Col>
-		    Scanner
-		</Col>
-	    </Row>
-	    <Row>
-		<Col>
-		    <Button variant="primary"
-			    onClick={() => setUser(preUser)}>Set!</Button>
-		</Col>
-	    </Row>
-	</>
+	<Card bg="info" style={{width: '100vw', height: '100vh'}}>
+	    <Card.Body>
+		<Card.Title>BrmInv Anonymous</Card.Title>
+		<Form.Group>
+		    <Form.Label>User name:</Form.Label>
+		    <Form.Control type="text" placeholder="Username"
+				  value={preUser} onChange={(v) => setPreUser(v.target.value)} />
+		    <Form.Text>Enter a user name or scan your barcode.</Form.Text>
+		</Form.Group>
+		<Card.Text>
+		    <BarcodeScannerComponent
+			style={{width: 'auto', height: 'auto'}}
+			onUpdate={() => console.log("scanned")}
+			delay={1500}
+		    />
+		</Card.Text>
+	    </Card.Body>
+	    <Card.Footer>
+		<Button variant="primary"
+			style={{width: '100%'}}
+			onClick={() => setUser(preUser)}>Set!</Button>
+	    </Card.Footer>
+	</Card>
     );
 }