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. // If you are using less-loader@5 or older version, please spread the lessOptions to options directly.
lessOptions: { lessOptions: {
javascriptEnabled: true, 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 { Container } from 'rsuite';
import Login from './Login'; import Login from './Login';
import TopBar from '../components/TopBar';
const containerStyle = { const containerStyle = {
maxWidth: 700, maxWidth: 700,
margin: '0 auto', margin: '0 auto',
borderRadius: 7, borderRadius: 7,
background: 'white', 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() { function App() {
return ( return (
<div style={baseStyle}>
<Container style={containerStyle}> <Container style={containerStyle}>
<TopBar />
<Login /> <Login />
</Container> </Container>
</div>
); );
} }

View File

@ -2,10 +2,6 @@ import React from 'react';
import { import {
Container, Container,
Header,
Navbar,
Nav,
Icon,
Content, Content,
FlexboxGrid, FlexboxGrid,
Panel, Panel,
@ -20,20 +16,6 @@ import {
function Login() { function Login() {
return ( return (
<Container> <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> <Content>
<FlexboxGrid justify='center'> <FlexboxGrid justify='center'>
<FlexboxGrid.Item> <FlexboxGrid.Item>