Chore: change variable names and use classnames

new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js

@@ -55,10 +55,9 @@ const CLEAR_ALL_NOTIFICATIONS = gql`
 const NotificationCenter = ({
   close,
   hasUnreadProp,
-  notifButtonCoords,
+  buttonCoords,
   popperRef,
-  refetchHasUnreadHeader,
+  refetchHasUnreadHeader
-  setHeaderHasUnread
 }) => {
   const { data, loading } = useQuery(GET_NOTIFICATIONS, {
     pollInterval: 60000
@@ -68,12 +67,11 @@ const NotificationCenter = ({
 
   const [showingUnread, setShowingUnread] = useState(false)
 
-  const classes = useStyles({ notifButtonCoords, xOffset })
+  const classes = useStyles({ buttonCoords, xOffset })
   const machines = R.compose(
     R.map(R.prop('name')),
     R.indexBy(R.prop('deviceId'))
   )(data?.machines ?? [])
-
   const notifications = R.path(['notifications'])(data) ?? []
   const [hasUnread, setHasUnread] = useState(
     hasUnreadProp || (data?.hasUnreadNotifications ?? false)

new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js

@@ -37,10 +37,10 @@ const styles = {
     marginLeft: spacer * 2,
     height: 0
   },
-  notificationIcon: ({ notifButtonCoords, xOffset }) => ({
+  notificationIcon: ({ buttonCoords, xOffset }) => ({
     position: 'absolute',
-    top: notifButtonCoords ? notifButtonCoords.y - 1 : 0,
+    top: buttonCoords ? buttonCoords.y - 1 : 0,
-    left: notifButtonCoords ? notifButtonCoords.x - xOffset : 0,
+    left: buttonCoords ? buttonCoords.x - xOffset : 0,
     cursor: 'pointer',
     background: 'transparent',
     boxShadow: '0px 0px 0px transparent',
@@ -94,7 +94,7 @@ const styles = {
     marginTop: 5,
     width: '12px',
     height: '12px',
-    border: `1px solid ${comet}`,
+    border: [[1, 'solid', comet]],
     borderRadius: '50%',
     cursor: 'pointer',
     zIndex: 1

new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js

@@ -49,6 +49,10 @@ const NotificationRow = ({
       ? `${deviceName}`
       : `${typeDisplay}`
 
+  const iconClass = {
+    [classes.readIcon]: read,
+    [classes.unreadIcon]: !read
+  }
   return (
     <Grid
       container
@@ -73,11 +77,10 @@ const NotificationRow = ({
         </Grid>
       </Grid>
       <Grid item xs={3} style={{ zIndex: 1 }}>
-        {read ? (
+        <div
-          <div onClick={() => toggleClear(id)} className={classes.readIcon} />
+          onClick={() => toggleClear(id)}
-        ) : (
+          className={classnames(iconClass)}
-          <div onClick={() => toggleClear(id)} className={classes.unreadIcon} />
+        />
-        )}
       </Grid>
       {!valid && <StripesSvg className={classes.stripes} />}
     </Grid>

new-lamassu-admin/src/components/layout/Header.js

@@ -170,12 +170,10 @@ const Header = memo(({ tree }) => {
                   }}>
                   <NotificationCenter
                     popperRef={popperRef}
-                    notifButtonCoords={notifButtonCoords}
+                    buttonCoords={notifButtonCoords}
                     close={onClickAway}
+                    hasUnreadProp={hasUnread}
                     refetchHasUnreadHeader={refetch}
-                    setHeaderHasUnread={unread => {
-                      setHasUnread(unread)
-                    }}
                   />
                 </Popper>
               </div>