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
5afe · Jun 22, 2022 · 53743d8 · 53743d8
1 parent 9dd3a7c
commit 53743d8
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 49 deletions.
diff --git 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 => (
-  <Notification>
-    <UnreadNotificationBadge
-      variant="dot"
-      overlap="circle"
-      invisible={read}
-      anchorOrigin={{
-        vertical: 'top',
-        horizontal: 'left',
-      }}
-    >
-      <img src={getNotificationIcon(options?.variant)} />
-    </UnreadNotificationBadge>
-    <div>
-      <NotificationMessage>{message}</NotificationMessage>
-      <br />
-      <NotificationSubtitle>{formatTime(timestamp)}</NotificationSubtitle>
-    </div>
-  </Notification>
+  /*
+  //@ts-expect-error requires child to be button when using styled-components */
+  <NotificationListItem>
+    <ListItemAvatar>
+      <UnreadNotificationBadge
+        variant="dot"
+        overlap="circle"
+        invisible={read}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+      >
+        <img src={getNotificationIcon(options?.variant)} alt="Notification" />
+      </UnreadNotificationBadge>
+    </ListItemAvatar>
+    <ListItemText primary={<NotificationMessage>{message}</NotificationMessage>} secondary={formatTime(timestamp)} />
+  </NotificationListItem>
 )
 
-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
@@ -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 <NotificationType>No notifications</NotificationType>
+    return (
+      <Wrapper>
+        <img src={Bell} alt="No notifications" />
+        <Description>No notifications</Description>
+      </Wrapper>
+    )
   }
 
   return (
     <ScrollContainer $showScrollbar={notifications.length > NOTIFICATION_LIMIT}>
       <NotificationType>System updates</NotificationType>
-      {notifications.map((notification) => (
-        <NotificationItem key={notification.timestamp} {...notification} />
-      ))}
+      <List>
+        {notifications.map((notification) => (
+          <NotificationItem key={notification.timestamp} {...notification} />
+        ))}
+      </List>
     </ScrollContainer>
   )
 }
 
+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
diff --git 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<boolean>(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 => {
                 <NotificationsTitle>Notifications</NotificationsTitle>
                 {hasUnread && <UnreadCount>{unreadCount}</UnreadCount>}
               </div>
-              <ClearAllButton onClick={() => dispatch(deleteAllNotifications())}>Clear All</ClearAllButton>
+              {hasNotifications && <ClearAllButton onClick={handleClear}>Clear All</ClearAllButton>}
             </NotificationsHeader>
             <NotificationList notifications={notificationsToShow} />
             {canExpand && (
-              <div>
+              <NotificationsFooter>
                 <ExpandIconButton onClick={() => setShowAll((prev) => !prev)} disableRipple>
                   {showAll ? <ExpandLessIcon /> : <ExpandMoreIcon />}
                 </ExpandIconButton>
                 <NotificationSubtitle>
                   {showAll ? 'Hide' : `${notifications.length - NOTIFICATION_LIMIT} other notifications`}
                 </NotificationSubtitle>
-              </div>
+              </NotificationsFooter>
             )}
           </NotificationsPopper>
         </Popper>
@@ -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
@@ -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}`,