Merge pull request #4642 from strapi/cm-ui-fixes

Dynamic Zone Content manager ui fixes
2025-10-12 00:23:19 +00:00 · 2019-12-04 18:04:39 +01:00 · 2019-12-04 18:04:39 +01:00 · e8f70ccc7b
commit e8f70ccc7b
parent 932c97d216 3028183997
42 changed files with 221 additions and 162 deletions
--- a/packages/strapi-admin/admin/src/containers/Admin/index.js
+++ b/packages/strapi-admin/admin/src/containers/Admin/index.js
@ -70,6 +70,10 @@ export class Admin extends React.Component {
    this.props.setAppError();
  }

+  componentDidMount() {
+    this.props.emitEvent('didAccessAuthenticatedAdministration');
+  }
+
  hasApluginNotReady = props => {
    const {
      global: { plugins },
--- a/packages/strapi-admin/admin/src/containers/App/index.js
+++ b/packages/strapi-admin/admin/src/containers/App/index.js
@ -47,16 +47,20 @@ function App(props) {
        const { uuid } = data;

        if (uuid) {
-          await fetch('https://analytics.strapi.io/track', {
-            method: 'POST',
-            body: JSON.stringify({
-              event: 'didInitializeAdministration',
-              uuid,
-            }),
-            headers: {
-              'Content-Type': 'application/json',
-            },
-          });
+          try {
+            await fetch('https://analytics.strapi.io/track', {
+              method: 'POST',
+              body: JSON.stringify({
+                event: 'didInitializeAdministration',
+                uuid,
+              }),
+              headers: {
+                'Content-Type': 'application/json',
+              },
+            });
+          } catch (e) {
+            // Silent.
+          }
        }

        getDataRef.current(hasAdmin, data);
--- a/packages/strapi-helper-plugin/lib/src/components/InputToggle/Wrapper.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputToggle/Wrapper.js
@ -37,26 +37,26 @@ const Wrapper = styled.div`
  }

  .gradientOff {
-    background-image: linear-gradient(to bottom right, #f65a1d, #f68e0e);
+    background-color: #f64d0a;
    color: white !important;
    z-index: 0 !important;

    &:active,
    :hover {
      box-shadow: inset -1px 1px 3px rgba(0, 0, 0, 0.1);
-      background-image: linear-gradient(to bottom right, #f65a1d, #f68e0e);
+      background-color: #f64d0a;
      color: white !important;
      z-index: 0 !important;
    }
  }

  .gradientOn {
-    background-image: linear-gradient(to bottom right, #005eea, #0097f6);
+    background-color: #007eff;
    color: white !important;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
    &:active,
    :hover {
-      background-image: linear-gradient(to bottom right, #005eea, #0097f6);
+      background-color: #007eff;
      color: white !important;
      z-index: 0 !important;
    }
--- a/packages/strapi-helper-plugin/lib/src/components/Modal/HeaderModal.js
+++ b/packages/strapi-helper-plugin/lib/src/components/Modal/HeaderModal.js
@ -11,7 +11,7 @@ const HeaderModal = styled(ModalHeader)`
  border: 0;
  > button {
    margin: 0;
-    padding: 20px;
+    padding: 2rem;
    color: #c3c5c8;
    opacity: 1;
    font-size: 1.2rem;
@ -26,13 +26,12 @@ const HeaderModal = styled(ModalHeader)`
    > span {
      display: none;
    }
-    &:before {
-      content: '\f00d';
-      -webkit-font-smoothing: antialiased;
-      font-family: 'FontAwesome';
-      font-weight: 400;
-      font-size: 1.2rem;
-    }
-
+  }
+  & + svg {
+    position: absolute;
+    top: 26px;
+    right: 30px;
+    fill: #c3c5c8;
+  }
 `;
 export default HeaderModal;
--- a/packages/strapi-helper-plugin/lib/src/components/Modal/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/Modal/index.js
@ -6,16 +6,18 @@

 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-
 import HeaderModal from './HeaderModal';
 import StyledModal from './StyledModal';
 import Wrapper from './Wrapper';

+import Close from '../../svgs/Close';
+
 function WrapperModal({ children, isOpen, onToggle, ...rest }) {
  return (
    <Wrapper>
      <StyledModal isOpen={isOpen} toggle={onToggle} {...rest}>
        <HeaderModal toggle={onToggle} />
+        <Close />
        {children}
      </StyledModal>
    </Wrapper>
--- a/packages/strapi-helper-plugin/lib/src/svgs/Close/index.js
+++ b/packages/strapi-helper-plugin/lib/src/svgs/Close/index.js
@ -0,0 +1,12 @@
+import React from 'react';
+
+const Close = props => (
+  <svg width="12px" height="10px" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M10.0719417,0.127226812 C10.1612888,0.127226812 10.2403266,0.161591074 10.3090551,0.230319596 L10.3090551,0.230319596 L10.8245191,0.745783513 C10.8932476,0.814512036 10.9276118,0.893549837 10.9276118,0.982896916 C10.9276118,1.07224399 10.8932476,1.1512818 10.8245191,1.22001032 L10.8245191,1.22001032 L6.77297267,5.27155671 L10.8245191,9.3231031 C10.8932476,9.39183162 10.9276118,9.47086942 10.9276118,9.5602165 C10.9276118,9.64956358 10.8932476,9.72860138 10.8245191,9.79732991 L10.8245191,9.79732991 L10.3090551,10.3127938 C10.2403266,10.3815223 10.1612888,10.4158866 10.0719417,10.4158866 C9.98259466,10.4158866 9.90355686,10.3815223 9.83482834,10.3127938 L9.83482834,10.3127938 L5.92809485,6.40509433 C4.98802554,7.34516364 3.68545904,8.64773014 2.02039535,10.3127938 C1.95166683,10.3815223 1.87262903,10.4158866 1.78328195,10.4158866 C1.69393487,10.4158866 1.61489707,10.3815223 1.54616855,10.3127938 L1.03070463,9.79732991 C0.961976106,9.72860138 0.927611845,9.64956358 0.927611845,9.5602165 C0.927611845,9.47086942 0.961976106,9.39183162 1.03070463,9.3231031 L5.08225102,5.27155671 L1.03070463,1.22001032 C0.961976106,1.1512818 0.927611845,1.07224399 0.927611845,0.982896916 C0.927611845,0.893549837 0.961976106,0.814512036 1.03070463,0.745783513 L1.54616855,0.230319596 C1.61489707,0.161591074 1.69393487,0.127226812 1.78328195,0.127226812 C1.87262903,0.127226812 1.95166683,0.161591074 2.02039535,0.230319596 L5.92761184,4.13822681 L9.83482834,0.230319596 C9.88637473,0.178773204 9.94372009,0.146556709 10.0068644,0.133670111 Z"
+      fillRule="nonzero"
+    ></path>
+  </svg>
+);
+
+export default Close;
--- a/packages/strapi-plugin-content-manager/admin/src/components/AddDropdown/components.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/AddDropdown/components.js
@ -9,7 +9,7 @@ const Wrapper = styled.div`
    background: #ffffff;
    color: #333740;
    border-radius: 2px;
-    border: solid 1px #006ced;
+    border: solid 1px #007eff;

    > button {
      cursor: pointer;
--- a/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/DropdownItemLink.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/DropdownItemLink.js
@ -3,6 +3,7 @@ import styled from 'styled-components';

 const DropdownItemLink = styled(DropdownItem)`
  border-bottom: 1px solid #f7f8f8;
+  padding: 0.3rem 1.5rem 0.8rem 1.5rem;
  &:hover {
    background-color: #fff;
  }
--- a/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/ItemDropdown.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/ItemDropdown.js
@ -3,7 +3,6 @@ import styled from 'styled-components';

 const ItemDropdown = styled(DropdownItem)`
  padding: 0;
-  padding-top: 9px;
  &:active,
  :focus {
    background-color: #f7f7f9 !important;
@ -19,6 +18,13 @@ const ItemDropdown = styled(DropdownItem)`
  label {
    width: 100%;
    outline: none;
+    &:before {
+      top: 12px;
+    }
+  }
+  .form-check {
+    height: 36px;
+    line-height: 36px;
  }
 `;

--- a/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/ItemDropdownReset.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/ItemDropdownReset.js
@ -2,9 +2,8 @@ import styled from 'styled-components';
 import ItemDropdown from './ItemDropdown';

 const ItemDropdownReset = styled(ItemDropdown)`
-  margin-top: 11px;
-  margin-bottom: 2px;
-  padding: 0.25rem 1.5rem;
+  margin-bottom: 6px;
+  padding: 0.8rem 1.5rem 0.2rem 1.5rem;
  font-weight: 600;
  font-size: 1.3rem;

--- a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/GrabWrapper.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/GrabWrapper.js
@ -28,7 +28,7 @@ const GrabWrapper = styled.div`
    (isSelected || isOverEditBlock) &&
    css`
      g {
-        fill: #007eff;
+        fill: #aed4fb;
      }
    `}
 `;
--- a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/Link.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/Link.js
@ -7,6 +7,7 @@ const Link = styled.div`
  font-weight: 400;
  color: #007eff;
  cursor: pointer;
+  font-size: 13px;
  &:before {
    content: '\f013';
    margin-right: 7px;
--- a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/NameWrapper.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/NameWrapper.js
@ -2,8 +2,6 @@ import styled from 'styled-components';

 const NameWrapper = styled.div`
  position: relative;
-  padding-left: 38px;
-  padding-right: 38px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
@ -13,13 +11,13 @@ const NameWrapper = styled.div`
  ${({ isOverEditBlock, isOverRemove, isSelected }) => {
    if (isOverRemove) {
      return `
-      color: #f64d0a
+      color: #f64d0a;
    `;
    }

    if (isSelected || isOverEditBlock) {
      return `
-      color: #007eff
+      color: #007eff;
    `;
    }
  }}
--- a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/RemoveWrapper.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/RemoveWrapper.js
@ -19,14 +19,15 @@ const RemoveWrapper = styled.div`

  svg {
    align-self: center;
+    color: #b4b6ba;
  }

  ${({ isOverRemove }) => {
    if (isOverRemove) {
      return `
-    path {
-      fill: #f64d0a;
-    }
+        path {
+          fill: #f64d0a;
+        }
    `;
    }
  }}
--- a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/Wrapper.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/Wrapper.js
@ -19,7 +19,12 @@ const Wrapper = styled.div`
  .sub_wrapper {
    position: relative;
    cursor: pointer;
-    background: ${({ isOverEditBlock, isOverRemove, isSelected, isSub }) => {
+    background-color: ${({
+      isOverEditBlock,
+      isOverRemove,
+      isSelected,
+      isSub,
+    }) => {
      if (isOverRemove) {
        return '#ffe9e0';
      } else if (isSelected || isOverEditBlock) {
@ -34,7 +39,25 @@ const Wrapper = styled.div`
      ${({ isOverEditBlock, isOverRemove, isSelected }) =>
        getColor(isOverRemove, isSelected, isOverEditBlock)};
    border-radius: 2px;
+    padding-left: 38px;
+    padding-right: 38px;
+
+    ${({ isSub }) =>
+      isSub &&
+      css`
+        padding-left: 12px !important;
+        padding-right: 12px !important;
+
+        .grab,
+        .remove {
+          display: none;
+        }
+      `}
+
    .name {
+      font-size: 13px;
+      font-weight: 500;
+
      ${({ isOverRemove }) =>
        isOverRemove &&
        css`
@ -64,7 +87,7 @@ const Wrapper = styled.div`
        (isSelected || isOverEditBlock) &&
        css`
          g {
-            fill: #007eff;
+            fill: #aed4fb;
          }
        `}
    }
--- a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/index.js
@ -57,7 +57,6 @@ const DraggedField = forwardRef(
          <SubWrapper
            className="sub_wrapper"
            isSelected={isSelected}
-            isSub={isSub}
            isOverEditBlock={isOverEditBlock}
            isOverRemove={isOverRemove}
            onMouseEnter={() => {
--- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Button.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Button.js
@ -3,8 +3,15 @@ import PlusButton from '../PlusButton';

 const Button = styled(PlusButton)`
  transform: rotate(-90deg);
-  transition: background-color 0.2s linear;
-  transition: transform 0.2s ease-in-out;
+  transition: background-color 0.1s linear;
+  transition: transform 0.1s ease-in-out;
+  &:hover {
+    background-color: #aed4fb;
+    :before,
+    :after {
+      background-color: #007eff;
+    }
+  }

  ${({ hasError }) => {
    if (hasError) {
@ -18,11 +25,6 @@ const Button = styled(PlusButton)`
  }}
  &.isOpen {
    transform: rotate(-45deg);
-    background-color: #aed4fb;
-    :before,
-    :after {
-      background-color: #007eff;
-    }
  }
 `;

--- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/ComponentWrapper.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/ComponentWrapper.js
@ -5,12 +5,24 @@ const ComponentWrapper = styled.div`
  > div {
    position: relative;
    box-shadow: 0 2px 4px #e3e9f3;
+    .arrow-icons {
+      position: absolute;
+      top: -12px;
+      right: 49px;
+      z-index: 9;
+      .arrow-btn {
+        display: inline-flex;
+        svg {
+          margin-left: 6px;
+        }
+      }
+    }
    &:not(:first-of-type) {
      margin-top: 32px;
      &:before {
        content: '&';
        position: absolute;
-        top: -37px;
+        top: -30px;
        left: 22px;
        height: 100%;
        width: 2px;
@ -18,12 +30,10 @@ const ComponentWrapper = styled.div`
        color: transparent;
      }
    }
-    > div:not(:first-of-type) {
+    > div:last-of-type {
      padding-top: 6px;
      padding-bottom: 5px;
-    }
-    > div:last-of-type {
-      margin-bottom: 18px;
+      margin-bottom: 22px;
    }
  }
 `;
--- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/ComponentsPicker.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/ComponentsPicker.js
@ -6,8 +6,8 @@ const ComponentsPicker = styled.div`
  transition: max-height 0.2s ease-out;

  > div {
-    margin-top: 19px;
-    padding: 23px 18px 22px 18px;
+    margin-top: 15px;
+    padding: 23px 18px 26px 18px;
    background-color: #f2f3f4;
  }

@ -18,6 +18,7 @@ const ComponentsPicker = styled.div`
    `}

  .componentPickerTitle {
+    margin-bottom: 18px;
    color: #919bae;
    font-weight: 600;
    font-size: 13px;
--- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/DynamicZoneWrapper.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/DynamicZoneWrapper.js
@ -3,7 +3,10 @@ import styled from 'styled-components';
 const DynamicZoneWrapper = styled.div`
  position: relative;
  padding-top: 10px;
-  margin-bottom: 18px;
+  margin-bottom: 15px;
+  & + & {
+    padding-top: 13px;
+  }
 `;

 export default DynamicZoneWrapper;
--- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Label.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Label.js
@ -1,18 +1,23 @@
 import styled from 'styled-components';

 const Label = styled.div`
-  padding: 13px 20px;
+  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  position: relative;
-  min-height: 68px;
+  min-height: 64px;
  &:after {
-    content: '• ';
+    content: '•';
    position: absolute;
-    top: 11px;
+    top: 15px;
    left: 18.5px;
-    color: #aed4fb;
    font-size: 15px;
+    width: 8px;
+    height: 8px;
+    background-color: #aed4fb;
+    color: transparent;
+    border-radius: 4px;
+    border: 1px solid white;
  }
  &:before {
    content: '&';
--- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/RoundCTA.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/RoundCTA.js
@ -1,32 +1,44 @@
 import styled from 'styled-components';

 const RoundCTA = styled.div`
-  position: absolute;
-  height: 27px;
-  width: 27px;
+  height: 29px;
+  width: 29px;
  border-radius: 50%;
  background-color: #f2f3f4;
  border: 2px solid #ffffff;
-  z-index: 9;
  cursor: pointer;
  display: flex;
+  z-index: 9;
  svg {
-    font-size: 9px;
-    line-height: 27px;
+    font-size: 10px;
+    line-height: 29px;
    margin: auto;
  }
-  &:not(.arrow-btn):hover {
-    background-color: #faa684;
-    color: #f64d0a;
+  &:not(.arrow-btn) {
+    position: absolute;
+    top: -15px;
+    right: 10px;
+    transition: all 200ms ease-in;
+    &:hover {
+      background-color: #faa684;
+      color: #f64d0a;
+    }
  }
  &.arrow-btn {
-    height: 22px;
-    width: 22px;
+    height: 24px;
+    width: 24px;
    background-color: #ffffff;
    border: 2px solid #ffffff;
+    svg {
+      font-size: 10px;
+      line-height: 24px;
+    }
    &:hover {
      background-color: #f2f3f4;
    }
+    &.arrow-down {
+      transform: rotate(180deg);
+    }
  }
 `;

--- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Wrapper.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Wrapper.js
@ -8,7 +8,7 @@ const Wrapper = styled.div`
    position: absolute;
    display: none;
    top: 10px;
-    left: calc(50% + 46px);
+    left: calc(50% + 38px);
    > span {
      letter-spacing: 0.5px;
      text-transform: uppercase;
--- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js
@ -2,6 +2,8 @@ import React, { useCallback, useState } from 'react';
 import { get } from 'lodash';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
+import { Arrow } from '@buffetjs/icons';
+
 import pluginId from '../../pluginId';
 import useDataManager from '../../hooks/useDataManager';
 import useEditView from '../../hooks/useEditView';
@ -89,27 +91,26 @@ const DynamicZone = ({ max, min, name }) => {

          return (
            <div key={index}>
-              {showDownIcon && (
-                <RoundCTA
-                  style={{ top: -15, right: 54 }}
-                  className="arrow-btn"
-                  onClick={() => moveComponentDown(name, index)}
-                >
-                  <i className="fa fa-arrow-down" />
-                </RoundCTA>
-              )}
-              {showUpIcon && (
-                <RoundCTA
-                  style={{ top: -15, right: 88 }}
-                  className="arrow-btn"
-                  onClick={() => moveComponentUp(name, index)}
-                >
-                  <i className="fa fa-arrow-up" />
-                </RoundCTA>
-              )}
+              <div className="arrow-icons">
+                {showDownIcon && (
+                  <RoundCTA
+                    className="arrow-btn arrow-down"
+                    onClick={() => moveComponentDown(name, index)}
+                  >
+                    <Arrow />
+                  </RoundCTA>
+                )}
+                {showUpIcon && (
+                  <RoundCTA
+                    className="arrow-btn arrow-up"
+                    onClick={() => moveComponentUp(name, index)}
+                  >
+                    <Arrow />
+                  </RoundCTA>
+                )}
+              </div>

              <RoundCTA
-                style={{ top: -15, right: 15 }}
                onClick={() => removeComponentFromDynamicZone(name, index)}
              >
                <i className="far fa-trash-alt" />
--- a/packages/strapi-plugin-content-manager/admin/src/components/FieldComponent/AddFieldButton.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldComponent/AddFieldButton.js
@ -1,39 +0,0 @@
-import styled, { css } from 'styled-components';
-
-const Button = styled.button`
-  width: 100%;
-  height: 37px;
-  margin-bottom: 27px;
-  text-align: center;
-  border: 1px solid rgba(227, 233, 243, 0.75);
-  border-top: 1px solid
-    ${({ doesPreviousFieldContainErrorsAndIsClosed }) =>
-      doesPreviousFieldContainErrorsAndIsClosed
-        ? '#FFA784'
-        : 'rgba(227, 233, 243, 0.75)'};
-
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-  ${({ withBorderRadius }) => {
-    if (withBorderRadius) {
-      return css`
-        border-radius: 2px;
-      `;
-    }
-  }}
-
-  color: #007eff;
-  font-size: 12px;
-  font-weight: 700;
-  -webkit-font-smoothing: antialiased;
-  line-height: 37px;
-  cursor: pointer;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  > i,
-  > svg {
-    margin-right: 10px;
-  }
-`;
-
-export default Button;
--- a/packages/strapi-plugin-content-manager/admin/src/components/FieldComponent/ComponentIcon.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldComponent/ComponentIcon.js
@ -4,9 +4,10 @@ const ComponentIcon = styled.div`
  position: absolute;
  top: -13px;
  left: 10px;
-  width: 27px;
-  height: 27px;
+  width: 29px;
+  height: 29px;
  border-radius: 50%;
+  border: 2px solid white;
  background-color: #e6f0fb;
  display: flex;
  i,
--- a/packages/strapi-plugin-content-manager/admin/src/components/FieldComponent/Wrapper.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldComponent/Wrapper.js
@ -2,6 +2,9 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  position: relative;
+  .row {
+    margin-bottom: 4px;
+  }

  ${({ isFromDynamicZone }) => {
    if (isFromDynamicZone) {
--- a/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js
@ -205,7 +205,7 @@ const Item = ({
      showRightCarret = false;
    }
  }
-
+  console.log(type);
  return (
    <DraggedFieldWithPreview
      goTo={goTo}
--- a/packages/strapi-plugin-content-manager/admin/src/components/FormWrapper/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/FormWrapper/index.js
@ -5,11 +5,17 @@ const FormWrapper = styled.div`
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 2px 4px #e3e9f3;
-  margin-bottom: 14px;
+  margin-bottom: 3px;
  > div {
    margin-right: 0;
    margin-left: 0;
  }
+  .row {
+    margin-bottom: 4px;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
 `;

 export default FormWrapper;
--- a/packages/strapi-plugin-content-manager/admin/src/components/InputFileWithErrors/Container.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/InputFileWithErrors/Container.js
@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Container = styled.div`
  min-width: 200px;
  font-size: 1.3rem;
-  padding-bottom: 30px;
+  padding-bottom: 26px;

  .labelFile {
    margin-bottom: 9px;
--- a/packages/strapi-plugin-content-manager/admin/src/components/InputJSONWithErrors/Wrapper.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/InputJSONWithErrors/Wrapper.js
@ -1,7 +1,7 @@
 import styled from 'styled-components';

 const Wrapper = styled.div`
-  padding-bottom: 30px;
+  padding-bottom: 26px;

  label {
    margin-bottom: 1rem;
--- a/packages/strapi-plugin-content-manager/admin/src/components/NonRepeatableWrapper/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/NonRepeatableWrapper/index.js
@ -9,7 +9,7 @@ const NonRepeatableWrapper = styled.div`
      return `
        position: relative;
        height: 108px;
-        margin-bottom: 25px !important;
+        margin-bottom: 21px !important;
        background-color: #fafafb;
        text-align: center;
        cursor: pointer;
@ -49,6 +49,7 @@ const NonRepeatableWrapper = styled.div`
    if (isFromDynamicZone) {
      return `
        background-color: #fff;
+        padding: 0 10px !important;
      `;
    }

--- a/packages/strapi-plugin-content-manager/admin/src/components/PlusButton/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/PlusButton/index.js
@ -4,9 +4,10 @@ const beforeStyle = `
  content: ' ';
  position: absolute;
  display: block;
-  width: 2px;
-  left: 17px;
-  top: 10px;
+  width: 14px;
+  height: 2px;
+  left: 11px;
+  top: 17px;
  bottom: 10px;
  z-index: 9;
 `;
@ -15,9 +16,10 @@ const afterStyle = `
  content: ' ';
  position: absolute;
  display: block;
-  height: 2px;
-  top: 17px;
-  left: 10px;
+  height: 14px;
+  width: 2px;
+  left: 17px;
+  top: 11px;
  right: 10px;
  z-index: 9;
 `;
--- a/packages/strapi-plugin-content-manager/admin/src/components/PopupForm/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/PopupForm/index.js
@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  ButtonModal,
  HeaderModal,
  HeaderModalTitle,
  Modal,
@ -11,7 +10,7 @@ import {
 } from 'strapi-helper-plugin';
 import { FormattedMessage } from 'react-intl';
 import { upperFirst } from 'lodash';
-import { AttributeIcon } from '@buffetjs/core';
+import { AttributeIcon, Button } from '@buffetjs/core';

 const PopupForm = ({
  headerId,
@ -59,12 +58,12 @@ const PopupForm = ({
        </ModalForm>
        <ModalFooter>
          <section>
-            <ButtonModal
-              message="components.popUpWarning.button.cancel"
-              onClick={onToggle}
-              isSecondary
-            />
-            <ButtonModal message="form.button.done" type="submit" />
+            <Button onClick={onToggle} color="cancel">
+              <FormattedMessage id="components.popUpWarning.button.cancel" />
+            </Button>
+            <Button type="submit" color="success">
+              <FormattedMessage id="form.button.done" />
+            </Button>
          </section>
        </ModalFooter>
      </form>
--- a/packages/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/AddFieldButton.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/AddFieldButton.js
@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 const Button = styled.button`
  width: 100%;
  height: 37px;
-  margin-bottom: 25px;
+  margin-bottom: 21px;
  padding: 0 0 3px 0;
  text-align: center;
  border: 1px solid rgba(227, 233, 243, 0.75);
--- a/packages/strapi-plugin-content-manager/admin/src/components/Separator/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/Separator/index.js
@ -1,8 +1,8 @@
 import styled from 'styled-components';

 const Separator = styled.div`
-  margin-top: 14px;
-  margin-bottom: 23px;
+  margin-top: 17px;
+  margin-bottom: 24px;
  border-top: 1px solid #f6f6f6;
 `;

--- a/packages/strapi-plugin-content-manager/admin/src/components/SettingsViewWrapper/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SettingsViewWrapper/index.js
@ -163,7 +163,10 @@ const SettingsViewWrapper = ({
                  return (
                    <FormattedMessage key={input.name} id={input.label.id}>
                      {label => (
-                        <div className={input.customBootstrapClass}>
+                        <div
+                          className={input.customBootstrapClass}
+                          style={{ marginBottom: 1 }}
+                        >
                          <FormattedMessage
                            id={get(
                              input,
@ -188,7 +191,7 @@ const SettingsViewWrapper = ({
                  );
                })}
                <div className="col-12">
-                  <Separator />
+                  <Separator style={{ marginBottom: 23 }} />
                </div>
              </div>
              <SectionTitle />
--- a/packages/strapi-plugin-content-manager/admin/src/components/WysiwygWithErrors/Wrapper.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/WysiwygWithErrors/Wrapper.js
@ -1,7 +1,7 @@
 import styled from 'styled-components';

 const Wrapper = styled.div`
-  padding-bottom: 2.8rem;
+  padding-bottom: 2.4rem;
  font-size: 1.3rem;
  font-family: 'Lato'; 
  label {
--- a/packages/strapi-plugin-content-manager/admin/src/containers/EditSettingsView/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditSettingsView/index.js
@ -281,7 +281,7 @@ const EditSettingsView = ({
      }

      return (
-        <div className="col-6" key={meta}>
+        <div className="col-6" key={meta} style={{ marginBottom: 4 }}>
          <FormattedMessage
            id={`${pluginId}.containers.SettingPage.editSettings.entry.title.description`}
          >
--- a/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/index.js
@ -169,7 +169,7 @@ const ListSettingsView = ({ deleteLayout, models, slug }) => {

  const renderForm = () => (
    <>
-      <div className="col-6">
+      <div className="col-6" style={{ marginBottom: 4 }}>
        <FormattedMessage id={`${pluginId}.form.Input.label`}>
          {label => (
            <FormattedMessage
@ -191,7 +191,7 @@ const ListSettingsView = ({ deleteLayout, models, slug }) => {
        </FormattedMessage>
      </div>
      {get(getAttributes, [labelToEdit, 'type'], 'text') !== 'media' && (
-        <div className="col-6">
+        <div className="col-6" style={{ marginBottom: 4 }}>
          <FormattedMessage id={`${pluginId}.form.Input.sort.field`}>
            {label => (
              <Input
--- a/packages/strapi-plugin-content-manager/admin/src/translations/en.json
+++ b/packages/strapi-plugin-content-manager/admin/src/translations/en.json
@ -7,7 +7,7 @@
  "components.AddFilterCTA.add": "Filters",
  "components.AddFilterCTA.hide": "Filters",
  "components.DraggableAttr.edit": "Click to edit",
-  "components.DynamicZone.add-compo": "Add a component to {componentName}",
+  "components.DynamicZone.add-compo": "Add to {componentName}",
  "components.DynamicZone.pick-compo": "Pick one component",
  "components.DynamicZone.missing.singular": "There is {count} missing component",
  "components.DynamicZone.missing.plural": "There is {count} missing components",
--- a/packages/strapi-plugin-content-manager/admin/src/translations/fr.json
+++ b/packages/strapi-plugin-content-manager/admin/src/translations/fr.json
@ -7,7 +7,7 @@
  "components.AddFilterCTA.add": "Filtres",
  "components.AddFilterCTA.hide": "Filtres",
  "components.DraggableAttr.edit": "Cliquez pour modifier",
-  "components.DynamicZone.add-compo": "Ajouter un composant à {componentName}",
+  "components.DynamicZone.add-compo": "Ajouter à {componentName}",
  "components.DynamicZone.pick-compo": "Choisir un composant",
  "components.DynamicZone.missing.singular": "{count} composant manquant",
  "components.DynamicZone.missing.plural": "{count} composants manquants",