aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@gmail.com>2018-09-18 00:56:59 +0800
committerAlexander Tseung <alextsg@gmail.com>2018-09-20 05:31:10 +0800
commitd0d0103bb52cbc032a3b3ea2a2ff5edbf67b0d19 (patch)
treedb5d0296800d1844215c006b8c937d95c1c683b7 /ui
parent44d4b5b5db021646ca26026d91ab2ef39153af37 (diff)
downloadtangerine-wallet-browser-d0d0103bb52cbc032a3b3ea2a2ff5edbf67b0d19.tar.gz
tangerine-wallet-browser-d0d0103bb52cbc032a3b3ea2a2ff5edbf67b0d19.tar.zst
tangerine-wallet-browser-d0d0103bb52cbc032a3b3ea2a2ff5edbf67b0d19.zip
Add Modal component
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/index.scss2
-rw-r--r--ui/app/components/modal/index.js2
-rw-r--r--ui/app/components/modal/index.scss60
-rw-r--r--ui/app/components/modal/modal-content/index.js1
-rw-r--r--ui/app/components/modal/modal-content/index.scss19
-rw-r--r--ui/app/components/modal/modal-content/modal-content.component.js24
-rw-r--r--ui/app/components/modal/modal.component.js78
7 files changed, 186 insertions, 0 deletions
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index e252bf07d..21b65bf55 100644
--- a/ui/app/components/index.scss
+++ b/ui/app/components/index.scss
@@ -14,6 +14,8 @@
@import './menu-bar/index';
+@import './modal/index';
+
@import './modals/index';
@import './network-display/index';
diff --git a/ui/app/components/modal/index.js b/ui/app/components/modal/index.js
new file mode 100644
index 000000000..58309abbe
--- /dev/null
+++ b/ui/app/components/modal/index.js
@@ -0,0 +1,2 @@
+export { default } from './modal.component'
+export { default as ModalContent } from './modal-content'
diff --git a/ui/app/components/modal/index.scss b/ui/app/components/modal/index.scss
new file mode 100644
index 000000000..e57156d71
--- /dev/null
+++ b/ui/app/components/modal/index.scss
@@ -0,0 +1,60 @@
+@import './modal-content/index';
+
+.modal-container {
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ display: flex;
+ flex-flow: column;
+ border-radius: 8px;
+
+ &__content {
+ overflow-y: auto;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 16px 32px;
+
+ @media screen and (max-width: 575px) {
+ justify-content: center;
+ padding: 28px 20px;
+ }
+ }
+
+ &__header {
+ position: relative;
+ display: flex;
+ padding: 12px;
+ justify-content: center;
+ border-bottom: 1px solid #d2d8dd;
+ }
+
+ &__header-close::after {
+ content: '\00D7';
+ font-size: 40px;
+ color: $dusty-gray;
+ position: absolute;
+ top: -5px;
+ right: 10px;
+ cursor: pointer;
+ }
+
+ &__footer {
+ display: flex;
+ flex-flow: row;
+ justify-content: center;
+ border-top: 1px solid #d2d8dd;
+ padding: 16px;
+ flex: 0 0 auto;
+
+ &-button {
+ min-width: 0;
+ margin-right: 16px;
+
+ &:last-of-type {
+ margin-right: 0;
+ }
+ }
+ }
+}
diff --git a/ui/app/components/modal/modal-content/index.js b/ui/app/components/modal/modal-content/index.js
new file mode 100644
index 000000000..733cfb3b8
--- /dev/null
+++ b/ui/app/components/modal/modal-content/index.js
@@ -0,0 +1 @@
+export { default } from './modal-content.component'
diff --git a/ui/app/components/modal/modal-content/index.scss b/ui/app/components/modal/modal-content/index.scss
new file mode 100644
index 000000000..560505b84
--- /dev/null
+++ b/ui/app/components/modal/modal-content/index.scss
@@ -0,0 +1,19 @@
+.modal-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 16px 0;
+
+ &__title {
+ font-size: 1.5rem;
+ font-weight: 500;
+ padding: 16px 0;
+ text-align: center;
+ }
+
+ &__description {
+ text-align: center;
+ font-size: .875rem;
+ }
+}
diff --git a/ui/app/components/modal/modal-content/modal-content.component.js b/ui/app/components/modal/modal-content/modal-content.component.js
new file mode 100644
index 000000000..8beb854e0
--- /dev/null
+++ b/ui/app/components/modal/modal-content/modal-content.component.js
@@ -0,0 +1,24 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+export default class ModalContent extends PureComponent {
+ static propTypes = {
+ title: PropTypes.string,
+ description: PropTypes.string,
+ }
+
+ render () {
+ const { title, description } = this.props
+
+ return (
+ <div className="modal-content">
+ <div className="modal-content__title">
+ { title }
+ </div>
+ <div className="modal-content__description">
+ { description }
+ </div>
+ </div>
+ )
+ }
+}
diff --git a/ui/app/components/modal/modal.component.js b/ui/app/components/modal/modal.component.js
new file mode 100644
index 000000000..81bdd0010
--- /dev/null
+++ b/ui/app/components/modal/modal.component.js
@@ -0,0 +1,78 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../button'
+
+export default class Modal extends PureComponent {
+ static propTypes = {
+ children: PropTypes.node,
+ // Header text
+ headerText: PropTypes.string,
+ // Submit button (right button)
+ onSubmit: PropTypes.func,
+ submitType: PropTypes.string,
+ submitText: PropTypes.string,
+ // Cancel button (left button)
+ onCancel: PropTypes.func,
+ cancelType: PropTypes.string,
+ cancelText: PropTypes.string,
+ }
+
+ static defaultProps = {
+ submitType: 'primary',
+ cancelType: 'default',
+ }
+
+ render () {
+ const {
+ children,
+ headerText,
+ onSubmit,
+ submitType,
+ submitText,
+ onCancel,
+ cancelType,
+ cancelText,
+ } = this.props
+
+ return (
+ <div className="modal-container">
+ {
+ headerText && (
+ <div className="modal-container__header">
+ <div className="modal-container__header-text">
+ { headerText }
+ </div>
+ <div
+ className="modal-container__header-close"
+ onClick={() => onCancel()}
+ />
+ </div>
+ )
+ }
+ <div className="modal-container__content">
+ { children }
+ </div>
+ <div className="modal-container__footer">
+ {
+ onCancel && (
+ <Button
+ type={cancelType}
+ onClick={onCancel}
+ className="modal-container__footer-button"
+ >
+ { cancelText }
+ </Button>
+ )
+ }
+ <Button
+ type={submitType}
+ onClick={onSubmit}
+ className="modal-container__footer-button"
+ >
+ { submitText }
+ </Button>
+ </div>
+ </div>
+ )
+ }
+}