fix(ui): make Undo and AMusic Save buttons readable (#6249)

ui/src/layout/Notification.jsx

@@ -1,11 +1,26 @@
 import React from 'react'
 import { Notification as RANotification } from 'react-admin'
+import { makeStyles } from '@material-ui/core/styles'
 
-const Notification = (props) => (
-  <RANotification
-    {...props}
-    anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-  />
+// RA's primary.light Undo is unreadable on the light snackbar of dark themes
+const useStyles = makeStyles(
+  {
+    undo: {
+      color: 'inherit',
+    },
+  },
+  { name: 'NDNotification' },
 )
 
+const Notification = (props) => {
+  const classes = useStyles()
+  return (
+    <RANotification
+      {...props}
+      classes={{ undo: classes.undo }}
+      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+    />
+  )
+}
+
 export default Notification

ui/src/themes/amusic.js

@@ -79,6 +79,16 @@ export default {
         color: '#eee',
         backgroundColor: '#ff4e6b',
       },
+      containedPrimary: {
+        color: '#fff',
+        backgroundColor: '#D60017',
+        '&:hover': {
+          backgroundColor: '#a30011',
+          '@media (hover: none)': {
+            backgroundColor: '#D60017',
+          },
+        },
+      },
       textSizeSmall: {
         fontSize: '0.8rem',
         paddingRight: '0.5rem',
@@ -192,6 +202,11 @@ export default {
         paddingBottom: '1rem',
       },
     },
+    NDNotification: {
+      undo: {
+        color: '#fff',
+      },
+    },
     RaConfirm: {
       confirmPrimary: {
         color: '#fff',

ui/src/themes/nuclear.js

@@ -86,6 +86,13 @@ export default {
         },
       },
     },
+    NDNotification: {
+      undo: {
+        '& .MuiButton-label': {
+          color: 'inherit',
+        },
+      },
+    },
     MuiChip: {
       root: {
         backgroundColor: nukeCol['accent'],