fix: header navigation links

fix: notification center css

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

@@ -153,7 +153,6 @@ const NotificationCenter = ({
           {!loading && buildNotifications()}
         </div>
       </div>
-      <div className={classes.background} />
     </>
   )
 }

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

@@ -8,22 +8,16 @@ import {
 } from 'src/styling/variables'
 
 const styles = {
-  background: {
-    position: 'absolute',
-    width: '100vw',
-    height: '100vh',
-    left: 0,
-    top: 0,
-    zIndex: -1,
+  container: {
+    '@media only screen and (max-width: 1920px)': {
+      width: '30vw'
+    },
+    width: '40vw',
+    height: '110vh',
+    right: 0,
     backgroundColor: white,
     boxShadow: '0 0 14px 0 rgba(0, 0, 0, 0.24)'
   },
-  container: {
-    left: -200,
-    top: -42,
-    backgroundColor: white,
-    height: '110vh'
-  },
   header: {
     display: 'flex',
     justifyContent: 'space-between'
@@ -39,7 +33,7 @@ const styles = {
   },
   notificationIcon: ({ buttonCoords, xOffset }) => ({
     position: 'absolute',
-    top: buttonCoords ? buttonCoords.y - 1 : 0,
+    top: buttonCoords ? buttonCoords.y : 0,
     left: buttonCoords ? buttonCoords.x - xOffset : 0,
     cursor: 'pointer',
     background: 'transparent',
@@ -54,21 +48,33 @@ const styles = {
     backgroundColor: zircon
   },
   notificationsList: {
-    width: 440,
     height: '90vh',
     maxHeight: '100vh',
     marginTop: spacer * 3,
     marginLeft: 0,
-    marginRight: -50,
     overflowY: 'auto',
     overflowX: 'hidden',
     backgroundColor: white,
     zIndex: 10
   },
   notificationRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
     position: 'relative',
     marginBottom: spacer / 2,
-    paddingTop: spacer * 1.5
+    paddingTop: spacer * 1.5,
+    '& > *': {
+      marginRight: 10
+    },
+    '& > *:last-child': {
+      marginRight: 0
+    }
+  },
+  notificationContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center'
   },
   unread: {
     backgroundColor: spring3
@@ -79,6 +85,9 @@ const styles = {
       marginLeft: spacer * 3
     }
   },
+  readIconWrapper: {
+    flexGrow: 1
+  },
   unreadIcon: {
     marginLeft: spacer,
     marginTop: 5,

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

@@ -1,4 +1,3 @@
-import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import prettyMs from 'pretty-ms'
@@ -54,36 +53,27 @@ const NotificationRow = ({
     [classes.unreadIcon]: !read
   }
   return (
-    <Grid
-      container
+    <div
       className={classnames(
         classes.notificationRow,
         !read && valid ? classes.unread : ''
       )}>
-      <Grid item xs={2} className={classes.notificationRowIcon}>
-        {icon}
-      </Grid>
-      <Grid item container xs={7} direction="row">
-        <Grid item xs={12}>
-          <Label2 className={classes.notificationTitle}>
-            {notificationTitle}
-          </Label2>
-        </Grid>
-        <Grid item xs={12}>
-          <TL2 className={classes.notificationBody}>{message}</TL2>
-        </Grid>
-        <Grid item xs={12}>
-          <Label1 className={classes.notificationSubtitle}>{age}</Label1>
-        </Grid>
-      </Grid>
-      <Grid item xs={3} style={{ zIndex: 1 }}>
+      <div className={classes.notificationRowIcon}>{icon}</div>
+      <div className={classes.notificationContent}>
+        <Label2 className={classes.notificationTitle}>
+          {notificationTitle}
+        </Label2>
+        <TL2 className={classes.notificationBody}>{message}</TL2>
+        <Label1 className={classes.notificationSubtitle}>{age}</Label1>
+      </div>
+      <div className={classes.readIconWrapper}>
         <div
           onClick={() => toggleClear(id)}
           className={classnames(iconClass)}
         />
-      </Grid>
+      </div>
       {!valid && <StripesSvg className={classes.stripes} />}
-    </Grid>
+    </div>
   )
 }
 

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

@@ -103,7 +103,7 @@ const Header = memo(({ tree, user }) => {
 
   const handleClick = event => {
     const coords = notifCenterButtonRef.current.getBoundingClientRect()
-    setNotifButtonCoords({ x: coords.x, y: coords.y })
+    setNotifButtonCoords({ x: coords.x, y: coords.y + 5 })
 
     setAnchorEl(anchorEl ? null : event.currentTarget)
     document.querySelector('#root').classList.add('root-notifcenter-open')
@@ -132,7 +132,7 @@ const Header = memo(({ tree, user }) => {
                 return (
                   <NavLink
                     key={idx}
-                    to={it.route || it.children[0].route}
+                    to={!R.isNil(it.children) ? it.children[0].route : it.route}
                     isActive={match => {
                       if (!match) return false
                       setActive(it)
@@ -173,10 +173,16 @@ const Header = memo(({ tree, user }) => {
                   anchorEl={anchorEl}
                   className={classes.popper}
                   disablePortal={false}
+                  placement="bottom-end"
                   modifiers={{
+                    offset: {
+                      enabled: true,
+                      offset: '100vw'
+                    },
                     preventOverflow: {
                       enabled: true,
-                      boundariesElement: 'viewport'
+                      boundariesElement: 'viewport',
+                      padding: 0
                     }
                   }}>
                   <NotificationCenter

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

@@ -171,7 +171,7 @@ const styles = {
   hasUnread: {
     position: 'absolute',
     top: 4,
-    left: 182,
+    left: 186,
     width: '9px',
     height: '9px',
     backgroundColor: secondaryColor,