diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/BodyModal/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/BodyModal/index.js
index 7760fbee70..3b9be32856 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/BodyModal/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/BodyModal/index.js
@@ -1,8 +1,8 @@
/**
-*
-* BodyModal
-*
-*/
+ *
+ * BodyModal
+ *
+ */
import React from 'react';
import PropTypes from 'prop-types';
@@ -14,9 +14,7 @@ function BodyModal({ children, ...rest }) {
return (
-
- {children}
-
+
{children}
);
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/BodyModal/styles.scss b/packages/strapi-plugin-content-type-builder/admin/src/components/BodyModal/styles.scss
index 9284377c1c..1eb730d8a9 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/BodyModal/styles.scss
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/BodyModal/styles.scss
@@ -1,3 +1,3 @@
.bodyModal {
- padding: 2.2rem 1.4rem 0 1.4rem;
+ padding: 2.2rem 1.5rem 0 1.5rem;
}
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/StyledCustomCheckbox.js b/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/StyledCustomCheckbox.js
new file mode 100644
index 0000000000..dba628cf7f
--- /dev/null
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/StyledCustomCheckbox.js
@@ -0,0 +1,37 @@
+/**
+ *
+ * StyledCustomCheckbox
+ *
+ */
+
+import styled from 'styled-components';
+
+const StyledCustomCheckbox = styled.div`
+ width: 100%;
+ padding: 0 15px;
+ margin-top: -6px;
+ margin-bottom: 16px;
+ label {
+ cursor: pointer;
+ input[type='checkbox'] {
+ margin-left: 0;
+ margin-right: 13px;
+ }
+ input[type='checkbox'],
+ span {
+ display: inline-block;
+ vertical-align: bottom;
+ }
+ span {
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 10px;
+ }
+ }
+ input[type='number'] {
+ margin-top: -10px;
+ margin-bottom: -4px;
+ }
+`;
+
+export default StyledCustomCheckbox;
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/index.js
index da75bcb867..4583aa249e 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/index.js
@@ -10,6 +10,8 @@ import { FormattedMessage } from 'react-intl';
import { InputNumberWithErrors as InputNumber } from 'strapi-helper-plugin';
+import StyledCustomCheckbox from './StyledCustomCheckbox';
+
class CustomCheckbox extends React.Component {
// eslint-disable-line react/prefer-stateless-function
state = {
@@ -43,22 +45,18 @@ class CustomCheckbox extends React.Component {
// TODO: remove inline after migrating to Buffet
return (
-
+
{msg => (
-
@@ -69,10 +67,9 @@ class CustomCheckbox extends React.Component {
name={name}
onChange={this.handleInputNumberChange}
value={value || ''}
- style={{ marginTop: -15 }}
/>
)}
-
+
);
}
}
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/FormModal/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/FormModal/index.js
new file mode 100644
index 0000000000..fdf0d1cbe2
--- /dev/null
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/FormModal/index.js
@@ -0,0 +1,20 @@
+/**
+ *
+ * FormModal
+ *
+ */
+
+import styled from 'styled-components';
+
+const FormModal = styled.div`
+ width: 100%;
+ .form-check {
+ label {
+ input[type='checkbox'] + p {
+ margin-bottom: 0;
+ }
+ }
+ }
+`;
+
+export default FormModal;
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ListRow/StyledListRow.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ListRow/StyledListRow.js
index 2763e70089..dc80b34c30 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/ListRow/StyledListRow.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ListRow/StyledListRow.js
@@ -1,6 +1,6 @@
/**
*
- * StyedListRow
+ * StyledListRow
*
*/
@@ -8,7 +8,7 @@ import styled from 'styled-components';
import { colors } from 'strapi-helper-plugin';
-const StyedListRow = styled.tr`
+const StyledListRow = styled.tr`
background-color: transparent;
p {
margin-bottom: 0;
@@ -59,4 +59,4 @@ const StyedListRow = styled.tr`
}
`;
-export default StyedListRow;
+export default StyledListRow;
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationsWrapper/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationsWrapper/index.js
index bd9d002138..110cf15fe5 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationsWrapper/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationsWrapper/index.js
@@ -13,7 +13,7 @@ const RelationsWrapper = styled.div`
}
hr {
width: 100%;
- margin: 1.3rem 1.5rem 2.1rem 1.5rem;
+ margin: 1.4rem 1.5rem 2.1rem 1.5rem;
height: 1px;
background-color: rgba(14, 22, 34, 0.04);
border: 0;
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/WrapperModal/styles.scss b/packages/strapi-plugin-content-type-builder/admin/src/components/WrapperModal/styles.scss
index aa2d1590a2..ac527d507d 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/WrapperModal/styles.scss
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/WrapperModal/styles.scss
@@ -4,7 +4,7 @@
.modal {
background-color: white;
- max-width: 92.1rem !important;
+ max-width: 92rem !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 12.7rem !important;
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributeForm/StyledAttributeForm.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributeForm/StyledAttributeForm.js
new file mode 100644
index 0000000000..92df46eeca
--- /dev/null
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributeForm/StyledAttributeForm.js
@@ -0,0 +1,20 @@
+/**
+ *
+ * StyledAttributeForm
+ *
+ */
+
+import styled from 'styled-components';
+
+const StyledAttributeForm = styled.div`
+ width: 100%;
+ .form-check {
+ label {
+ input[type='checkbox'] + p {
+ margin-bottom: 0;
+ }
+ }
+ }
+`;
+
+export default StyledAttributeForm;
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributeForm/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributeForm/index.js
index b6ed761c0a..fa1c07c005 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributeForm/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/AttributeForm/index.js
@@ -19,6 +19,7 @@ import ButtonModalSecondary from '../../components/ButtonModalSecondary';
import ButtonModalSuccess from '../../components/ButtonModalSuccess';
import CustomCheckbox from '../../components/CustomCheckbox';
import FooterModal from '../../components/FooterModal';
+import FormModal from '../../components/FormModal';
import HeaderModal from '../../components/HeaderModal';
import HeaderModalTitle from '../../components/HeaderModalTitle';
import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
@@ -286,7 +287,11 @@ class AttributeForm extends React.Component {