Add basic Login component

config-overrides.js

@@ -0,0 +1,11 @@
+const { override, addLessLoader } = require('customize-cra');
+
+module.exports = override(
+	addLessLoader({
+		// If you are using less-loader@5 or older version, please spread the lessOptions to options directly.
+		lessOptions: {
+			javascriptEnabled: true,
+			modifyVars: { '@base-color': '#005CAF', '@body-bg': '#D3E2F9' },
+		},
+	}),
+);

package.json

@@ -6,15 +6,21 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "customize-cra": "^1.0.0-alpha.0",
+    "less": "^3.11.1",
+    "less-loader": "^6.1.0",
     "react": "^16.13.1",
+    "react-app-rewired": "^2.1.6",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "rsuite": "^4.5.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "dev": "BROWSER=firefox-developer-edition react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -26,8 +32,8 @@
       "not op_mini all"
     ],
     "development": [
-      "last 1 chrome version",
       "last 1 firefox version",
+      "last 1 chrome version",
       "last 1 safari version"
     ]
   }

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;