Add basic Login component

src/App.js

@@ -1,11 +0,0 @@
-import React from 'react';
-
-function App() {
-	return (
-		<div>
-			<p>It works</p>
-		</div>
-	);
-}
-
-export default App;

src/index.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import {render } from 'react-dom';
+import App from './screens/App';
 
-ReactDOM.render(
+import 'rsuite/lib/styles/index.less';
+
+render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,

src/screens/App.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import 'rsuite/lib/styles/index.less';
+import { Container } from 'rsuite';
+
+import Login from './Login';
+
+const containerStyle = {
+	maxWidth: 700,
+	margin: '0 auto',
+	borderRadius: 7,
+	background: 'white',
+	marginTop: 50
+};
+
+const baseStyle = {
+	// background: 'linear-gradient(107deg, rgba(209,64,26,1) 0%, rgba(255,135,135,1) 63%, rgba(0,212,255,1) 63%, rgba(0,153,255,1) 83%)',
+	// height: '100vh',
+}
+
+function App() {
+	return (
+		<div style={baseStyle}>
+			<Container style={containerStyle}>
+				<Login />
+			</Container>
+		</div>
+	);
+}
+
+export default App;

src/screens/Login.js

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import {
+	Container,
+	Header,
+	Navbar,
+	Nav,
+	Icon,
+	Content,
+	FlexboxGrid,
+	Panel,
+	Form,
+	FormGroup,
+	ControlLabel,
+	FormControl,
+	Button,
+	ButtonToolbar,
+} from 'rsuite';
+
+function Login() {
+	return (
+		<Container>
+			<Header>
+				<Navbar appearance='inverse'>
+					<Navbar.Header>
+						<p className='navbar-brand logo'>Meeting Planner</p>
+					</Navbar.Header>
+					<Navbar.Body>
+						<Nav pullRight>
+							<Nav.Item
+								icon={<Icon size="2x" icon='user-circle' />}
+							></Nav.Item>
+						</Nav>
+					</Navbar.Body>
+				</Navbar>
+			</Header>
+			<Content>
+				<FlexboxGrid justify='center'>
+					<FlexboxGrid.Item>
+						<Panel header={<h3>Login</h3>} bordered>
+							<Form fluid>
+								<FormGroup>
+									<ControlLabel>
+										Username or email address
+									</ControlLabel>
+									<FormControl name='name' />
+								</FormGroup>
+								<FormGroup>
+									<ControlLabel>Password</ControlLabel>
+									<FormControl
+										name='password'
+										type='password'
+									/>
+								</FormGroup>
+								<FormGroup>
+									<ButtonToolbar>
+										<Button appearance='primary'>
+											Sign in
+										</Button>
+										<Button appearance='link'>
+											Forgot password?
+										</Button>
+									</ButtonToolbar>
+								</FormGroup>
+							</Form>
+						</Panel>
+					</FlexboxGrid.Item>
+				</FlexboxGrid>
+			</Content>
+		</Container>
+	);
+}
+
+export default Login;