From 8b519544d765ed00bab5894fde7e3268d0201ecd Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Wed, 29 Aug 2018 12:07:47 +0200 Subject: [PATCH] Styled notification content --- src/components/Icon/index.js | 4 +- src/components/Notification/index.js | 74 +++++++++++++++------------- src/config/icons.js | 9 ++++ src/styles/notification.less | 11 ----- 4 files changed, 52 insertions(+), 46 deletions(-) diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 45e1644e..4150e290 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -28,9 +28,10 @@ const SvgWrapper = styled.svg` const Path = styled.path``; const Icon = ({ - icon, size = 32, color = 'black', isActive, canAnimate, + icon, size = 32, color = 'black', isActive, canAnimate, className, }) => ( , - close: (notif?: any) => Action -} - -type NProps = { - key?: number; - className: string; - cancelable?: boolean; - title: string; - message?: string; - actions?: Array; - close?: typeof NotificationActions.close, - loading?: boolean -} - const Wrapper = styled.div` position: relative; color: ${colors.TEXT_PRIMARY}; background: ${colors.TEXT_SECONDARY}; - padding: 24px 48px 24px 80px; + padding: 24px 48px 24px 24px; display: flex; flex-direction: row; flex-wrap: wrap; @@ -66,14 +46,33 @@ const Wrapper = styled.div` const Body = styled.div` flex: 1; - margin-right: 24px; + display: flex; + margin-right: 40px; `; -const ActionContent = styled.div` +const Title = styled.div` + font-weight: ${FONT_WEIGHT.BIGGER}; `; +const ActionContent = styled.div``; 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: -6px; +`; + +const MessageContent = styled.div``; + export const Notification = (props: NProps): React$Element => { const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action @@ -101,31 +100,38 @@ export const Notification = (props: NProps): React$Element => { return ( - { props.cancelable && ( + {props.loading && } + {props.cancelable && ( close()}> - ) - } + )} -

{ props.title }

- { props.message &&

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

+ + ) } + - { props.actions && props.actions.length > 0 && ( + {props.actions && props.actions.length > 0 && ( {props.actions .map(action => (