fix(ui): UI issues & styling coherence (#4910)

* fix: ui issues and styles

* fix linter

ui/src/album/AlbumDetails.jsx

@@ -228,7 +228,7 @@ const AlbumDetails = (props) => {
   let notes =
     albumInfo?.notes?.replace(new RegExp('<.*>', 'g'), '') || record.notes
 
-  if (notes !== undefined) {
+  if (notes) {
     notes += '..'
   }
 
@@ -340,7 +340,7 @@ const AlbumDetails = (props) => {
                 )}
               </Typography>
             )}
-            {isDesktop && (
+            {isDesktop && notes && (
               <Collapse
                 collapsedHeight={'2.75em'}
                 in={expanded}
@@ -364,7 +364,7 @@ const AlbumDetails = (props) => {
       {!isDesktop && record['comment'] && (
         <CollapsibleComment record={record} />
       )}
-      {!isDesktop && (
+      {!isDesktop && notes && (
         <div className={classes.notes}>
           <Collapse collapsedHeight={'1.5em'} in={expanded} timeout={'auto'}>
             <Typography

ui/src/common/LoveButton.jsx

@@ -4,18 +4,26 @@ import FavoriteIcon from '@material-ui/icons/Favorite'
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
+import clsx from 'clsx'
 import { useToggleLove } from './useToggleLove'
 import { useRecordContext } from 'react-admin'
 import config from '../config'
 import { isDateSet } from '../utils/validations'
 
-const useStyles = makeStyles({
-  love: {
-    color: (props) => props.color,
-    visibility: (props) =>
-      props.visible === false ? 'hidden' : props.loved ? 'visible' : 'inherit',
+const useStyles = makeStyles(
+  {
+    love: {
+      color: (props) => props.color,
+      visibility: (props) =>
+        props.visible === false
+          ? 'hidden'
+          : props.loved
+            ? 'visible'
+            : 'inherit',
+    },
   },
-})
+  { name: 'NDLoveButton' },
+)
 
 export const LoveButton = ({
   resource,
@@ -25,9 +33,11 @@ export const LoveButton = ({
   component: Button,
   addLabel,
   disabled,
+  className,
+  record: recordProp,
   ...rest
 }) => {
-  const record = useRecordContext(rest) || {}
+  const record = useRecordContext({ record: recordProp }) || {}
   const classes = useStyles({ color, visible, loved: record.starred })
   const [toggleLove, loading] = useToggleLove(resource, record)
 
@@ -48,7 +58,7 @@ export const LoveButton = ({
       onClick={handleToggleLove}
       size={'small'}
       disabled={disabled || loading || record.missing}
-      className={classes.love}
+      className={clsx(classes.love, className)}
       title={
         isDateSet(record.starredAt)
           ? new Date(record.starredAt).toLocaleString()

ui/src/layout/UserMenu.jsx

@@ -28,6 +28,9 @@ import { useDispatch } from 'react-redux'
 
 const useStyles = makeStyles((theme) => ({
   user: {},
+  button: {
+    color: 'inherit',
+  },
   avatar: {
     width: theme.spacing(4),
     height: theme.spacing(4),
@@ -72,12 +75,11 @@ const UserMenu = (props) => {
     <div className={classes.user}>
       <Tooltip title={label && translate(label, { _: label })}>
         <IconButton
+          className={classes.button}
           aria-label={label && translate(label, { _: label })}
           aria-owns={open ? 'menu-appbar' : null}
           aria-haspopup={true}
-          color="inherit"
           onClick={handleMenu}
-          size={'small'}
         >
           {loaded && identity.avatar ? (
             <Avatar