Move notifications to the top

This avoids notifications getting covered by the player

ui/src/layout/Layout.js

@@ -4,6 +4,7 @@ import { Layout } from 'react-admin'
 import { makeStyles } from '@material-ui/core/styles'
 import Menu from './Menu'
 import AppBar from './AppBar'
+import Notification from './Notification'
 import themes from '../themes'
 
 const useStyles = makeStyles({
@@ -22,6 +23,7 @@ export default (props) => {
       menu={Menu}
       appBar={AppBar}
       theme={theme}
+      notification={Notification}
     />
   )
 }

ui/src/layout/Login.js

@@ -10,9 +10,9 @@ import TextField from '@material-ui/core/TextField'
 import { createMuiTheme, makeStyles } from '@material-ui/core/styles'
 import { ThemeProvider } from '@material-ui/styles'
 import Logo from '../icons/android-icon-72x72.png'
+import { useLogin, useNotify, useTranslate } from 'react-admin'
 
-import { Notification, useLogin, useNotify, useTranslate } from 'react-admin'
-
+import Notification from './Notification'
 import LightTheme from '../themes/light'
 import config from '../config'
 import { clearQueue } from '../audioplayer'

ui/src/layout/Notification.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Notification as RANotification } from 'react-admin'
+
+const Notification = (props) => (
+  <RANotification
+    {...props}
+    anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+  />
+)
+
+export default Notification