diff --git a/ui/src/layout/Login.js b/ui/src/layout/Login.js index 9ad160600..105ac97eb 100644 --- a/ui/src/layout/Login.js +++ b/ui/src/layout/Login.js @@ -13,58 +13,62 @@ import Logo from '../icons/android-icon-72x72.png' import { useLogin, useNotify, useTranslate } from 'react-admin' import Notification from './Notification' -import LightTheme from '../themes/light' +import useCurrentTheme from '../themes/useCurrentTheme' import config from '../config' import { clearQueue } from '../actions' -const useStyles = makeStyles((theme) => ({ - main: { - display: 'flex', - flexDirection: 'column', - minHeight: '100vh', - alignItems: 'center', - justifyContent: 'flex-start', - background: `url(${config.loginBackgroundURL})`, - backgroundRepeat: 'no-repeat', - backgroundSize: 'cover', - backgroundPosition: 'center', - }, - card: { - minWidth: 300, - marginTop: '6em', - }, - avatar: { - margin: '1em', - display: 'flex', - justifyContent: 'center', - }, - icon: { - backgroundColor: 'white', - width: '40px', - }, - systemName: { - marginTop: '1em', - display: 'flex', - justifyContent: 'center', - color: '#3f51b5', //theme.palette.grey[500] - }, - welcome: { - marginTop: '1em', - padding: '0 1em 1em 1em', - display: 'flex', - justifyContent: 'center', - color: '#3f51b5', //theme.palette.grey[500] - }, - form: { - padding: '0 1em 1em 1em', - }, - input: { - marginTop: '1em', - }, - actions: { - padding: '0 1em 1em 1em', - }, -})) +const useStyles = makeStyles( + (theme) => ({ + main: { + display: 'flex', + flexDirection: 'column', + minHeight: '100vh', + alignItems: 'center', + justifyContent: 'flex-start', + background: `url(${config.loginBackgroundURL})`, + backgroundRepeat: 'no-repeat', + backgroundSize: 'cover', + backgroundPosition: 'center', + }, + card: { + minWidth: 300, + marginTop: '6em', + }, + avatar: { + margin: '1em', + display: 'flex', + justifyContent: 'center', + }, + icon: { + backgroundColor: 'white', + width: '40px', + }, + systemName: { + marginTop: '1em', + display: 'flex', + justifyContent: 'center', + color: '#3f51b5', //theme.palette.grey[500] + }, + welcome: { + marginTop: '1em', + padding: '0 1em 1em 1em', + display: 'flex', + justifyContent: 'center', + color: '#3f51b5', //theme.palette.grey[500] + }, + form: { + padding: '0 1em 1em 1em', + }, + input: { + marginTop: '1em', + }, + actions: { + padding: '0 1em 1em 1em', + }, + systemNameLink: {}, + }), + { name: 'NDLogin' } +) const renderInput = ({ meta: { touched, error } = {}, @@ -100,6 +104,7 @@ const FormLogin = ({ loading, handleSubmit, validate }) => { href="https://www.navidrome.org" target="_blank" rel="noopener noreferrer" + className={classes.systemNameLink} > Navidrome @@ -309,10 +314,13 @@ Login.propTypes = { // We need to put the ThemeProvider decoration in another component // Because otherwise the useStyles() hook used in Login won't get // the right theme -const LoginWithTheme = (props) => ( - - - -) +const LoginWithTheme = (props) => { + const theme = useCurrentTheme() + return ( + + + + ) +} export default LoginWithTheme diff --git a/ui/src/themes/dark.js b/ui/src/themes/dark.js index 78a99ab96..70fe6d1b5 100644 --- a/ui/src/themes/dark.js +++ b/ui/src/themes/dark.js @@ -15,6 +15,14 @@ export default { color: 'white', }, }, + NDLogin: { + systemNameLink: { + color: '#fff', + }, + icon: { + backgroundColor: 'inherit', + }, + }, }, player: { theme: 'dark',