From 5ee79c38436f29831be41079b52657d04d2bef0e Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Thu, 22 Feb 2018 14:29:59 +0200
Subject: [PATCH] refactor(theme): change app bar and main container
---
.../src/components/AppBar/AppBar.js | 26 ++++++++++++++-----
packages/xpub-faraday/app/FaradayApp.js | 20 +++++++-------
packages/xpub-faraday/app/theme.js | 2 +-
3 files changed, 30 insertions(+), 18 deletions(-)
diff --git a/packages/components-faraday/src/components/AppBar/AppBar.js b/packages/components-faraday/src/components/AppBar/AppBar.js
index a8161513b..dc1606d07 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 3df9a1e4d..17bae212a 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 3692e4300..417964772 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
--
GitLab