From f8d8ff02d13b72fa9198ea5f203d228da4e050b6 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 17 Jan 2019 17:20:16 +0100 Subject: [PATCH 01/14] add missing margin-top to textarea's error message --- src/components/Textarea/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index b0dbad2c..1566b416 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -109,6 +109,7 @@ const TopLabel = styled.span` `; const BottomText = styled.span` + margin-top: 10px; font-size: ${FONT_SIZE.SMALL}; color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)}; `; From dbc5e868980072077aff0ac6446d0bb314357e13 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 17 Jan 2019 17:57:03 +0100 Subject: [PATCH 02/14] bigger close button for modals --- src/components/modals/confirm/UnverifiedAddress/index.js | 2 +- src/components/modals/device/Duplicate/index.js | 2 +- src/components/modals/device/WalletType/index.js | 2 +- src/components/modals/external/Cardano/index.js | 2 +- src/components/modals/external/Nem/index.js | 2 +- src/components/modals/external/Stellar/index.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/modals/confirm/UnverifiedAddress/index.js b/src/components/modals/confirm/UnverifiedAddress/index.js index 2246cdf1..b70de888 100644 --- a/src/components/modals/confirm/UnverifiedAddress/index.js +++ b/src/components/modals/confirm/UnverifiedAddress/index.js @@ -99,7 +99,7 @@ class ConfirmUnverifiedAddress extends PureComponent { return ( - +

{ deviceStatus }

