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 ( <> - 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,