Merge pull request #1053 from chaotixkilla/fix-notification-card-styling

Set notification card design up to spec

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

@@ -64,6 +64,9 @@ const styles = {
     position: 'relative',
     marginBottom: spacer / 2,
     paddingTop: spacer * 1.5,
+    '& > *:first-child': {
+      marginRight: 24
+    },
     '& > *': {
       marginRight: 10
     },
@@ -74,7 +77,8 @@ const styles = {
   notificationContent: {
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    width: 300
   },
   unread: {
     backgroundColor: spring3
@@ -89,8 +93,7 @@ const styles = {
     flexGrow: 1
   },
   unreadIcon: {
-    marginLeft: spacer,
-    marginTop: 5,
+    marginTop: 2,
     width: '12px',
     height: '12px',
     backgroundColor: secondaryColor,

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

@@ -13,12 +13,27 @@ import styles from './NotificationCenter.styles'
 const useStyles = makeStyles(styles)
 
 const types = {
-  transaction: { display: 'Transactions', icon: <Transaction /> },
-  highValueTransaction: { display: 'Transactions', icon: <Transaction /> },
-  fiatBalance: { display: 'Maintenance', icon: <Wrench /> },
-  cryptoBalance: { display: 'Maintenance', icon: <Wrench /> },
-  compliance: { display: 'Compliance', icon: <WarningIcon /> },
-  error: { display: 'Error', icon: <WarningIcon /> }
+  transaction: {
+    display: 'Transactions',
+    icon: <Transaction height={16} width={16} />
+  },
+  highValueTransaction: {
+    display: 'Transactions',
+    icon: <Transaction height={16} width={16} />
+  },
+  fiatBalance: {
+    display: 'Maintenance',
+    icon: <Wrench height={16} width={16} />
+  },
+  cryptoBalance: {
+    display: 'Maintenance',
+    icon: <Wrench height={16} width={16} />
+  },
+  compliance: {
+    display: 'Compliance',
+    icon: <WarningIcon height={16} width={16} />
+  },
+  error: { display: 'Error', icon: <WarningIcon height={16} width={16} /> }
 }
 
 const NotificationRow = ({
@@ -35,7 +50,9 @@ const NotificationRow = ({
   const classes = useStyles()
 
   const typeDisplay = R.path([type, 'display'])(types) ?? null
-  const icon = R.path([type, 'icon'])(types) ?? <Wrench />
+  const icon = R.path([type, 'icon'])(types) ?? (
+    <Wrench height={16} width={16} />
+  )
   const age = prettyMs(new Date().getTime() - new Date(created).getTime(), {
     compact: true,
     verbose: true
@@ -57,7 +74,9 @@ const NotificationRow = ({
         classes.notificationRow,
         !read && valid ? classes.unread : ''
       )}>
-      <div className={classes.notificationRowIcon}>{icon}</div>
+      <div className={classes.notificationRowIcon}>
+        <div>{icon}</div>
+      </div>
       <div className={classes.notificationContent}>
         <Label2 className={classes.notificationTitle}>
           {notificationTitle}

new-lamassu-admin/src/styling/icons/action/wrench/zodiac.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="32px" height="32px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="↳-notification-center" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
         <g id="notification-center_v01a#2-(open)" transform="translate(-1023.000000, -459.000000)" stroke="#1B2559">
             <g id="Group-5" transform="translate(1000.000000, 0.000000)">