From c614beb9bfb8aabc19722b49a797b23986effb27 Mon Sep 17 00:00:00 2001
From: Andrew Leyva <andrew.leyva@gmail.com>
Date: Fri, 12 Oct 2018 19:13:20 -0700
Subject: [PATCH] feat(notification): more style updates, code refactors

---
 .../Notification-notification-menu-chrome.png | Bin 1810 -> 1874 bytes
 .../Notification/Notification.examples.md     |  31 +++++-------------
 .../Notification/NotificationBody.jsx         |   1 -
 .../Notification/NotificationHeader.jsx       |   2 +-
 src/styles/components/notification.css        |   8 +++--
 src/styles/variables.css                      |   1 +
 6 files changed, 15 insertions(+), 28 deletions(-)

diff --git a/snaps/ref/Notification-notification-menu-chrome.png b/snaps/ref/Notification-notification-menu-chrome.png
index 3b55804c3deda5d6d1e12001d9a59f0f31cc40bb..dc036e8054d1e2b661025f75b4eeb85880f8606f 100644
GIT binary patch
literal 1874
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
HR8Zz$A;EOo

literal 1810
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

diff --git a/src/components/Notification/Notification.examples.md b/src/components/Notification/Notification.examples.md
index 770a9df..8ce3ea0 100644
--- a/src/components/Notification/Notification.examples.md
+++ b/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})
       }
diff --git a/src/components/Notification/NotificationBody.jsx b/src/components/Notification/NotificationBody.jsx
index baf7a09..0b33a3d 100644
--- a/src/components/Notification/NotificationBody.jsx
+++ b/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 {
diff --git a/src/components/Notification/NotificationHeader.jsx b/src/components/Notification/NotificationHeader.jsx
index 72e8ab4..cb62174 100644
--- a/src/components/Notification/NotificationHeader.jsx
+++ b/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>
diff --git a/src/styles/components/notification.css b/src/styles/components/notification.css
index 5c4a8cc..6533fbe 100644
--- a/src/styles/components/notification.css
+++ b/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{
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 4f80b6c..8de44ab 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -71,6 +71,7 @@
   --small: 0.85rem;
   --semibold: 600;
   --subtitlesize: 14px;
+  --standardMargin: 15px;
 
   --base-border-radius: 0;
 }