arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 16:38:08 +00:00
Code Issues Releases Wiki Activity

Notification wrapper added, indent

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-28 14:33:42 +02:00
parent b029fab397
commit 73f62d82f9
3 changed files with 34 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Notification/index.js
View File

@ -5,6 +5,8 @@ import React from 'react';
import { H2 } from 'components/Heading';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import styled from 'styled-components';
import colors from 'config/colors';
import * as NOTIFICATION from 'actions/constants/notification';
import * as NotificationActions from 'actions/NotificationActions';
@ -27,6 +29,18 @@ type NProps = {
loading?: boolean
}
const Wrapper = styled.div`
position: relative;
color: ${colors.INFO_PRIMARY};
background: ${colors.INFO_SECONDARY};
padding: 24px 48px 24px 80px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
text-align: left;
`;
export const Notification = (props: NProps): React$Element<string> => {
const className = `notification ${props.className}`;
const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
@ -35,7 +49,7 @@ export const Notification = (props: NProps): React$Element<string> => {
)) : null;
return (
<div className={className}>
<Wrapper className={className}>
{ props.cancelable ? (
<button
className="notification-close transparent"
@ -57,7 +71,7 @@ export const Notification = (props: NProps): React$Element<string> => {
/>
) : null }
</div>
</Wrapper>
);
};

9
src/styles/notification.less
View File

@ -1,13 +1,4 @@
.notification {
position: relative;
color: @color_info_primary;
background: @color_info_secondary;
padding: 24px 48px 24px 80px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
text-align: left;
.notification-body {
flex: 1;

22
src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
View File

@ -53,21 +53,35 @@ class MenuItems extends Component {
return (
<Wrapper>
<Item onClick={() => this.onDeviceMenuClick('settings', this.props.device)}>
<Icon icon={icons.COG} size={25} color={colors.TEXT_SECONDARY} />
<Icon
icon={icons.COG}
size={25}
color={colors.TEXT_SECONDARY}
/>
<Label>Device settings</Label>
</Item>
<Item onClick={() => this.onDeviceMenuClick('forget', this.props.device)}>
<Icon icon={icons.EJECT} size={25} color={colors.TEXT_SECONDARY} />
<Icon
icon={icons.EJECT}
size={25}
color={colors.TEXT_SECONDARY}
/>
<Label>Forget</Label>
</Item>
{this.showClone() && (
<Item onClick={() => this.onDeviceMenuClick('clone', this.props.device)}>
<Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
<Icon
icon={icons.T1}
size={25}
color={colors.TEXT_SECONDARY}
/>
<Label>Create hidden wallet</Label>
</Item>
)}
{this.showRenewSession() && (
<Item onClick={() => this.onDeviceMenuClick('reload')}>
<Item
onClick={() => this.onDeviceMenuClick('reload')}
>
<Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
<Label>Renew session</Label>
</Item>