Extract TopBar to a component / improve style

This commit is contained in:
rui hildt 2020-05-11 19:09:59 +02:00
parent cd1e23f2ea
commit 1c9dbf0615
4 changed files with 32 additions and 30 deletions

View File

@ -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' },
},
}),
);

25
src/components/TopBar.js Normal file
View File

@ -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;

View File

@ -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>
);
}

View File

@ -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>