From 53743d8f8aa7d5a7eaaa69f1a7901233c47a5ada Mon Sep 17 00:00:00 2001 From: Aaron Cook Date: Wed, 22 Jun 2022 09:40:17 +0200 Subject: [PATCH] fix: adjust notification centre styles (#3987) * fix: adjust styles * fix: use CSS for dividers * fix: spelling * fix: convert notifications to list * fix: remove duplicate padding * fix: duplicate border * fix: selector * fix: adjust selector for styled-components * fix: adjust padding + read all notifications * fix: read only when popper mounted * fix: alter bell positioning --- .../Notifications/NotificationItem.tsx | 56 ++++++++++--------- .../Notifications/NotificationList.tsx | 35 ++++++++++-- .../components/Notifications/assets/bell.svg | 7 +++ .../Header/components/Notifications/index.tsx | 50 ++++++++++++----- src/components/Providers/SnackbarProvider.tsx | 4 +- 5 files changed, 103 insertions(+), 49 deletions(-) create mode 100644 src/components/AppLayout/Header/components/Notifications/assets/bell.svg diff --git a/src/components/AppLayout/Header/components/Notifications/NotificationItem.tsx b/src/components/AppLayout/Header/components/Notifications/NotificationItem.tsx index 9f4354837c..a4e19ec5cb 100644 --- a/src/components/AppLayout/Header/components/Notifications/NotificationItem.tsx +++ b/src/components/AppLayout/Header/components/Notifications/NotificationItem.tsx @@ -1,15 +1,16 @@ import { ReactElement } from 'react' import styled from 'styled-components' import { OptionsObject } from 'notistack' +import { ListItem, ListItemAvatar, ListItemText } from '@material-ui/core' import { NotificationsState } from 'src/logic/notifications/store/notifications' -import { black500 } from 'src/theme/variables' +import { black500, background, black300 } from 'src/theme/variables' import { formatTime } from 'src/utils/date' import AlertIcon from 'src/assets/icons/alert.svg' import CheckIcon from 'src/assets/icons/check.svg' import ErrorIcon from 'src/assets/icons/error.svg' import InfoIcon from 'src/assets/icons/info.svg' -import { UnreadNotificationBadge, NotificationSubtitle } from 'src/components/AppLayout/Header/components/Notifications' +import { UnreadNotificationBadge } from 'src/components/AppLayout/Header/components/Notifications' const notificationIcon = { error: ErrorIcon, @@ -21,32 +22,35 @@ const notificationIcon = { const getNotificationIcon = (variant: OptionsObject['variant'] = 'info'): string => notificationIcon[variant] const NoficationItem = ({ read, options, message, timestamp }: NotificationsState[number]): ReactElement => ( - - - - -
- {message} -
- {formatTime(timestamp)} -
- + /* + //@ts-expect-error requires child to be button when using styled-components */ + + + + Notification + + + {message}} secondary={formatTime(timestamp)} /> + ) -const Notification = styled.div` - box-sizing: border-box; - display: flex; - align-items: center; - > * { - padding: 8px; +const NotificationListItem = styled(ListItem)` + &.MuiListItem-root:not(:last-child) { + border-bottom: 2px solid ${background}; + } + .MuiListItemText-secondary { + color: ${black300}; + } + .MuiListItemAvatar-root { + min-width: 42px; } ` diff --git a/src/components/AppLayout/Header/components/Notifications/NotificationList.tsx b/src/components/AppLayout/Header/components/Notifications/NotificationList.tsx index 0d18bb8e95..06a6612025 100644 --- a/src/components/AppLayout/Header/components/Notifications/NotificationList.tsx +++ b/src/components/AppLayout/Header/components/Notifications/NotificationList.tsx @@ -1,32 +1,55 @@ import { ReactElement } from 'react' import styled from 'styled-components' +import { List, Typography } from '@material-ui/core' import { NotificationsState } from 'src/logic/notifications/store/notifications' import { NOTIFICATION_LIMIT } from 'src/components/AppLayout/Header/components/Notifications' import { StyledScrollableBar } from 'src/routes/safe/components/Transactions/TxList/styled' -import { black300 } from 'src/theme/variables' +import { black300, gray500 } from 'src/theme/variables' import NotificationItem from 'src/components/AppLayout/Header/components/Notifications/NotificationItem' +import Bell from './assets/bell.svg' + const NotificationList = ({ notifications }: { notifications: NotificationsState }): ReactElement => { if (!notifications.length) { - return No notifications + return ( + + No notifications + No notifications + + ) } return ( NOTIFICATION_LIMIT}> System updates - {notifications.map((notification) => ( - - ))} + + {notifications.map((notification) => ( + + ))} + ) } +const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 147px; // Height of one line notification +` + +const Description = styled(Typography)` + color: ${gray500}; + padding-top: 8px; +` + const ScrollContainer = styled(StyledScrollableBar)<{ $showScrollbar: boolean }>` height: ${({ $showScrollbar: $scroll }) => ($scroll ? '500px' : 'auto')}; overflow-x: hidden; overflow-y: auto; - width: 100%; + padding: 16px 24px; ` const NotificationType = styled.h4` diff --git a/src/components/AppLayout/Header/components/Notifications/assets/bell.svg b/src/components/AppLayout/Header/components/Notifications/assets/bell.svg new file mode 100644 index 0000000000..59bda7adc0 --- /dev/null +++ b/src/components/AppLayout/Header/components/Notifications/assets/bell.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/AppLayout/Header/components/Notifications/index.tsx b/src/components/AppLayout/Header/components/Notifications/index.tsx index 62f1050e03..45d11959e0 100644 --- a/src/components/AppLayout/Header/components/Notifications/index.tsx +++ b/src/components/AppLayout/Header/components/Notifications/index.tsx @@ -11,7 +11,7 @@ import { readNotification, selectNotifications, } from 'src/logic/notifications/store/notifications' -import { black300, border, primary200, primary400, sm } from 'src/theme/variables' +import { background, black300, border, primary200, primary400, sm } from 'src/theme/variables' import ExpandMoreIcon from '@material-ui/icons/ExpandMore' import ExpandLessIcon from '@material-ui/icons/ExpandLess' import NotificationList from 'src/components/AppLayout/Header/components/Notifications/NotificationList' @@ -34,6 +34,8 @@ const Notifications = ({ open, toggle, clickAway }: Props): ReactElement => { const [showAll, setShowAll] = useState(false) const notifications = useSelector(selectNotifications) + const hasNotifications = notifications.length > 0 + const sortedNotifications = useMemo(() => getSortedNotifications(notifications), [notifications]) const canExpand = notifications.length > NOTIFICATION_LIMIT @@ -47,20 +49,31 @@ const Notifications = ({ open, toggle, clickAway }: Props): ReactElement => { ) const hasUnread = unreadCount > 0 - const handleClickBell = () => { - if (open) { - notificationsToShow.forEach(({ read, options }) => { - if (read) return - dispatch(readNotification({ key: options.key })) - }) - setShowAll(false) + const handleRead = () => { + if (!open) { + return } + notificationsToShow.forEach(({ read, options }) => { + if (read) return + dispatch(readNotification({ key: options.key })) + }) + setShowAll(false) + } + + const handleClickBell = () => { + handleRead() toggle() } const handleClickAway = () => { + handleRead() clickAway() - setShowAll(false) + } + + const handleClear = () => { + if (hasNotifications) { + dispatch(deleteAllNotifications()) + } } return ( @@ -99,18 +112,18 @@ const Notifications = ({ open, toggle, clickAway }: Props): ReactElement => { Notifications {hasUnread && {unreadCount}} - dispatch(deleteAllNotifications())}>Clear All + {hasNotifications && Clear All} {canExpand && ( -
+ setShowAll((prev) => !prev)} disableRipple> {showAll ? : } {showAll ? 'Hide' : `${notifications.length - NOTIFICATION_LIMIT} other notifications`} -
+ )} @@ -143,18 +156,18 @@ const NotificationsPopper = styled(Paper)` border-radius: ${sm}; box-shadow: 0 0 10px 0 rgba(33, 48, 77, 0.1); width: 438px; - padding: 30px 23px; ` const NotificationsHeader = styled.div` - height: 30px; display: flex; align-items: flex-end; justify-content: space-between; - margin-bottom: 16px; + padding: 24px 24px; + border-bottom: 2px solid ${background}; ` const NotificationsTitle = styled.h4` + all: unset; display: inline; font-weight: 700; font-size: 20px; @@ -179,6 +192,13 @@ const ClearAllButton = styled.button` font-weight: 700; font-size: 16px; color: ${primary400}; + :hover { + color: #005546; // Same as MUI Button + } +` + +const NotificationsFooter = styled.div` + padding: 24px 32px 16px; ` export const NotificationSubtitle = styled.span` diff --git a/src/components/Providers/SnackbarProvider.tsx b/src/components/Providers/SnackbarProvider.tsx index ef6fef30bb..cfd1d01d49 100644 --- a/src/components/Providers/SnackbarProvider.tsx +++ b/src/components/Providers/SnackbarProvider.tsx @@ -18,7 +18,7 @@ const useStyles = makeStyles({ width: '340px', }, success: { - background: '#fff', + background: '#CBF1EB', }, error: { background: '#ffe6ea', @@ -27,7 +27,7 @@ const useStyles = makeStyles({ background: '#fff3e2', }, info: { - background: '#fff', + background: '#EBF7FF', }, snackbar: { borderRadius: `${sm}`,