diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js index 49f0456f..91d1b720 100644 --- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js +++ b/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, diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js index e318f0c2..f5cdea17 100644 --- a/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js +++ b/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: }, - highValueTransaction: { display: 'Transactions', icon: }, - fiatBalance: { display: 'Maintenance', icon: }, - cryptoBalance: { display: 'Maintenance', icon: }, - compliance: { display: 'Compliance', icon: }, - error: { display: 'Error', icon: } + transaction: { + display: 'Transactions', + icon: + }, + highValueTransaction: { + display: 'Transactions', + icon: + }, + fiatBalance: { + display: 'Maintenance', + icon: + }, + cryptoBalance: { + display: 'Maintenance', + icon: + }, + compliance: { + display: 'Compliance', + icon: + }, + error: { display: 'Error', icon: } } 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) ?? + const icon = R.path([type, 'icon'])(types) ?? ( + + ) 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 : '' )}> -
{icon}
+
+
{icon}
+
{notificationTitle} diff --git a/new-lamassu-admin/src/styling/icons/action/wrench/zodiac.svg b/new-lamassu-admin/src/styling/icons/action/wrench/zodiac.svg index 58db5b0d..0cf3417a 100644 --- a/new-lamassu-admin/src/styling/icons/action/wrench/zodiac.svg +++ b/new-lamassu-admin/src/styling/icons/action/wrench/zodiac.svg @@ -1,5 +1,5 @@ - +