Extract TopBar to a component / improve style

config-overrides.js

@@ -5,7 +5,7 @@ module.exports = override(
 		// 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' },
+			modifyVars: { '@base-color': '#CB1B45', '@body-bg': '#bad3e9' },
 		},
 	}),
 );

src/components/TopBar.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Header, Navbar, Nav, Icon } from 'rsuite';
+
+const headerStyle = {
+	borderRadius: '7px 7px 0 0',
+};
+
+function TopBar() {
+	return (
+		<Header >
+			<Navbar appearance='inverse' style={headerStyle}>
+				<Navbar.Body>
+					<Nav pullRight>
+						<Nav.Item
+							icon={<Icon size='2x' icon='user-circle' />}
+						></Nav.Item>
+					</Nav>
+				</Navbar.Body>
+			</Navbar>
+		</Header>
+	);
+}
+
+export default TopBar;

src/screens/App.js

@@ -3,27 +3,22 @@ import 'rsuite/lib/styles/index.less';
 import { Container } from 'rsuite';
 
 import Login from './Login';
+import TopBar from '../components/TopBar';
 
 const containerStyle = {
 	maxWidth: 700,
 	margin: '0 auto',
 	borderRadius: 7,
 	background: 'white',
-	marginTop: 50
+	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}>
-			<Container style={containerStyle}>
+			<TopBar />
-				<Login />
+			<Login />
-			</Container>
+		</Container>
-		</div>
 	);
 }
 

src/screens/Login.js

@@ -2,10 +2,6 @@ import React from 'react';
 
 import {
 	Container,
-	Header,
-	Navbar,
-	Nav,
-	Icon,
 	Content,
 	FlexboxGrid,
 	Panel,
@@ -20,20 +16,6 @@ import {
 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>