Use outlined Material-UI variant for all inputs

ui/src/album/AlbumList.js

@@ -25,7 +25,7 @@ import albumLists, { defaultAlbumList } from './albumLists'
 const AlbumFilter = (props) => {
   const translate = useTranslate()
   return (
-    <Filter {...props}>
+    <Filter {...props} variant={'outlined'}>
       <SearchInput source="name" alwaysOn />
       <ReferenceInput
         label={translate('resources.album.fields.artist')}

ui/src/artist/ArtistList.js

@@ -30,7 +30,7 @@ const useStyles = makeStyles({
 })
 
 const ArtistFilter = (props) => (
-  <Filter {...props}>
+  <Filter {...props} variant={'outlined'}>
     <SearchInput source="name" alwaysOn />
     <QuickFilter
       source="starred"

ui/src/dialogs/SelectPlaylistInput.js

@@ -82,6 +82,7 @@ const SelectPlaylistInput = ({ onChange }) => {
       renderInput={(params) => (
         <TextField
           autoFocus
+          variant={'outlined'}
           {...params}
           label={translate('resources.playlist.fields.name')}
         />

ui/src/personal/Personal.js

@@ -126,7 +126,7 @@ const Personal = () => {
   return (
     <Card className={classes.root}>
       <Title title={'Navidrome - ' + translate('menu.personal.name')} />
-      <SimpleForm toolbar={null}>
+      <SimpleForm toolbar={null} variant={'outlined'}>
         <SelectTheme />
         <SelectLanguage />
         <SelectDefaultView />

ui/src/player/PlayerEdit.js

@@ -19,7 +19,7 @@ const PlayerTitle = ({ record }) => {
 
 const PlayerEdit = (props) => (
   <Edit title={<PlayerTitle />} {...props}>
-    <SimpleForm>
+    <SimpleForm variant={'outlined'}>
       <TextInput source="name" validate={[required()]} />
       <ReferenceInput
         source="transcodingId"

ui/src/player/PlayerList.js

@@ -12,7 +12,7 @@ import { useMediaQuery } from '@material-ui/core'
 import { SimpleList, List } from '../common'
 
 const PlayerFilter = (props) => (
-  <Filter {...props}>
+  <Filter {...props} variant={'outlined'}>
     <SearchInput source="name" alwaysOn />
   </Filter>
 )

ui/src/playlist/PlaylistCreate.js

@@ -9,7 +9,7 @@ import {
 
 const PlaylistCreate = (props) => (
   <Create {...props}>
-    <SimpleForm redirect="list">
+    <SimpleForm redirect="list" variant={'outlined'}>
       <TextInput source="name" validate={required()} />
       <TextInput multiline source="comment" />
       <BooleanInput source="public" initialValue={true} />

ui/src/playlist/PlaylistEdit.js

@@ -21,7 +21,7 @@ const SyncFragment = ({ formData, ...rest }) => {
 
 const PlaylistEdit = (props) => (
   <Edit {...props}>
-    <SimpleForm redirect="list">
+    <SimpleForm redirect="list" variant={'outlined'}>
       <TextInput source="name" validate={required()} />
       <TextInput multiline source="comment" />
       <BooleanInput source="public" />

ui/src/playlist/PlaylistList.js

@@ -15,7 +15,7 @@ import { DurationField, List } from '../common'
 import Writable, { isWritable } from '../common/Writable'
 
 const PlaylistFilter = (props) => (
-  <Filter {...props}>
+  <Filter {...props} variant={'outlined'}>
     <SearchInput source="name" alwaysOn />
   </Filter>
 )

ui/src/song/SongList.js

@@ -36,7 +36,7 @@ const useStyles = makeStyles({
 })
 
 const SongFilter = (props) => (
-  <Filter {...props}>
+  <Filter {...props} variant={'outlined'}>
     <SearchInput source="title" alwaysOn />
     <QuickFilter
       source="starred"

ui/src/transcoding/TranscodingCreate.js

@@ -22,7 +22,7 @@ const TranscodingTitle = () => {
 
 const TranscodingCreate = (props) => (
   <Create title={<TranscodingTitle />} {...props}>
-    <SimpleForm>
+    <SimpleForm variant={'outlined'}>
       <TextInput source="name" validate={[required()]} />
       <TextInput source="targetFormat" validate={[required()]} />
       <SelectInput

ui/src/transcoding/TranscodingEdit.js

@@ -24,7 +24,7 @@ const TranscodingEdit = (props) => {
       <TranscodingNote message={'message.transcodingEnabled'} />
 
       <Edit title={<TranscodingTitle />} {...props}>
-        <SimpleForm>
+        <SimpleForm variant={'outlined'}>
           <TextInput source="name" validate={[required()]} />
           <TextInput source="targetFormat" validate={[required()]} />
           <SelectInput

ui/src/user/UserCreate.js

@@ -19,7 +19,7 @@ const UserCreate = (props) => {
   })
   return (
     <Create title={<Title subTitle={title} />} {...props}>
-      <SimpleForm redirect="list">
+      <SimpleForm redirect="list" variant={'outlined'}>
         <TextInput source="userName" validate={[required()]} />
         <TextInput source="name" validate={[required()]} />
         <TextInput source="email" validate={[required(), email()]} />

ui/src/user/UserEdit.js

@@ -38,7 +38,7 @@ const UserToolbar = (props) => (
 
 const UserEdit = (props) => (
   <Edit title={<UserTitle />} {...props}>
-    <SimpleForm toolbar={<UserToolbar />}>
+    <SimpleForm variant={'outlined'} toolbar={<UserToolbar />}>
       <TextInput source="userName" validate={[required()]} />
       <TextInput source="name" validate={[required()]} />
       <TextInput source="email" validate={[email()]} />

ui/src/user/UserList.js

@@ -12,7 +12,7 @@ import { useMediaQuery } from '@material-ui/core'
 import { List } from '../common'
 
 const UserFilter = (props) => (
-  <Filter {...props}>
+  <Filter {...props} variant={'outlined'}>
     <SearchInput source="name" alwaysOn />
   </Filter>
 )