diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js index e977cb59..5a582df3 100644 --- a/src/components/Loader/index.js +++ b/src/components/Loader/index.js @@ -35,11 +35,15 @@ const CircleWrapper = styled.circle` `}; `; +const StyledParagraph = styled(Paragraph)` + color: ${props => (props.isWhiteText ? colors.WHITE : colors.TEXT_PRIMARY)}; +`; + const Loader = ({ - className, text, size = 100, + className, text, isWhiteText = false, size = 100, }) => ( - {text} + {text} { }, disabled, isWhite = false, isWebUsb = false, isTransparent = false, + children, className, text, icon, onClick = () => { }, disabled, isWhite = false, isWebUsb = false, isTransparent = false, }) => ( )} - {text} + {children} ); Button.propTypes = { + children: PropTypes.element.isRequired, className: PropTypes.string, onClick: PropTypes.func, disabled: PropTypes.bool, diff --git a/src/components/modal/ForgetDevice/index.js b/src/components/modal/ForgetDevice/index.js index 2484985d..d0b09cd0 100644 --- a/src/components/modal/ForgetDevice/index.js +++ b/src/components/modal/ForgetDevice/index.js @@ -4,7 +4,7 @@ import { H3 } from 'components/Heading'; import P from 'components/Paragraph'; import Button from 'components/buttons/Button'; -const Remember = styled.div` +const Wrapper = styled.div` width: 360px; padding: 24px 48px; `; @@ -51,14 +51,14 @@ class ForgetDevice extends Component { const { device } = this.props.modal; const { onCancel } = this.props.modalActions; return ( - -

Forget { device.instanceLabel } ?

+ +

Forget { device.instanceLabel }?

Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your TREZOR again. this.forget()} text="Forget" /> - + ); } } diff --git a/src/components/modal/RememberDevice.js b/src/components/modal/RememberDevice/index.js similarity index 61% rename from src/components/modal/RememberDevice.js rename to src/components/modal/RememberDevice/index.js index 8d716176..cb661436 100644 --- a/src/components/modal/RememberDevice.js +++ b/src/components/modal/RememberDevice/index.js @@ -1,8 +1,10 @@ /* @flow */ - - import React, { Component } from 'react'; +import styled from 'styled-components'; +import { H3 } from 'components/Heading'; +import P from 'components/Paragraph'; import Loader from 'components/Loader'; +import Button from 'components/buttons/Button'; import type { Props } from './index'; @@ -11,6 +13,40 @@ type State = { ticker?: number; } +const ButtonContent = styled.div` + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; +`; + +const StyledP = styled(P)` + padding: 10px 0; +`; + +const Wrapper = styled.div` + width: 360px; + padding: 24px 48px; +`; + +const Text = styled.div` + padding-right: 10px; +`; + +const Column = styled.div` + display: flex; + flex-direction: column; +`; + +const StyledButton = styled(Button)` + margin: 5px 0; +`; + +const StyledLoader = styled(Loader)` + position: absolute; + left: 200px; +`; + export default class RememberDevice extends Component { keyboardHandler: (event: KeyboardEvent) => void; @@ -86,12 +122,27 @@ export default class RememberDevice extends Component { }); } return ( -
-

Forget {label}?

-

Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?

- - -
+ +

Forget {label}?

+ Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected? + + this.forget()}> + + Forget + + + + onRememberDevice(device)} + >Remember + + + ); } } \ No newline at end of file diff --git a/src/components/modal/index.js b/src/components/modal/index.js index dbd01584..57e5d8fd 100644 --- a/src/components/modal/index.js +++ b/src/components/modal/index.js @@ -1,10 +1,10 @@ /* @flow */ - - import React, { Component } from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; +import styled from 'styled-components'; +import colors from 'config/colors'; import { CSSTransition, Transition } from 'react-transition-group'; @@ -65,12 +65,35 @@ const Fade = ({ children, ...props }) => ( ); +const ModalContainer = styled.div` + position: fixed; + z-index: 10000; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + background: rgba(0, 0, 0, 0.35); + display: flex; + flex-direction: column; + align-items: center; + overflow: auto; + padding: 20px; +`; + +const ModalWindow = styled.div` + margin: auto; + position: relative; + border-radius: 4px; + background-color: ${colors.WHITE}; + text-align: center; +`; + class Modal extends Component { render() { if (!this.props.modal.opened) return null; - const { opened, windowType } = this.props.modal; - + const { opened } = this.props.modal; + const windowType = CONNECT.REMEMBER_REQUEST; let component = null; switch (windowType) { case UI.REQUEST_PIN: @@ -86,8 +109,6 @@ class Modal extends Component { component = (); break; // case "ButtonRequest_Address" : - // component = () - // break; case 'ButtonRequest_PassphraseType': component = (); break; @@ -114,11 +135,11 @@ class Modal extends Component { if (opened) { ch = ( -
-
+ + { component } -
-
+ + ); } diff --git a/src/styles/modal.less b/src/styles/modal.less index 7ba6bc93..06fae1ac 100644 --- a/src/styles/modal.less +++ b/src/styles/modal.less @@ -1,27 +1,4 @@ .modal-container { - position: fixed; - z-index: 10000; - width: 100%; - height: 100%; - top: 0px; - left: 0px; - background: rgba(0, 0, 0, 0.35); - display: flex; - flex-direction: column; - align-items: center; - overflow: auto; - padding: 20px; - - .modal-window { - margin: auto; - // padding: 24px 48px; - position: relative; - border-radius: 4px; - background-color: @color_white; - text-align: center; - // overflow: hidden; - } - h3 { color: @color_text_primary; font-size: 16px;