Redesign login screen and add help box

src/screens/App.js

@@ -10,7 +10,8 @@ const containerStyle = {
 	margin: '0 auto',
 	borderRadius: 7,
 	background: 'white',
-	marginTop: 50,
+	marginTop: '10vh',
+	marginBottom: '10vh',
 };
 
 function App() {

src/screens/Login.js

@@ -1,55 +1,57 @@
 import React from 'react';
 
 import {
-	Container,
 	Content,
 	FlexboxGrid,
 	Panel,
 	Form,
 	FormGroup,
-	ControlLabel,
 	FormControl,
+	HelpBlock,
 	Button,
-	ButtonToolbar,
 } from 'rsuite';
 
+const boxStyle = {
+	margin: '50px 10px',
+};
+
 function Login() {
 	return (
-		<Container>
 		<Content>
 			<FlexboxGrid justify='center'>
 				<FlexboxGrid.Item>
-						<Panel header={<h3>Login</h3>} bordered>
-							<Form fluid>
+					<Panel
+						header={<h3>Login</h3>}
+						bordered
+						style={boxStyle}
+					>
+						<Form horizontal>
 							<FormGroup>
-									<ControlLabel>
-										Username or email address
-									</ControlLabel>
-									<FormControl name='name' />
-								</FormGroup>
-								<FormGroup>
-									<ControlLabel>Password</ControlLabel>
 								<FormControl
-										name='password'
-										type='password'
+									name='email'
+									type='email'
+									placeholder='email'
 								/>
 							</FormGroup>
 							<FormGroup>
-									<ButtonToolbar>
-										<Button appearance='primary'>
-											Sign in
-										</Button>
-										<Button appearance='link'>
-											Forgot password?
-										</Button>
-									</ButtonToolbar>
+								<FormControl
+									name='password'
+									type='password'
+									placeholder='password'
+								/>
+								<HelpBlock tooltip>
+									Minimum password length is 8 characters
+								</HelpBlock>
 							</FormGroup>
+							<FormGroup>
+								<Button appearance='primary' block>Sign in</Button>
+							</FormGroup>
+							<Button appearance='link'>Forgot password?</Button>
 						</Form>
 					</Panel>
 				</FlexboxGrid.Item>
 			</FlexboxGrid>
 		</Content>
-		</Container>
 	);
 }