feat(notification): more style updates, code refactors

src/components/Notification/Notification.examples.md

@@ -64,39 +64,24 @@ initialState = {
     notifications={state.notifications}
     selectedNotification={state.selectedNotification}
     onNotificationClicked={notification => {
-        if (notification) {
-            console.log('clicked: '+notification)
-            console.log('READ: ' + notification.isMsgRead)
-            let notificationIdx = undefined
-            for (let i = 0; i < notifications.length; i++) {
-                console.log(notifications[i].id + ' =? ' + notification.id)
-                if (notifications[i].id === notification.id) {
-                    notificationIdx = i;
-                    break;
-                }
-            }
+        const clickedBack = (typeof notification == 'undefined')
+        if (!clickedBack) {
+            const notificationIdx = notifications.findIndex( (item) => {
+                return item.id === notification.id 
+            })
             notifications[notificationIdx].isMsgRead = true
         }
-        console.log('update notifs')
-        console.log(notifications)
         setState({ selectedNotification: notification, notifications: notifications})
       }
     }
     onClearAll={() => {
-        console.log('Clear All')
         setState({ selectedNotification: undefined, notifications: []})
       }
     }
     onClearNotification={notification => {
-        console.log('clear: ' + notification.id)
-        let notificationIdx = undefined
-        for (let i = 0; i < notifications.length; i++) {
-            console.log(notifications[i].id + ' =? ' + notification.id)
-            if (notifications[i].id === notification.id) {
-                notificationIdx = i;
-                break;
-            }
-        }
+        const notificationIdx = notifications.findIndex( (item) => {
+            return item.id === notification.id 
+        })
         delete notifications[notificationIdx]
         setState({ selectedNotification: undefined, notifications: notifications})
       }

src/components/Notification/NotificationBody.jsx

@@ -29,7 +29,6 @@ const NotificationBody = props => {
     }
     if (notificationsLength > 0) {
       return notifications.map(notification => {
-        console.log(notification.id)
         return getNotification(notification, 'notificationList')
       })
     } else {

src/components/Notification/NotificationHeader.jsx

@@ -27,7 +27,7 @@ const NotificationHeader = props => {
   )
   const listView = (
     <div className={'notificationHeader clearfix'} {...rest}>
-      <span className='notificationTitle'>{title}</span>
+      <h4 className='notificationTitle'>{title}</h4>
       <span className='notificationCount'>{notificationCount}</span>
       {children}
     </div>

src/styles/components/notification.css

@@ -55,10 +55,12 @@
     }
     & .notificationHeader{
       border-bottom:1px solid var(--gray);
-      padding: 12px 15px;
+      padding: var(--standardMargin);
       & .notificationTitle{
         font-size:1.2em;
         font-weight: bold;
+        display: inline-block;
+        margin: 0;
       }
       & .notificationCount{
         display: inline-block;
@@ -96,7 +98,7 @@
       overflow-y: auto;
       & .singleNotification{
         cursor: pointer;
-        padding: 15px 8px 5px;
+        padding: var(--standardMargin) 8px var(--standardMargin);
         border-bottom: 1px solid var(--gray);
         &.active,&.unread{
           background: var(--whisperGray);
@@ -136,7 +138,7 @@
         border-bottom: none;
       }
       & .detailView{
-        padding:15px;
+        padding: var(--standardMargin);
         & .notificationContent{
           padding-left:10px;
           & .notificationTitle{

src/styles/variables.css

@@ -71,6 +71,7 @@
   --small: 0.85rem;
   --semibold: 600;
   --subtitlesize: 14px;
+  --standardMargin: 15px;
 
   --base-border-radius: 0;
 }