UI Tweaks and bug fixes

packages/netlify-cms-ui-default/package.json

@@ -22,7 +22,7 @@
     "react-transition-group": "^4.0.0"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",

packages/netlify-cms-ui-default/src/Dropdown.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Wrapper, Button as DropdownButton, Menu, MenuItem } from 'react-aria-menubutton';
 

packages/netlify-cms-ui-default/src/ListItemTopBar.js

@@ -1,17 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import React from 'react';
+import transientOptions from 'netlify-cms-lib-util';
 
 import Icon from './Icon';
-import { colors, lengths, buttons } from './styles';
+import { buttons, colors, lengths } from './styles';
 
-const TopBar = styled.div`
-  display: flex;
-  justify-content: space-between;
-  height: 26px;
-  border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
-  position: relative;
-`;
+const TopBar = styled(
+  'div',
+  transientOptions,
+)(
+  ({ $isVariableTypesList, $collapsed }) => `
+    display: flex;
+    justify-content: space-between;
+    height: 32px!important;
+    border-radius: ${
+      !$isVariableTypesList
+        ? $collapsed ? lengths.borderRadius : `${lengths.borderRadius} ${lengths.borderRadius} 0 0`
+        : $collapsed ? `0 ${lengths.borderRadius} ${lengths.borderRadius} ${lengths.borderRadius}` : `0 ${lengths.borderRadius} 0 0`
+    }!important;
+    position: relative;
+  `,
+);
 
 const TopBarButton = styled.button`
   ${buttons.button};
@@ -26,6 +36,16 @@ const TopBarButton = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
+`;
+
+const StyledTitle = styled.div`
+  position: absolute;
+  left: 36px;
+  line-height: 30px;
+  white-space: nowrap;
+  cursor: pointer;
+  z-index: 1;
 `;
 
 const TopBarButtonSpan = TopBarButton.withComponent('span');
@@ -44,14 +64,23 @@ function DragHandle({ dragHandleHOC }) {
   return <Handle />;
 }
 
-function ListItemTopBar({ className, collapsed, onCollapseToggle, onRemove, dragHandleHOC }) {
+function ListItemTopBar({
+  className,
+  title,
+  collapsed,
+  onCollapseToggle,
+  onRemove,
+  dragHandleHOC,
+  isVariableTypesList,
+}) {
   return (
-    <TopBar className={className}>
+    <TopBar className={className} $collapsed={collapsed} $isVariableTypesList={isVariableTypesList}>
       {onCollapseToggle ? (
         <TopBarButton onClick={onCollapseToggle}>
           <Icon type="chevron" size="small" direction={collapsed ? 'right' : 'down'} />
         </TopBarButton>
       ) : null}
+      {title ? <StyledTitle onClick={onCollapseToggle}>{title}</StyledTitle> : null}
       {dragHandleHOC ? <DragHandle dragHandleHOC={dragHandleHOC} /> : null}
       {onRemove ? (
         <TopBarButton onClick={onRemove}>
@@ -64,9 +93,11 @@ function ListItemTopBar({ className, collapsed, onCollapseToggle, onRemove, drag
 
 ListItemTopBar.propTypes = {
   className: PropTypes.string,
+  title: PropTypes.node,
   collapsed: PropTypes.bool,
   onCollapseToggle: PropTypes.func,
   onRemove: PropTypes.func,
+  isVariableTypesList: PropTypes.bool,
 };
 
 const StyledListItemTopBar = styled(ListItemTopBar)`
@@ -75,6 +106,7 @@ const StyledListItemTopBar = styled(ListItemTopBar)`
   height: 26px;
   border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
   position: relative;
+  border-top-left-radius: 0;
 `;
 
 export default StyledListItemTopBar;

packages/netlify-cms-ui-default/src/Loader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { css, keyframes } from '@emotion/core';
+import { css, keyframes } from '@emotion/react';
 import { CSSTransition } from 'react-transition-group';
 
 import { colors, zIndex } from './styles';

packages/netlify-cms-ui-default/src/ObjectWidgetTopBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import Icon from './Icon';
@@ -14,7 +14,7 @@ const TopBarContainer = styled.div`
   display: flex;
   justify-content: space-between;
   margin: 0 -14px;
-  padding: 13px;
+  padding: 6px 13px;
 `;
 
 const ExpandButtonContainer = styled.div`
@@ -43,6 +43,7 @@ const ExpandButton = styled.button`
 const AddButton = styled.button`
   ${buttons.button}
   ${buttons.widget}
+  padding: 4px 12px;
 
   ${Icon} {
     margin-left: 6px;

packages/netlify-cms-ui-default/src/Toggle.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import ReactToggled from 'react-toggled';
 
 import { colors, colorsRaw, shadows, transitions } from './styles';

packages/netlify-cms-ui-default/src/styles.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, Global } from '@emotion/core';
+import { css, Global } from '@emotion/react';
 
 export const quantifier = '.cms-wrapper';
 
@@ -93,7 +93,7 @@ const lengths = {
   borderWidth: '2px',
   topCardWidth: '682px',
   pageMargin: '28px 18px',
-  objectWidgetTopBarContainerPadding: '0 14px 14px',
+  objectWidgetTopBarContainerPadding: '0 14px 0',
 };
 
 const borders = {