refactor(theme): change app bar and main container

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

packages/xpub-faraday/app/FaradayApp.js

 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'};
+`

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