diff --git a/packages/components-faraday/src/components/AppBar/AppBar.js b/packages/components-faraday/src/components/AppBar/AppBar.js index a8161513b9a708c9c157fbd7d47f22077dadbc40..dc1606d07e1c64aaf242337e4b02779c7bdbff8c 100644 --- a/packages/components-faraday/src/components/AppBar/AppBar.js +++ b/packages/components-faraday/src/components/AppBar/AppBar.js @@ -17,9 +17,11 @@ const AppBar = ({ theme, }) => ( <Root> - {React.cloneElement(brand, { - onClick: goTo('/'), - })} + <Brand> + {React.cloneElement(brand, { + onClick: goTo('/'), + })} + </Brand> {user && ( <User> <div onClick={toggleMenu}> @@ -53,16 +55,26 @@ const Root = styled.div` font-family: ${props => props.theme.fontInterface}; display: flex; justify-content: space-between; - height: 40px; + height: 60px; + flex-grow: 1; + position: fixed; + width: 100%; + z-index: 10; + background-color: #ffffff; +` + +const Brand = styled.div` padding: 10px 20px; + cursor: pointer; ` const User = styled.div` align-items: center; display: flex; justify-content: space-between; - height: 40px; + height: 60px; position: relative; + padding: 10px 20px; > div:first-child { align-items: center; @@ -84,8 +96,8 @@ const Dropdown = styled.div` `${theme.borderWidth} ${theme.borderStyle} ${theme.colorFurniture}`}; position: absolute; min-width: 150px; - right: 0; - top: 50px; + right: 20px; + top: 70px; z-index: 10; ` diff --git a/packages/xpub-faraday/app/FaradayApp.js b/packages/xpub-faraday/app/FaradayApp.js index 3df9a1e4de7dbc6b0d40bceb51eec23587c49721..17bae212a28d7b223f3926945c39175a98a2dafb 100644 --- a/packages/xpub-faraday/app/FaradayApp.js +++ b/packages/xpub-faraday/app/FaradayApp.js @@ -1,5 +1,4 @@ import React from 'react' -import 'xpub-bootstrap' import { compose } from 'recompose' import { connect } from 'react-redux' import styled from 'styled-components' @@ -18,15 +17,6 @@ const App = ({ children, currentUser, journal, logoutUser }) => ( </Root> ) -const Root = styled.div` - font-family: 'Fira Sans', sans-serif; -` - -const MainContainer = styled.div` - padding: 8px; - margin-top: 20px; -` - export default compose( connect( state => ({ @@ -36,3 +26,13 @@ export default compose( ), withJournal, )(App) + +const Root = styled.div` + font-family: ${props => props.theme.fontInterface}; +` + +const MainContainer = styled.div` + padding: 90px 10px 40px; + min-height: calc(100vh - 130px); + background-color: ${props => props.theme.backgroundColor || '#fff'}; +` diff --git a/packages/xpub-faraday/app/theme.js b/packages/xpub-faraday/app/theme.js index 3692e4300448b60bcf0da8976645121a53019285..417964772097fd2979dae7d2684fb2eebd81f01e 100644 --- a/packages/xpub-faraday/app/theme.js +++ b/packages/xpub-faraday/app/theme.js @@ -2,7 +2,7 @@ const theme = { colorPrimary: '#667080', // Indicates a primary call to action colorSecondary: '#d8d8d8', // Default color for non-primary actions colorFurniture: '#cccccc', // Meant to be applied to elements that indicate content division - colorBorder: '#aaaaaa', // For borders around form elements + colorBorder: '#667080', // For borders around form elements colorBackgroundHue: '#f1f1f1', // Used to create a discrete contrast the default background color colorSuccess: '#005500', // Used to indicate a successful validation state colorError: '#b50000', // Used to indicate an error in validation