Fix: remove inline styles

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
+      <button onClick={close} className={classes.notificationIcon}>
-        onClick={close}
-        className={classes.notificationIcon}
-        style={{
-          position: 'absolute',
-          top: notifButtonCoords.y,
-          left: notifButtonCoords.x - xOffset
-        }}>
         <NotificationIconZodiac />
         {hasUnread && <div className={classes.hasUnread} />}
       </button>

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

@@ -37,17 +37,17 @@ const styles = {
     marginLeft: spacer * 2,
     height: 0
   },
-  notificationIcon: {
+  notificationIcon: ({ notifButtonCoords, xOffset }) => ({
-    /*     position: 'absolute',
+    position: 'absolute',
-    left: spacer * 22 + 2,
+    top: notifButtonCoords ? notifButtonCoords.y : 0,
-    top: spacer + 5, */
+    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,