some many UI fixes

2025-09-25 16:29:34 +00:00 · 2019-11-29 20:16:33 +01:00 · 2019-11-29 20:16:33 +01:00 · dfc9288a1e
commit dfc9288a1e
parent 945906a819
25 changed files with 82 additions and 82 deletions
--- 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-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/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`
--- 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/DraggedField/utils/getColor.js
+++ b/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';
  }
 };

--- 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
@ -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;
    }
  }
 `;
--- 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,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;
--- 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/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/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/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/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/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",