To prevent phishing attacks, you should verify the address on your Trezor first. { claim } to continue with the verification process. diff --git a/src/components/modals/device/Duplicate/index.js b/src/components/modals/device/Duplicate/index.js index 78d3d5f8..735c208e 100644 --- a/src/components/modals/device/Duplicate/index.js +++ b/src/components/modals/device/Duplicate/index.js @@ -138,7 +138,7 @@ class DuplicateDevice extends PureComponent { return ( - +

Clone { device.label }?

This will create new instance of device which can be used with different passphrase diff --git a/src/components/modals/device/WalletType/index.js b/src/components/modals/device/WalletType/index.js index 89d7d600..ab88c449 100644 --- a/src/components/modals/device/WalletType/index.js +++ b/src/components/modals/device/WalletType/index.js @@ -105,7 +105,7 @@ class WalletType extends PureComponent { { device.state && ( diff --git a/src/components/modals/external/Cardano/index.js b/src/components/modals/external/Cardano/index.js index 8479fed9..376d41b1 100644 --- a/src/components/modals/external/Cardano/index.js +++ b/src/components/modals/external/Cardano/index.js @@ -48,7 +48,7 @@ const CardanoWallet = (props: Props) => ( diff --git a/src/components/modals/external/Nem/index.js b/src/components/modals/external/Nem/index.js index 74fcefd0..ff852709 100644 --- a/src/components/modals/external/Nem/index.js +++ b/src/components/modals/external/Nem/index.js @@ -46,7 +46,7 @@ const NemWallet = (props: Props) => ( diff --git a/src/components/modals/external/Stellar/index.js b/src/components/modals/external/Stellar/index.js index c9a005a0..040b3f6f 100644 --- a/src/components/modals/external/Stellar/index.js +++ b/src/components/modals/external/Stellar/index.js @@ -48,7 +48,7 @@ const StellarWallet = (props: Props) => ( From d919dc00d781610c7982d3eb663a84a33f49ee25 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 17 Jan 2019 17:58:28 +0100 Subject: [PATCH 03/14] change paddings in Log component --- src/components/Log/index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Log/index.js b/src/components/Log/index.js index 823a58b0..f39442eb 100644 --- a/src/components/Log/index.js +++ b/src/components/Log/index.js @@ -22,7 +22,7 @@ const Wrapper = styled.div` position: relative; color: ${colors.INFO_PRIMARY}; background: ${colors.INFO_SECONDARY}; - padding: 24px 48px; + padding: 24px; display: flex; flex-direction: column; text-align: left; @@ -32,9 +32,10 @@ const Wrapper = styled.div` const Click = styled.div` cursor: pointer; position: absolute; - top: 8px; + top: 0; right: 0; - padding: 12px; + padding-right: inherit; + padding-top: inherit; color: inherit; transition: opacity 0.3s; @@ -61,7 +62,7 @@ const Log = (props: Props): ?React$Element => { return ( - +

Log

Attention: The log contains your XPUBs. Anyone with your XPUBs can see your account history. From a17ba7dfce081a667d701097ecbfd97aa68e7b13 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 17 Jan 2019 18:22:05 +0100 Subject: [PATCH 04/14] style set default button as a green link --- .../Send/ethereum/components/AdvancedForm/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js index 6341c8d6..5c565db5 100644 --- a/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js +++ b/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js @@ -4,6 +4,7 @@ import * as React from 'react'; import styled from 'styled-components'; import colors from 'config/colors'; +import Link from 'components/Link'; import Input from 'components/inputs/Input'; import Textarea from 'components/Textarea'; import Tooltip from 'components/Tooltip'; @@ -117,7 +118,10 @@ const Right = styled.div` display: flex; flex-direction: row; font-size: ${FONT_SIZE.SMALL}; - cursor: pointer; +`; + +const StyledLink = styled(Link)` + white-space: nowrap; `; // stateless component @@ -190,8 +194,8 @@ const AdvancedForm = (props: Props) => { { showDefaultGasLimitButton && ( - setDefaultGasLimit()}> - Set default + + Set default ) } From 2e5f7f6c4629c57ed5fd03bbdd448dcf30594c19 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Fri, 18 Jan 2019 13:46:11 +0100 Subject: [PATCH 05/14] fix title font size in WalletType modal --- src/components/modals/device/WalletType/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/modals/device/WalletType/index.js b/src/components/modals/device/WalletType/index.js index ab88c449..13b6fcdd 100644 --- a/src/components/modals/device/WalletType/index.js +++ b/src/components/modals/device/WalletType/index.js @@ -7,7 +7,7 @@ import styled, { css } from 'styled-components'; import icons from 'config/icons'; import colors from 'config/colors'; -import { H3 } from 'components/Heading'; +import { H2 } from 'components/Heading'; import P from 'components/Paragraph'; import Button from 'components/Button'; import Tooltip from 'components/Tooltip'; @@ -36,7 +36,7 @@ const Header = styled.div` color: ${colors.TEXT_PRIMARY}; `; -const StyledHeading = styled(H3)` +const StyledHeading = styled(H2)` padding-top: 30px; `; From 1aae8dc0b26ad5b1cdefcc077d35db1d8c72b9e0 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Fri, 18 Jan 2019 16:09:31 +0100 Subject: [PATCH 06/14] device counter centering using flexbox --- src/views/Wallet/components/LeftNavigation/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index cca5eab1..c98c7b72 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -24,13 +24,14 @@ const Header = styled(DeviceHeader)` `; const Counter = styled.div` + display: flex; + justify-content: center; + align-items: center; border: 1px solid ${colors.DIVIDER}; border-radius: 50%; color: ${colors.TEXT_SECONDARY}; width: 24px; height: 24px; - line-height: 22px; - text-align: center; font-size: ${FONT_SIZE.COUNTER}; margin-right: 8px; `; From aa3f037ddf12c1ee2e0d9496f249babf2752d2bd Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Sat, 19 Jan 2019 19:34:25 +0100 Subject: [PATCH 07/14] prevent token name from breaking to multiple lines if unnecessary --- .../Wallet/views/Account/Summary/components/Token/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Wallet/views/Account/Summary/components/Token/index.js b/src/views/Wallet/views/Account/Summary/components/Token/index.js index 4999b447..69509647 100644 --- a/src/views/Wallet/views/Account/Summary/components/Token/index.js +++ b/src/views/Wallet/views/Account/Summary/components/Token/index.js @@ -46,7 +46,7 @@ const TokenText = styled.div` `; const TokenName = styled(TokenText)` - flex: 0 0 0; + flex: 1 1 0; padding-right: 5px; `; From 85326fdc861dc9fc0f722d401b2f6c703042544f Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Sat, 19 Jan 2019 20:07:51 +0100 Subject: [PATCH 08/14] fix styles for forget modal --- src/components/modals/device/Forget/index.js | 21 ++++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/modals/device/Forget/index.js b/src/components/modals/device/Forget/index.js index b0607d4d..89c904a7 100644 --- a/src/components/modals/device/Forget/index.js +++ b/src/components/modals/device/Forget/index.js @@ -4,7 +4,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { H3 } from 'components/Heading'; +import { H2 } from 'components/Heading'; import P from 'components/Paragraph'; import Button from 'components/Button'; @@ -19,21 +19,20 @@ type Props = { const Wrapper = styled.div` width: 360px; - padding: 24px 48px; + padding: 30px 48px; `; const StyledP = styled(P)` - padding: 7px 0px; -`; - -const StyledButton = styled(Button)` - margin: 0 0 10px 0; + padding: 20px 0px; `; const Row = styled.div` display: flex; flex-direction: column; - padding: 10px 0; + + Button + Button { + margin-top: 10px; + } `; class ForgetDevice extends PureComponent { @@ -62,11 +61,11 @@ class ForgetDevice extends PureComponent { render() { return ( -

Forget { this.props.device.instanceLabel }?

+

Forget { this.props.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()}>Forget - Don't forget + + ); From 34654f9a50217eaea50eab2ada17209bdf664e3c Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Sat, 19 Jan 2019 20:37:59 +0100 Subject: [PATCH 09/14] minor css changes, top and bottom padding on wrappers unified to 30px --- src/components/modals/confirm/Address/index.js | 2 +- src/components/modals/confirm/SignTx/index.js | 4 ++-- .../modals/confirm/UnverifiedAddress/index.js | 15 +++++++-------- .../modals/device/Duplicate/index.js | 2 +- src/components/modals/device/Remember/index.js | 18 +++++++++--------- .../modals/device/WalletType/index.js | 2 +- .../modals/external/Cardano/index.js | 2 +- src/components/modals/external/Nem/index.js | 4 ++-- .../modals/external/Stellar/index.js | 2 +- .../modals/passphrase/Passphrase/index.js | 2 +- src/components/modals/passphrase/Type/index.js | 2 +- src/components/modals/pin/Invalid/index.js | 2 +- src/components/modals/pin/Pin/index.js | 2 +- .../Landing/components/BetaDisclaimer/index.js | 2 +- 14 files changed, 30 insertions(+), 31 deletions(-) diff --git a/src/components/modals/confirm/Address/index.js b/src/components/modals/confirm/Address/index.js index 97538a97..93c49404 100644 --- a/src/components/modals/confirm/Address/index.js +++ b/src/components/modals/confirm/Address/index.js @@ -17,7 +17,7 @@ const Wrapper = styled.div` `; const Header = styled.div` - padding: 24px 48px; + padding: 30px 48px; `; const Content = styled.div` diff --git a/src/components/modals/confirm/SignTx/index.js b/src/components/modals/confirm/SignTx/index.js index 69278370..ad9ccd86 100644 --- a/src/components/modals/confirm/SignTx/index.js +++ b/src/components/modals/confirm/SignTx/index.js @@ -24,13 +24,13 @@ const Wrapper = styled.div` `; const Header = styled.div` - padding: 24px 48px; + padding: 30px 48px; `; const Content = styled.div` border-top: 1px solid ${colors.DIVIDER}; background: ${colors.MAIN}; - padding: 24px 48px; + padding: 30px 48px; border-radius: 4px; `; diff --git a/src/components/modals/confirm/UnverifiedAddress/index.js b/src/components/modals/confirm/UnverifiedAddress/index.js index b70de888..871068c0 100644 --- a/src/components/modals/confirm/UnverifiedAddress/index.js +++ b/src/components/modals/confirm/UnverifiedAddress/index.js @@ -31,21 +31,20 @@ const StyledLink = styled(Link)` const Wrapper = styled.div` width: 370px; - padding: 24px 48px; + padding: 30px 48px; `; const StyledP = styled(P)` - padding: 10px 0px; + padding: 20px 0px; `; const Row = styled.div` display: flex; flex-direction: column; - padding: 10px 0; -`; -const StyledButton = styled(Button)` - margin: 0 0 10px 0; + Button + Button { + margin-top: 10px; + } `; class ConfirmUnverifiedAddress extends PureComponent { @@ -104,8 +103,8 @@ class ConfirmUnverifiedAddress extends PureComponent {

{ deviceStatus }

To prevent phishing attacks, you should verify the address on your Trezor first. { claim } to continue with the verification process. - (!account ? this.verifyAddress() : 'false')}>Try again - this.showUnverifiedAddress()}>Show unverified address + + ); diff --git a/src/components/modals/device/Duplicate/index.js b/src/components/modals/device/Duplicate/index.js index 735c208e..75aebb38 100644 --- a/src/components/modals/device/Duplicate/index.js +++ b/src/components/modals/device/Duplicate/index.js @@ -41,7 +41,7 @@ const StyledLink = styled(Link)` const Wrapper = styled.div` width: 360px; - padding: 24px 48px; + padding: 30px 48px; `; const Column = styled.div` diff --git a/src/components/modals/device/Remember/index.js b/src/components/modals/device/Remember/index.js index 38de9115..02dde355 100644 --- a/src/components/modals/device/Remember/index.js +++ b/src/components/modals/device/Remember/index.js @@ -31,12 +31,12 @@ const ButtonContent = styled.div` `; const StyledP = styled(P)` - padding: 10px 0; + padding: 20px 0; `; const Wrapper = styled.div` width: 360px; - padding: 24px 48px; + padding: 30px 48px; `; const Text = styled.div` @@ -46,10 +46,10 @@ const Text = styled.div` const Column = styled.div` display: flex; flex-direction: column; -`; -const StyledButton = styled(Button)` - margin: 5px 0; + Button + Button { + margin-top: 10px; + } `; const StyledLoader = styled(Loader)` @@ -128,7 +128,7 @@ class RememberDevice extends PureComponent {

Forget {label}?

Would you like Trezor Wallet to forget your { devicePlural }, so that it is still visible even while disconnected? - this.forget()}> + ); diff --git a/src/components/modals/device/WalletType/index.js b/src/components/modals/device/WalletType/index.js index 13b6fcdd..ca91bc99 100644 --- a/src/components/modals/device/WalletType/index.js +++ b/src/components/modals/device/WalletType/index.js @@ -37,7 +37,7 @@ const Header = styled.div` `; const StyledHeading = styled(H2)` - padding-top: 30px; + padding: 30px 48px 10px 48px; `; const StyledLink = styled(Link)` diff --git a/src/components/modals/external/Cardano/index.js b/src/components/modals/external/Cardano/index.js index 376d41b1..645be885 100644 --- a/src/components/modals/external/Cardano/index.js +++ b/src/components/modals/external/Cardano/index.js @@ -26,7 +26,7 @@ const Wrapper = styled.div` `; const StyledButton = styled(Button)` - margin: 10px 0 10px 0; + margin-top: 10px; width: 100%; `; diff --git a/src/components/modals/external/Nem/index.js b/src/components/modals/external/Nem/index.js index ff852709..993e097f 100644 --- a/src/components/modals/external/Nem/index.js +++ b/src/components/modals/external/Nem/index.js @@ -22,11 +22,11 @@ type Props = { const Wrapper = styled.div` width: 100%; max-width: 620px; - padding: 24px 48px; + padding: 30px 48px; `; const StyledButton = styled(Button)` - margin: 0 0 10px 0; + margin-top: 10px; width: 100%; `; diff --git a/src/components/modals/external/Stellar/index.js b/src/components/modals/external/Stellar/index.js index 040b3f6f..2ba4a863 100644 --- a/src/components/modals/external/Stellar/index.js +++ b/src/components/modals/external/Stellar/index.js @@ -26,7 +26,7 @@ const Wrapper = styled.div` `; const StyledButton = styled(Button)` - margin: 10px 0 10px 0; + margin-top: 10px; width: 100%; `; diff --git a/src/components/modals/passphrase/Passphrase/index.js b/src/components/modals/passphrase/Passphrase/index.js index 0ad3a3f4..553be60e 100644 --- a/src/components/modals/passphrase/Passphrase/index.js +++ b/src/components/modals/passphrase/Passphrase/index.js @@ -31,7 +31,7 @@ type State = { }; const Wrapper = styled.div` - padding: 24px 48px; + padding: 30px 48px; max-width: 390px; `; diff --git a/src/components/modals/passphrase/Type/index.js b/src/components/modals/passphrase/Type/index.js index ce659800..fa44d5b1 100644 --- a/src/components/modals/passphrase/Type/index.js +++ b/src/components/modals/passphrase/Type/index.js @@ -19,7 +19,7 @@ type Props = { const Wrapper = styled.div` width: 360px; - padding: 24px 48px; + padding: 30px 48px; `; const Header = styled.div``; diff --git a/src/components/modals/pin/Invalid/index.js b/src/components/modals/pin/Invalid/index.js index e69d7554..a69bbd64 100644 --- a/src/components/modals/pin/Invalid/index.js +++ b/src/components/modals/pin/Invalid/index.js @@ -14,7 +14,7 @@ type Props = { } const Wrapper = styled.div` - padding: 24px 48px; + padding: 30px 48px; `; const InvalidPin = (props: Props) => ( diff --git a/src/components/modals/pin/Pin/index.js b/src/components/modals/pin/Pin/index.js index ed74e834..31cf42d3 100644 --- a/src/components/modals/pin/Pin/index.js +++ b/src/components/modals/pin/Pin/index.js @@ -25,7 +25,7 @@ type State = { } const Wrapper = styled.div` - padding: 24px 48px; + padding: 30px 48px; `; const InputRow = styled.div` diff --git a/src/views/Landing/components/BetaDisclaimer/index.js b/src/views/Landing/components/BetaDisclaimer/index.js index 61c54570..d9dfd824 100644 --- a/src/views/Landing/components/BetaDisclaimer/index.js +++ b/src/views/Landing/components/BetaDisclaimer/index.js @@ -36,7 +36,7 @@ const ModalWindow = styled.div` text-align: center; width: 100%; max-width: 620px; - padding: 24px 48px; + padding: 30px 48px; `; const StyledP = styled(P)` From 454410fd5c024f7b51807d01e9ba39f7c7d21dee Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Sat, 19 Jan 2019 23:05:16 +0100 Subject: [PATCH 10/14] improved styling of device menu --- .../components/DeviceMenu/components/MenuItems/index.js | 2 +- .../components/LeftNavigation/components/DeviceMenu/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js index 53fc615b..0abfb858 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js @@ -9,7 +9,7 @@ import { FONT_SIZE } from 'config/variables'; const Wrapper = styled.div` padding: 0px 24px 8px 19px; - border-bottom: 1px solid ${colors.DIVIDER}; + box-shadow: 0 3px 8px rgba(0,0,0,0.06); background: ${colors.WHITE}; `; diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 9cdc96be..8899072f 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -10,7 +10,7 @@ import DeviceList from './components/DeviceList'; import type { Props } from '../common'; -import AsideDivider from '../Divider'; +import Divider from '../Divider'; const Wrapper = styled.div``; const ButtonWrapper = styled.div` @@ -104,7 +104,7 @@ class DeviceMenu extends PureComponent { return ( {this.showMenuItems() && } - {this.showDivider() && } + {this.showDivider() && } Date: Sat, 19 Jan 2019 23:11:44 +0100 Subject: [PATCH 11/14] add missing wallet border radius --- .../LeftNavigation/components/StickyContainer/index.js | 5 +++++ src/views/Wallet/index.js | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js index 4d10baef..2362ac81 100644 --- a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js @@ -30,6 +30,11 @@ const AsideWrapper = styled.aside.attrs(props => ({ overflow: hidden; background: ${colors.MAIN}; border-right: 1px solid ${colors.DIVIDER}; + border-top-left-radius: 4px; + + @media screen and (max-width: 1170px) { + border-top-left-radius: 0px; + } `; const StickyContainerWrapper = styled.div.attrs(props => ({ diff --git a/src/views/Wallet/index.js b/src/views/Wallet/index.js index 1a63e5f5..f6063eb9 100644 --- a/src/views/Wallet/index.js +++ b/src/views/Wallet/index.js @@ -66,6 +66,11 @@ const MainContent = styled.article` display: flex; flex-direction: column; overflow: auto; + border-top-right-radius: 4px; + + @media screen and (max-width: 1170px) { + border-top-right-radius: 0px; + } `; const Navigation = styled.nav` From 7f07564ab65eed1271c37866e148afbf27bc537a Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Sat, 19 Jan 2019 23:30:22 +0100 Subject: [PATCH 12/14] fix font weight in Divider to match design guidelines --- .../components/LeftNavigation/components/Divider/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js index 8f29337e..4b722a7d 100644 --- a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import colors from 'config/colors'; -import { FONT_SIZE } from 'config/variables'; +import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; const Wrapper = styled.div` display: flex; @@ -18,13 +18,17 @@ const Wrapper = styled.div` `} `; +const TextLeft = styled.p` + font-weight: ${FONT_WEIGHT.MEDIUM}; +`; + const Divider = ({ textLeft, textRight, hasBorder = false, }) => ( -

{textLeft}

+ {textLeft}

{textRight}

 ); From 1280800c91bea2f503dab643b8f9e9e203c19137 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Sun, 20 Jan 2019 00:15:54 +0100 Subject: [PATCH 13/14] cursor pointer on buttons in Pin modal --- src/components/modals/pin/Pin/components/Button/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/modals/pin/Pin/components/Button/index.js b/src/components/modals/pin/Pin/components/Button/index.js index 5b592dc6..65b8c0a4 100644 --- a/src/components/modals/pin/Pin/components/Button/index.js +++ b/src/components/modals/pin/Pin/components/Button/index.js @@ -22,6 +22,7 @@ const Wrapper = styled.button` border: 1px solid ${colors.DIVIDER}; background: ${colors.WHITE}; transition: all 0.3s; + cursor: pointer; &:first-child { margin-left: 0px; From 67a1b6af4ef871e9c03099dca89a991da165cbec Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Mon, 21 Jan 2019 15:42:48 +0100 Subject: [PATCH 14/14] fix overlap of action button and close button in notification layout --- src/components/Notification/index.js | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js index a8622de7..721a7463 100644 --- a/src/components/Notification/index.js +++ b/src/components/Notification/index.js @@ -58,11 +58,8 @@ const Title = styled.div` `; const CloseClick = styled.div` - position: absolute; - right: 0; - top: 0; - padding-right: inherit; - padding-top: inherit; + margin-left: 24px; + align-self: flex-start; cursor: pointer; `; @@ -102,15 +99,6 @@ const Notification = (props: Props): React$Element => { {props.loading && } - {props.cancelable && ( - close()}> - - - )} => { )} + {props.cancelable && ( + close()}> + + + )} );