fix(ui): minor icon inconsistencies and "no missing files" translation (#3837)

* chore(ui): Fix minor inconsistencies

1. The icons in the user menu are a mix of MUI and react-icons. Move them all to react-icons, and use a standard size (24px)
2. On missing files page, provide a custom Empty component that just removes 'yet'

* use RA's builtin support for custom empty message

Signed-off-by: Deluan <deluan@navidrome.org>

---------

Signed-off-by: Deluan <deluan@navidrome.org>
Co-authored-by: Deluan <deluan@navidrome.org>

resources/i18n/pt.json

@@ -229,6 +229,7 @@
     },
     "missing": {
       "name": "Arquivo ausente |||| Arquivos ausentes",
+      "empty": "Nenhum arquivo ausente",
       "fields": {
         "path": "Caminho",
         "size": "Tamanho",

ui/src/i18n/en.json

@@ -231,6 +231,7 @@
     },
     "missing": {
       "name": "Missing File|||| Missing Files",
+      "empty": "No Missing Files",
       "fields": {
         "path": "Path",
         "size": "Size",

ui/src/layout/AppBar.jsx

@@ -6,12 +6,10 @@ import {
   usePermissions,
   getResources,
 } from 'react-admin'
+import { MdInfo, MdPerson, MdSupervisorAccount } from 'react-icons/md'
 import { useSelector } from 'react-redux'
 import { makeStyles, MenuItem, ListItemIcon, Divider } from '@material-ui/core'
 import ViewListIcon from '@material-ui/icons/ViewList'
-import InfoIcon from '@material-ui/icons/Info'
-import PersonIcon from '@material-ui/icons/Person'
-import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount'
 import { Dialogs } from '../dialogs/Dialogs'
 import { AboutDialog } from '../dialogs'
 import PersonalMenu from './PersonalMenu'
@@ -51,7 +49,7 @@ const AboutMenuItem = forwardRef(({ onClick, ...rest }, ref) => {
     <>
       <MenuItem ref={ref} onClick={handleOpen} className={classes.root}>
         <ListItemIcon className={classes.icon}>
-          <InfoIcon titleAccess={label} />
+          <MdInfo titleAccess={label} size={24} />
         </ListItemIcon>
         {label}
       </MenuItem>
@@ -86,9 +84,9 @@ const CustomUserMenu = ({ onClick, ...rest }) => {
       if (!config.enableUserEditing) {
         return null
       }
-      userResource.icon = PersonIcon
+      userResource.icon = MdPerson
     } else {
-      userResource.icon = SupervisorAccountIcon
+      userResource.icon = MdSupervisorAccount
     }
     return renderSettingsMenuItemLink(
       userResource,
@@ -109,7 +107,9 @@ const CustomUserMenu = ({ onClick, ...rest }) => {
         to={link}
         primaryText={label}
         leftIcon={
-          (resource.icon && createElement(resource.icon)) || <ViewListIcon />
+          (resource.icon && createElement(resource.icon, { size: 24 })) || (
+            <ViewListIcon />
+          )
         }
         onClick={onClick}
         sidebarIsOpen={true}

ui/src/layout/PersonalMenu.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import { MenuItemLink, useTranslate } from 'react-admin'
+import { MdTune } from 'react-icons/md'
 import { makeStyles } from '@material-ui/core'
-import TuneIcon from '@material-ui/icons/Tune'
 
 const useStyles = makeStyles((theme) => ({
   menuItem: {
@@ -17,7 +17,7 @@ const PersonalMenu = forwardRef(({ onClick, sidebarIsOpen, dense }, ref) => {
       ref={ref}
       to="/personal"
       primaryText={translate('menu.personal.name')}
-      leftIcon={<TuneIcon />}
+      leftIcon={<MdTune size={24} />}
       onClick={onClick}
       className={classes.menuItem}
       sidebarIsOpen={sidebarIsOpen}

ui/src/missing/MissingFilesList.jsx

@@ -1,4 +1,4 @@
-import { List, SizeField } from '../common/index.js'
+import { List, SizeField } from '../common/index'
 import {
   Datagrid,
   DateField,

ui/src/transcoding/index.js

@@ -1,4 +1,4 @@
-import TransformIcon from '@material-ui/icons/Transform'
+import { MdTransform } from 'react-icons/md'
 import TranscodingList from './TranscodingList'
 import TranscodingEdit from './TranscodingEdit'
 import TranscodingCreate from './TranscodingCreate'
@@ -10,5 +10,5 @@ export default {
   edit: config.enableTranscodingConfig && TranscodingEdit,
   create: config.enableTranscodingConfig && TranscodingCreate,
   show: !config.enableTranscodingConfig && TranscodingShow,
-  icon: TransformIcon,
+  icon: MdTransform,
 }