From 1c9dbf061599486e207c9f4e8c6899726388cee9 Mon Sep 17 00:00:00 2001
From: rui hildt <ruihildt@protonmail.com>
Date: Mon, 11 May 2020 19:09:59 +0200
Subject: [PATCH] Extract TopBar to a component / improve style

---
 config-overrides.js      |  2 +-
 src/components/TopBar.js | 25 +++++++++++++++++++++++++
 src/screens/App.js       | 17 ++++++-----------
 src/screens/Login.js     | 18 ------------------
 4 files changed, 32 insertions(+), 30 deletions(-)
 create mode 100644 src/components/TopBar.js

diff --git a/config-overrides.js b/config-overrides.js
index eb2c6b9..65bf228 100644
--- a/config-overrides.js
+++ b/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' },
 		},
 	}),
 );
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
new file mode 100644
index 0000000..41682ec
--- /dev/null
+++ b/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;
diff --git a/src/screens/App.js b/src/screens/App.js
index 60949c1..671185f 100644
--- a/src/screens/App.js
+++ b/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}>
-				<Login />
-			</Container>
-		</div>
+		<Container style={containerStyle}>
+			<TopBar />
+			<Login />
+		</Container>
 	);
 }
 
diff --git a/src/screens/Login.js b/src/screens/Login.js
index 22c21f6..7b5702b 100644
--- a/src/screens/Login.js
+++ b/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>