fix(components): minor fixes and improvements.

src/components/button/BulkDeleteWithUndoButton.js

@@ -6,6 +6,7 @@ import ActionDelete from '@material-ui/icons/Delete';
 import { startUndoable, crudDeleteMany } from 'ra-core';
 import styled from 'styled-components';
 import Color from '@bootstrap-styled/color';
+import { omit } from 'lodash';
 
 import Button from './Button';
 
@@ -25,7 +26,7 @@ const StyledButton = styled(Button)`
   ${props => `
     color: ${props.theme.$red} 
     &:hover {
-      background-color: ${Color(props.theme.$red.fade(0.12).toString())}
+      background-color: ${Color(props.theme.$red).fade(0.12).toString()}
     }
   `}
 `;
@@ -38,12 +39,19 @@ class BulkDeleteWithUndoButton extends Component {
     startUndoable: PropTypes.func,
     selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
     icon: PropTypes.element,
+    className: PropTypes.string,
+    theme: PropTypes.shape({
+      $red: PropTypes.string,
+    }),
   };
 
   static defaultProps = {
     label: 'ra.action.delete',
     undoable: true,
     icon: <ActionDelete />,
+    theme: {
+      $red: '#d9534f',
+    },
   };
 
   handleClick = () => {
@@ -64,13 +72,13 @@ class BulkDeleteWithUndoButton extends Component {
 
   render() {
     const {
-      classes, label, icon, onClick, ...rest
-    } = this.props;
+      className, label, icon, onClick, ...rest
+    } = omit(this.props, ['theme']);
     return (
       <StyledButton
         onClick={this.handleClick}
         label={label}
-        className={classes.deleteButton}
+        className={className}
         {...sanitizeRestProps(rest)}
       >
         {icon}

src/components/button/DeleteWithUndoButton.js

@@ -7,6 +7,7 @@ import classnames from 'classnames';
 import { translate, crudDelete, startUndoable } from 'ra-core';
 import styled from 'styled-components';
 import Color from '@bootstrap-styled/color';
+import { omit } from 'lodash';
 
 import Button from './Button';
 
@@ -33,7 +34,7 @@ const StyledButton = styled(Button)`
   ${props => `
     color: ${props.theme.$red} 
     &:hover {
-      background-color: ${Color(props.theme.$red.fade(0.12).toString())}
+      background-color: ${Color(props.theme.$red).fade(0.12).toString()}
     }
   `}
 `;
@@ -66,7 +67,8 @@ class DeleteWithUndoButton extends Component {
       icon,
       onClick,
       ...rest
-    } = this.props;
+    } = omit(this.props, ['theme']);
+
     return (
       <StyledButton
         onClick={this.handleDelete}
@@ -97,12 +99,18 @@ DeleteWithUndoButton.propTypes = {
   startUndoable: PropTypes.func,
   translate: PropTypes.func,
   icon: PropTypes.element,
+  theme: PropTypes.shape({
+    $red: PropTypes.string,
+  }),
 };
 
 DeleteWithUndoButton.defaultProps = {
   redirect: 'list',
   undoable: true,
   icon: <ActionDelete />,
+  theme: {
+    $red: '#d9534f',
+  },
 };
 
 export default compose(

src/components/index.js

@@ -1,5 +1,5 @@
 import Link from './Link';
-import defaultTheme from './defaultTheme';
+import theme, { makeTheme } from './theme';
 
 export * from './auth';
 export * from './button';
@@ -9,4 +9,4 @@ export * from './field';
 export * from './input';
 export * from './layout';
 export * from './list';
-export { Link, defaultTheme };
+export { Link, theme, makeTheme };

src/components/layout/AppBar.js

@@ -51,7 +51,7 @@ const AppBarUnstyled = ({
     <BsAppBar className={classnames(className, 'appbar p-0')} {...rest}>
       <MenuButton
         aria-label="open drawer"
-        className="mx-3"
+        className="mr-3 ml-1"
         onClick={toggleSidebar}
       >
         <MenuIcon />

src/components/layout/Layout.js

@@ -16,7 +16,7 @@ import Sidebar from './Sidebar';
 import Menu from './Menu';
 import Notification from './Notification';
 import Error from './Error';
-import defaultTheme from '../defaultTheme';
+import defaultTheme from '../theme';
 
 const LayoutWrapper = styled.div`
   ${props => `
@@ -33,6 +33,7 @@ const LayoutWrapper = styled.div`
 const LayoutFrame = styled.div`
   display: flex;
   flex-direction: column;
+  min-height: 100vh;
 `;
 
 const ContentWithSidebar = styled.main`

src/components/layout/Menu.js

@@ -35,7 +35,7 @@ const Menu = ({
   logout,
   ...rest
 }) => (
-  <ListGroup className={classnames(className, 'd-flex flex-column flex-start pl-4 mt-2')} style={{ width: DRAWER_WIDTH }} {...rest}>
+  <ListGroup className={classnames(className, 'd-flex flex-column flex-start pl-2 mt-2')} style={{ width: DRAWER_WIDTH }} {...rest}>
     {hasDashboard && <DashboardMenuItem onClick={onMenuClick} className="border-0 rounded-0 d-flex flex-start pl-2" />}
     {resources
       .filter(r => r.hasList)

src/components/layout/Sidebar.js

@@ -11,7 +11,7 @@ import withWidth from '../extendMui/withWidth';
 import Responsive from './Responsive';
 
 export const DRAWER_WIDTH = '230px';
-export const CLOSED_DRAWER_WIDTH = '55px';
+export const CLOSED_DRAWER_WIDTH = '57px';
 
 const DrawerPaper = styled(Drawer)`
   width: ${DRAWER_WIDTH};
@@ -78,7 +78,7 @@ class Sidebar extends PureComponent {
             docked
             left={DRAWER_WIDTH}
             active={open}
-            className={cn('mt-3', { close: !open })}
+            className={cn('pt-3', { close: !open })}
             onClose={this.toggleSidebar}
             {...rest}
           >
@@ -92,7 +92,7 @@ class Sidebar extends PureComponent {
             docked
             left={DRAWER_WIDTH}
             active={open}
-            className={cn('mt-2', { close: !open })}
+            className={cn('pt-2', { close: !open })}
             onClose={this.toggleSidebar}
             {...rest}
           >

src/components/layout/UserMenu.js

@@ -45,7 +45,7 @@ class UserMenu extends React.Component {
           style={{ height: '48px' }}
         >
           <Button
-            className="add-filter h-100 cursor-pointer text-white"
+            className="add-filter h-100 cursor-pointer text-white rounded-0"
             onClick={this.handleMenu}
             label={label}
           >