Use MenuItem divider prop instead of styling it ourselves

src/components/CanvasAnnotations.js

@@ -73,14 +73,12 @@ export class CanvasAnnotations extends Component {
             <MenuItem
               component={listContainerComponent}
               variant="multiline"
+              divider
               sx={{
                 '&:hover,&:focus': {
                   backgroundColor: 'action.hover',
                 },
                 backgroundColor: hoveredAnnotationIds.includes(annotation.id) ? 'action.hover' : '',
-                borderBottom: '0.5px solid',
-                borderBottomColor: 'divider',
-                cursor: 'pointer',
               }}
               key={annotation.id}
               annotationid={annotation.id}

src/components/CanvasLayers.js

@@ -226,10 +226,9 @@ export class CanvasLayers extends Component {
             ref={provided.innerRef}
             {...provided.draggableProps}
             component="li"
+            divider
             sx={{
               alignItems: 'stretch',
-              borderBottom: '0.5px solid',
-              borderBottomColor: 'divider',
               cursor: 'pointer',
               paddingBottom: 2,
               paddingRight: 2,

src/components/WindowSideBarCollectionPanel.js

@@ -20,11 +20,10 @@ function Item({
     <MenuItem
       alignItems="flex-start"
       button
+      divider
       component="li"
       variant="multiline"
       sx={{
-        borderBottom: '0.5px solid',
-        borderBottomColor: 'divider',
         paddingRight: 1,
       }}
       {...otherProps}

src/components/WorkspaceOptionsButton.js

@@ -1,6 +1,5 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import MoreHorizontalIcon from '@mui/icons-material/MoreHorizSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import WorkspaceOptionsMenu from '../containers/WorkspaceOptionsMenu';