Attributes and relation Modals UI fix

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 (
     <ModalBody className={styles.bodyModal} {...rest}>
       <div className="container-fluid">
-        <div className="row">
+        <div className="row">{children}</div>
-          {children}
-        </div>
       </div>
     </ModalBody>
   );

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

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;

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 (
-      <div className="col-md-12" style={{ marginTop: -4, marginBottom: 9 }}>
+      <StyledCustomCheckbox>
         <FormattedMessage id={label.id}>
           {msg => (
-            <label
+            <label htmlFor={name}>
-              htmlFor={name}
-              style={{ fontWeight: '500', fontSize: 12, cursor: 'pointer' }}
-            >
               <input
-                style={{ marginLeft: 0, marginRight: 13 }}
                 checked={isChecked}
                 name={name}
                 id={name}
                 onChange={this.handleChange}
                 type="checkbox"
               />
-              {msg}
+              <span>{msg}</span>
             </label>
           )}
         </FormattedMessage>
@@ -69,10 +67,9 @@ class CustomCheckbox extends React.Component {
             name={name}
             onChange={this.handleInputNumberChange}
             value={value || ''}
-            style={{ marginTop: -15 }}
           />
         )}
-      </div>
+      </StyledCustomCheckbox>
     );
   }
 }

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;

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;

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;

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;

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;

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 {
           </section>
         </HeaderModal>
         <form onSubmit={this.handleSubmitAndContinue}>
-          <BodyModal>{showForm && currentForm.map(this.renderInput)}</BodyModal>
+          <FormModal>
+            <BodyModal>
+              {showForm && currentForm.map(this.renderInput)}
+            </BodyModal>
+          </FormModal>
           <FooterModal>
             <section>
               <ButtonModalPrimary

packages/strapi-plugin-content-type-builder/admin/src/containers/AttributesPickerModal/index.js

@@ -143,7 +143,7 @@ class AttributesPickerModal extends React.Component {
   renderAttribute = (attribute, index) => {
     const { featureType } = this.props;
     const { isDisplayed, nodeToFocus } = this.state;
-    console.log(this.props);
+
     if (attribute.type === featureType) {
       return null;
     }

packages/strapi-plugin-content-type-builder/admin/src/containers/RelationForm/index.js

@@ -18,6 +18,7 @@ import ButtonModalPrimary from '../../components/ButtonModalPrimary';
 import ButtonModalSecondary from '../../components/ButtonModalSecondary';
 import ButtonModalSuccess from '../../components/ButtonModalSuccess';
 import FooterModal from '../../components/FooterModal';
+import FormModal from '../../components/FormModal';
 import HeaderModal from '../../components/HeaderModal';
 import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
 import HeaderModalTitle from '../../components/HeaderModalTitle';
@@ -312,7 +313,9 @@ class RelationForm extends React.Component {
           </section>
         </HeaderModal>
         <form onSubmit={this.handleSubmitAndContinue}>
+          <FormModal>
             <BodyModal>{showForm && content}</BodyModal>
+          </FormModal>
           <FooterModal>
             <section>
               <ButtonModalPrimary

packages/strapi-plugin-content-type-builder/admin/src/containers/RelationForm/styles.scss

@@ -1,7 +1,7 @@
 .relationWrapper {
   width: 100%;
   display: flex;
-  padding: 2.7rem 15px;
+  padding: 2.7rem 15px 3.3rem 15px;
   .relationNatureWrapper {
     position: relative;
     display: flex;
@@ -12,7 +12,7 @@
       z-index: 2;
     }
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       top: 20px;
       left: 0;
@@ -35,8 +35,8 @@
   .relationBoxHeader {
     height: 3.6rem;
     width: 100%;
-    padding-top: .1rem;
+    padding-top: 0.1rem;
-    background-color: rgba(16,22,34,.04);
+    background-color: rgba(16, 22, 34, 0.04);
     line-height: 3.6rem;
     text-align: center;
     font-size: 1.4rem;
@@ -73,8 +73,11 @@
       font-weight: 700;
       text-transform: capitalize;
       color: black;
-      &:focus, &:active, &:hover, &:visited {
+      &:focus,
-        background-color: transparent!important;
+      &:active,
+      &:hover,
+      &:visited {
+        background-color: transparent !important;
         box-shadow: none;
         color: black;
       }
@@ -107,7 +110,6 @@
   }
 }
 
-
 .dropdownItem {
   height: 3.6rem;
   border-bottom: 1px solid #f6f6f6;
@@ -119,7 +121,8 @@
   -webkit-font-smoothing: antialiased;
   cursor: pointer;
 
-  &:focus, &:active {
+  &:focus,
+  &:active {
     outline: 0;
     background-color: rgb(255, 255, 255) !important;
     color: rgba(50, 55, 64, 0.75);
@@ -138,7 +141,8 @@
   }
 }
 
-.relationNaturePicker { /* stylelint-disable */
+.relationNaturePicker {
+  /* stylelint-disable */
   display: flex;
   width: 29.5rem;
   position: relative;
@@ -147,7 +151,7 @@
   padding-right: 25px;
   justify-content: space-around;
 
-  img:hover{
+  img:hover {
     cursor: pointer;
   }
 }
@@ -158,7 +162,7 @@
   top: 9.2rem;
   height: 2px;
   width: 100%;
-  background-color: #1C5DE7;
+  background-color: #1c5de7;
   z-index: 0;
 }
 
@@ -174,15 +178,15 @@
   text-align: center;
   margin: 0;
   line-height: 22px;
-  > span:nth-child(1), span:nth-child(3) {
+  > span:nth-child(1),
+  span:nth-child(3) {
     text-transform: capitalize;
   }
   > span:nth-child(2) {
-    color: #1C5DE7;
+    color: #1c5de7;
   }
 }
 
-
 .divider {
   width: 100%;
   margin-top: 1.3rem;

packages/strapi-plugin-content-type-builder/admin/src/containers/RelationFormGroup/index.js

@@ -18,6 +18,7 @@ import ButtonModalPrimary from '../../components/ButtonModalPrimary';
 import ButtonModalSecondary from '../../components/ButtonModalSecondary';
 import ButtonModalSuccess from '../../components/ButtonModalSuccess';
 import FooterModal from '../../components/FooterModal';
+import FormModal from '../../components/FormModal';
 import HeaderModal from '../../components/HeaderModal';
 import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
 import HeaderModalTitle from '../../components/HeaderModalTitle';
@@ -320,9 +321,11 @@ class RelationFormGroup extends React.Component {
           </section>
         </HeaderModal>
         <form onSubmit={this.handleSubmitAndContinue}>
+          <FormModal>
             <BodyModal>
               <RelationsWrapper>{showForm && content}</RelationsWrapper>
             </BodyModal>
+          </FormModal>
           <FooterModal>
             <section>
               <ButtonModalPrimary