Commit 37c60579 authored by Luke Schoen's avatar Luke Schoen
Browse files

review-fix: Remove titleOffset nad instead

* Remove titleOffset and add placeholder width for header nav buttons

* Remove passing `screen` prop for specific pages
parent 005df87a
Pipeline #28588 passed with stage
in 1 minute and 50 seconds
......@@ -56,7 +56,6 @@ class AccountsList extends Component {
}
screen='accounts'
title={<h1>Accounts</h1>}
titleOffset='right'
/>
<div className='window_content'>
......
......@@ -74,11 +74,9 @@ class CreateAccount extends Component {
</Link>
)
}
screen='create-account'
title={
<h1>{isImport ? 'Import account' : 'Create a new account'}</h1>
}
titleOffset='left'
/>
<div className='window_content'>
......
......@@ -50,7 +50,7 @@ class Onboarding extends Component {
render () {
return (
<div>
<Header screen='onboarding' title={<h1>Terms of Use</h1>} />
<Header title={<h1>Terms of Use</h1>} />
<div className='window_content'>
<div className='box -padded'>
......
......@@ -67,9 +67,7 @@ class ScanSignedTx extends Component {
Close
</Link>
}
screen='scan-signed-tx'
title={token && <h1>Send {token.name}</h1>}
titleOffset='left'
/>
<RequireHealth require='sync'>
......
......@@ -57,9 +57,7 @@ class SignedTxSummary extends Component {
Close
</Link>
}
screen='signed-tx-summary'
title={token && <h1>Send {token.name}</h1>}
titleOffset='left'
/>
<RequireHealth require='sync'>
......
......@@ -185,14 +185,12 @@ class TxForm extends Component {
return (
<div>
<Header
screen='txform'
left={
<Link to={`/tokens/${address}`} className='icon -back'>
Close
</Link>
}
title={token && <h1>Send {token.name}</h1>}
titleOffset='left'
/>
<RequireHealth require='sync'>
......
......@@ -51,9 +51,7 @@ class TxQrCode extends Component {
Close
</Link>
}
screen='tx-qr-code'
title={token && <h1>Send {token.name}</h1>}
titleOffset='left'
/>
<RequireHealth require='sync'>
......
......@@ -59,9 +59,7 @@ class Unlock extends Component {
Close
</Link>
}
screen='unlock'
title={token && <h1>Send {token.name}</h1>}
titleOffset='left'
/>
<RequireHealth require='sync'>
......
......@@ -106,9 +106,7 @@ class Whitelist extends Component {
Close
</Link>
}
screen='whitelist'
title={<h1>Search tokens</h1>}
titleOffset='left'
/>
<div className='window_content'>
......
......@@ -8,6 +8,7 @@
&.-header-container {
display: flex;
padding-left: 0.5rem;
}
.account_avatar {
......
......@@ -8,6 +8,7 @@
.header-nav_right {
flex-direction: column;
justify-content: center;
width: 2.3rem;
}
.header-nav_left {
......@@ -19,40 +20,13 @@
}
.header-nav_title {
align-items: center;
flex: 1; // https://stackoverflow.com/a/35270047/3208553
justify-content: center;
z-index: 2;
/**
* Postfix is component to apply these styles to.
* Explicit list so easy to change incase header
* modified on a specific page
*/
&.-header-accounts,
&.-header-create-account,
&.-header-onboarding,
&.-header-scan-signed-tx,
&.-header-signed-tx-summary,
&.-header-tx-qr-code,
&.-header-txform,
&.-header-unlock,
&.-header-whitelist, {
justify-content: center;
align-items: center;
padding-top: 1rem;
padding-bottom: 1rem;
/* Offset from right when only button on left */
&.-offset-left {
padding-right: 2rem;
}
/* Offset from left when only button on right */
&.-offset-right {
padding-left: 2rem;
}
}
&.-header-tokens {
flex: 0;
padding-left: 0.5rem;
}
......
......@@ -49,7 +49,6 @@ export const AccountHeader = ({
</Container>
)
}
titleOffset='left'
{...otherProps}
/>
</div>
......
......@@ -8,12 +8,10 @@ import PropTypes from 'prop-types';
import { Placeholder } from '../Placeholder';
export const Header = ({ left, right, screen, title, titleOffset }) => (
export const Header = ({ left, right, screen, title }) => (
<div className='header-nav'>
<div className='header-nav header-nav_left'>{left}</div>
<div
className={`header-nav header-nav_title -header-${screen} -offset-${titleOffset}`}
>
<div className={`header-nav header-nav_title -header-${screen}`}>
{title || <Placeholder height={24} width={150} />}
</div>
<div className='header-nav header-nav_right'>{right}</div>
......@@ -24,6 +22,5 @@ Header.propTypes = {
left: PropTypes.node,
right: PropTypes.node,
screen: PropTypes.string,
title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
titleOffset: PropTypes.string
title: PropTypes.oneOfType([PropTypes.node, PropTypes.string])
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment