aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
authorWhymarrh Whitby <whymarrh.whitby@gmail.com>2018-09-24 11:17:54 +0800
committerWhymarrh Whitby <whymarrh.whitby@gmail.com>2018-10-02 00:14:54 +0800
commit2e5a09e28c07b2b3865d3eb0112d8705e99f572d (patch)
treee962a4daa88af160fe0c2b7928ba66db79d19025 /ui/app
parent23aabcca6fb3deb5009564f16ed3edd46061f449 (diff)
downloadtangerine-wallet-browser-2e5a09e28c07b2b3865d3eb0112d8705e99f572d.tar
tangerine-wallet-browser-2e5a09e28c07b2b3865d3eb0112d8705e99f572d.tar.gz
tangerine-wallet-browser-2e5a09e28c07b2b3865d3eb0112d8705e99f572d.tar.bz2
tangerine-wallet-browser-2e5a09e28c07b2b3865d3eb0112d8705e99f572d.tar.lz
tangerine-wallet-browser-2e5a09e28c07b2b3865d3eb0112d8705e99f572d.tar.xz
tangerine-wallet-browser-2e5a09e28c07b2b3865d3eb0112d8705e99f572d.tar.zst
tangerine-wallet-browser-2e5a09e28c07b2b3865d3eb0112d8705e99f572d.zip
Have PageContainerFooter take children node
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/page-container/index.scss27
-rw-r--r--ui/app/components/page-container/page-container-footer/page-container-footer.component.js46
-rw-r--r--ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js12
3 files changed, 64 insertions, 21 deletions
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index 61434cbcf..b7bf1b8b5 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -43,10 +43,9 @@
&__footer {
display: flex;
- flex-flow: row;
+ flex-flow: column;
justify-content: center;
border-top: 1px solid $geyser;
- padding: 16px;
flex: 0 0 auto;
.btn-default,
@@ -55,6 +54,30 @@
}
}
+ &__footer-header {
+ display: flex;
+ flex-flow: row;
+ justify-content: center;
+ padding: 16px;
+ flex: 0 0 auto;
+ }
+
+ &__footer-footer {
+ display: flex;
+ flex-flow: row;
+ justify-content: space-around;
+ padding: 0 16px 16px;
+ flex: 0 0 auto;
+
+ a, a:hover {
+ text-decoration: none;
+ cursor: pointer;
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ color: #2f9ae0;
+ }
+ }
+
&__footer-button {
height: 55px;
font-size: 1rem;
diff --git a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
index 3d15df294..5e99d2a26 100644
--- a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
+++ b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
@@ -5,6 +5,7 @@ import Button from '../../button'
export default class PageContainerFooter extends Component {
static propTypes = {
+ children: PropTypes.node,
onCancel: PropTypes.func,
cancelText: PropTypes.string,
onSubmit: PropTypes.func,
@@ -19,6 +20,7 @@ export default class PageContainerFooter extends Component {
render () {
const {
+ children,
onCancel,
cancelText,
onSubmit,
@@ -30,24 +32,32 @@ export default class PageContainerFooter extends Component {
return (
<div className="page-container__footer">
- <Button
- type="default"
- large
- className="page-container__footer-button"
- onClick={e => onCancel(e)}
- >
- { cancelText || this.context.t('cancel') }
- </Button>
-
- <Button
- type={submitButtonType || 'primary'}
- large
- className="page-container__footer-button"
- disabled={disabled}
- onClick={e => onSubmit(e)}
- >
- { submitText || this.context.t('next') }
- </Button>
+ <div className="page-container__footer-header">
+ <Button
+ type="default"
+ large
+ className="page-container__footer-button"
+ onClick={e => onCancel(e)}
+ >
+ { cancelText || this.context.t('cancel') }
+ </Button>
+
+ <Button
+ type={submitButtonType || 'primary'}
+ large
+ className="page-container__footer-button"
+ disabled={disabled}
+ onClick={e => onSubmit(e)}
+ >
+ { submitText || this.context.t('next') }
+ </Button>
+ </div>
+
+ {children && (
+ <div className="page-container__footer-footer">
+ {children}
+ </div>
+ )}
</div>
)
diff --git a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
index 5e5dbf00b..75ee09fba 100644
--- a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
+++ b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
@@ -25,6 +25,17 @@ describe('Page Footer', () => {
assert.equal(wrapper.find('.page-container__footer').length, 1)
})
+ it('should render a page-container__footer-footer class when given children', () => {
+ const wrapper = shallow(
+ <PageFooter>
+ <div>Works</div>
+ </PageFooter>,
+ { context: { t: sinon.spy((k) => `[${k}]`) } }
+ )
+
+ assert.equal(wrapper.find('.page-container__footer-footer').length, 1)
+ })
+
it('renders two button components', () => {
assert.equal(wrapper.find(Button).length, 2)
})
@@ -65,5 +76,4 @@ describe('Page Footer', () => {
assert.equal(onSubmit.callCount, 1)
})
})
-
})