From 5a3bb77fb05ed1f0c0f5f03f370ebc6b6c84687e Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 29 Aug 2018 15:48:05 +0200 Subject: [PATCH] Finalized notifiction refactor --- src/components/Notification/index.js | 53 +++++++++++++---------- src/views/Wallet/views/Dashboard/index.js | 42 ------------------ 2 files changed, 29 insertions(+), 66 deletions(-) diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js index adbdf83c..9505e26f 100644 --- a/src/components/Notification/index.js +++ b/src/components/Notification/index.js @@ -19,8 +19,6 @@ const Wrapper = styled.div` padding: 24px 48px 24px 24px; display: flex; flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; text-align: left; ${props => props.type === 'info' && css` @@ -45,12 +43,13 @@ const Wrapper = styled.div` `; const Body = styled.div` - flex: 1; display: flex; margin-right: 40px; + flex: 1; `; const Title = styled.div` + padding-bottom: 5px; font-weight: ${FONT_WEIGHT.BIGGER}; `; @@ -64,20 +63,25 @@ const CloseClick = styled.div` `; const Message = styled.div` - padding: 5px 0 0 0; font-size: ${FONT_SIZE.SMALLER}; `; -const IconContent = styled.div` - padding-right: 5px; -`; - const StyledIcon = styled(Icon)` position: relative; top: -7px; `; -const MessageContent = styled.div``; +const MessageContent = styled.div` + height: 20px; + display: flex; +`; + +const Texts = styled.div` + display: flex; + flex-direction: column; +`; + +const AdditionalContent = styled.div``; export const Notification = (props: NProps): React$Element => { const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action @@ -117,25 +121,25 @@ export const Notification = (props: NProps): React$Element => { )} - + - - - { props.title } - { props.message && ( - -

- - ) } + + { props.title } + { props.message && ( + +

+ + ) } + - {props.actions && props.actions.length > 0 && ( - - {props.actions - .map(action => ( + + {props.actions && props.actions.length > 0 && ( + + {props.actions.map(action => ( => { onClick={() => { close(); action.callback(); }} /> ))} - - )} + + )} + ); }; diff --git a/src/views/Wallet/views/Dashboard/index.js b/src/views/Wallet/views/Dashboard/index.js index ffdf88ff..1c59f343 100644 --- a/src/views/Wallet/views/Dashboard/index.js +++ b/src/views/Wallet/views/Dashboard/index.js @@ -2,8 +2,6 @@ import React from 'react'; import styled from 'styled-components'; import { connect } from 'react-redux'; -import { Notification } from 'components/Notification'; - import { H2 } from 'components/Heading'; import DashboardImg from 'images/dashboard.png'; @@ -34,46 +32,6 @@ const P = styled.p` const Dashboard = () => ( - false, - }]} - /> - - false, - }]} - /> - - false, - }]} - /> - - false, - }]} - /> Dashboard

Please select your coin