From ea804969cd21ca90c4ecbfb716df1b9f703255b7 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Mon, 14 Jan 2019 13:11:26 +0100 Subject: [PATCH] fix notification layout --- src/components/Notification/index.js | 94 +++++++++++++++------------- 1 file changed, 51 insertions(+), 43 deletions(-) diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js index 6eade847..a8622de7 100644 --- a/src/components/Notification/index.js +++ b/src/components/Notification/index.js @@ -27,14 +27,20 @@ type Props = { const Wrapper = styled.div` width: 100%; position: relative; - padding: 24px 48px 9px 24px; + display: flex; + justify-content: center; + color: ${props => getPrimaryColor(props.type)}; + background: ${props => getSecondaryColor(props.type)}; +`; + +const Content = styled.div` + width: 100%; + max-width: 1170px; + padding: 24px; display: flex; flex-direction: row; text-align: left; - justify-content: center; align-items: center; - color: ${props => getPrimaryColor(props.type)}; - background: ${props => getSecondaryColor(props.type)}; `; const Body = styled.div` @@ -42,7 +48,6 @@ const Body = styled.div` `; const Message = styled.div` - padding-bottom: 13px; font-size: ${FONT_SIZE.SMALL}; `; @@ -56,7 +61,9 @@ const CloseClick = styled.div` position: absolute; right: 0; top: 0; - padding: 20px 10px 0 0; + padding-right: inherit; + padding-top: inherit; + cursor: pointer; `; const StyledIcon = styled(Icon)` @@ -86,7 +93,6 @@ const ActionContent = styled.div` display: flex; justify-content: right; align-items: flex-end; - padding-bottom: 14px; `; const Notification = (props: Props): React$Element => { @@ -94,43 +100,45 @@ const Notification = (props: Props): React$Element => { return ( - {props.loading && } - {props.cancelable && ( - close()}> - - - )} - - - - - - { props.title } - { props.message ? {props.message} : '' } - - - - {props.actions && props.actions.length > 0 && ( - - {props.actions.map(action => ( - { close(); action.callback(); }} - >{action.label} - - ))} - + + {props.loading && } + {props.cancelable && ( + close()}> + + )} - + + + + + + { props.title } + { props.message ? {props.message} : '' } + + + + {props.actions && props.actions.length > 0 && ( + + {props.actions.map(action => ( + { close(); action.callback(); }} + >{action.label} + + ))} + + )} + + ); };