From e723791916d3c0c1e4d3d02ef3cbb7540769b819 Mon Sep 17 00:00:00 2001
From: csrapr <26280794+csrapr@users.noreply.github.com>
Date: Wed, 17 Feb 2021 15:41:43 +0000
Subject: [PATCH] Fix: remove inline styles

---
 .../NotificationCenter/NotificationCenter.js          | 11 ++---------
 .../NotificationCenter/NotificationCenter.styles.js   | 10 +++++-----
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js
index a7343be5..d9ac99ed 100644
--- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js
+++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js
@@ -58,12 +58,12 @@ const NotificationCenter = ({
   hasUnreadProp,
   notifButtonCoords
 }) => {
-  const classes = useStyles()
   const { data, loading } = useQuery(GET_NOTIFICATIONS, {
     pollInterval: 60000
   })
   const [showingUnread, setShowingUnread] = useState(false)
   const [xOffset, setXOffset] = useState(0)
+  const classes = useStyles({ notifButtonCoords, xOffset })
   const machines = R.compose(
     R.map(R.prop('name')),
     R.indexBy(R.prop('deviceId'))
@@ -117,14 +117,7 @@ const NotificationCenter = ({
 
   return (
     <>
-      <button
-        onClick={close}
-        className={classes.notificationIcon}
-        style={{
-          position: 'absolute',
-          top: notifButtonCoords.y,
-          left: notifButtonCoords.x - xOffset
-        }}>
+      <button onClick={close} className={classes.notificationIcon}>
         <NotificationIconZodiac />
         {hasUnread && <div className={classes.hasUnread} />}
       </button>
diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js
index 2a434074..d2142fb8 100644
--- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js
+++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js
@@ -37,17 +37,17 @@ const styles = {
     marginLeft: spacer * 2,
     height: 0
   },
-  notificationIcon: {
-    /*     position: 'absolute',
-    left: spacer * 22 + 2,
-    top: spacer + 5, */
+  notificationIcon: ({ notifButtonCoords, xOffset }) => ({
+    position: 'absolute',
+    top: notifButtonCoords ? notifButtonCoords.y : 0,
+    left: notifButtonCoords ? notifButtonCoords.x - xOffset : 0,
     cursor: 'pointer',
     background: 'transparent',
     boxShadow: '0px 0px 0px transparent',
     border: '0px solid transparent',
     textShadow: '0px 0px 0px transparent',
     outline: 'none'
-  },
+  }),
   clearAllButton: {
     marginTop: -spacer * 2,
     marginLeft: spacer,