some many UI fixes

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;
     }

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;

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;
     `;
     }
   }}

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`

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={() => {

packages/strapi-plugin-content-manager/admin/src/components/DraggedField/utils/getColor.js

@@ -4,7 +4,7 @@ const getColor = (isOverRemove, isSelected, isOverEditBlock) => {
   } else if (isSelected || isOverEditBlock) {
     return '#aed4fb';
   } else {
-    return '#E3E9F3';
+    return '#e9eaeb';
   }
 };
 

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: background-color 0.1s linear;
-  transition: transform 0.2s ease-in-out;
+  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;
-    }
   }
 `;
 

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/ComponentWrapper.js

@@ -10,7 +10,7 @@ const ComponentWrapper = styled.div`
       &:before {
         content: '&';
         position: absolute;
-        top: -37px;
+        top: -30px;
         left: 22px;
         height: 100%;
         width: 2px;
@@ -23,7 +23,7 @@ const ComponentWrapper = styled.div`
       padding-bottom: 5px;
     }
     > div:last-of-type {
-      margin-bottom: 18px;
+      margin-bottom: 22px;
     }
   }
 `;

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;
+    margin-top: 15px;
-    padding: 23px 18px 22px 18px;
+    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;

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;

packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Label.js

@@ -1,11 +1,11 @@
 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: '• ';
     position: absolute;

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;

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;

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) {

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}

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;

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;

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;

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;
       `;
     }
 

packages/strapi-plugin-content-manager/admin/src/components/PlusButton/index.js

@@ -4,9 +4,10 @@ const beforeStyle = `
   content: ' ';
   position: absolute;
   display: block;
-  width: 2px;
+  width: 14px;
-  left: 17px;
+  height: 2px;
-  top: 10px;
+  left: 11px;
+  top: 17px;
   bottom: 10px;
   z-index: 9;
 `;
@@ -15,9 +16,10 @@ const afterStyle = `
   content: ' ';
   position: absolute;
   display: block;
-  height: 2px;
+  height: 14px;
-  top: 17px;
+  width: 2px;
-  left: 10px;
+  left: 17px;
+  top: 11px;
   right: 10px;
   z-index: 9;
 `;

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);

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-top: 17px;
-  margin-bottom: 23px;
+  margin-bottom: 24px;
   border-top: 1px solid #f6f6f6;
 `;
 

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 {

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",

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",