Fix design relations

packages/strapi-helper-plugin/lib/src/components/Modal/HeaderModal.js

@@ -4,35 +4,54 @@ import { ModalHeader } from 'reactstrap';
 const HeaderModal = styled(ModalHeader)`
   position: absolute;
   top: 0;
-  right: 0;
+  right: 17px;
   width: auto;
   padding: 0;
   z-index: 999;
   border: 0;
   > button {
     margin: 0;
+    margin-top: 12px !important;
+
     padding: 20px;
-    color: #c3c5c8;
     opacity: 1;
     font-size: 1.2rem;
     font-weight: 100;
+    position: relative;
+    transform: rotate(45deg);
     &:hover,
     &:focus {
-      color: #c3c5c8;
+      opacity: 1 !important;
-      opacity: 1;
       outline: 0 !important;
       cursor: pointer;
     }
     > span {
-      display: none;
+      z-index: -1;
+      &:before {
+        content: ' ';
+        position: absolute;
+        display: block;
+        width: 2px;
+        left: 13px;
+        top: 13px;
+        bottom: 9px;
+        z-index: 9;
+      }
+      &:after {
+        content: ' ';
+        position: absolute;
+        display: block;
+        height: 2px;
+        top: 17px;
+        left: 9px;
+        right: 8px;
+        z-index: 9;
+      }
+      :before,
+      :after {
+        background-color: #9ea7b8;
+      }
     }
-    &:before {
+  }
-      content: '\f00d';
-      -webkit-font-smoothing: antialiased;
-      font-family: 'FontAwesome';
-      font-weight: 400;
-      font-size: 1.2rem;
-    }
-
 `;
 export default HeaderModal;

packages/strapi-plugin-content-type-builder/admin/src/components/RelationFormBox/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Inputs } from '@buffetjs/custom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useGlobalContext } from 'strapi-helper-plugin';
 import getTrad from '../../utils/getTrad';
 import RelationTargetPicker from '../RelationTargetPicker';
@@ -24,7 +25,10 @@ const RelationFormBox = ({
       <div className="box-header">
         {isMain ? (
           <p>
-            <i className="fa fa-caret-square-o-right" />
+            <FontAwesomeIcon
+              icon={['far', 'caret-square-right']}
+              style={{ fontSize: 12, marginTop: '-3px' }}
+            />
             {header}
           </p>
         ) : (

packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/index.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { get } from 'lodash';
 import {
   Dropdown,
@@ -35,11 +36,15 @@ const RelationTargetPicker = ({
       >
         <DropdownToggle caret>
           <p>
-            <i className="fa fa-caret-square-o-right" />
+            {/* <i className="fa fa-caret-square-o-right" /> */}
+            <FontAwesomeIcon
+              icon={['far', 'caret-square-right']}
+              style={{ fontSize: 12, marginTop: '-3px' }}
+            />
             {targetFriendlyName}
           </p>
         </DropdownToggle>
-        <DropdownMenu>
+        <DropdownMenu style={{ paddingTop: '3px' }}>
           {sortedContentTypesList.map(({ uid, title }) => {
             return (
               <DropdownItem
@@ -58,7 +63,10 @@ const RelationTargetPicker = ({
                 }}
               >
                 <p>
-                  <i className="fa fa-caret-square-o-right" />
+                  <FontAwesomeIcon
+                    icon={['far', 'caret-square-right']}
+                    style={{ fontSize: 12, marginTop: '-3px' }}
+                  />
                   {title}
                 </p>
               </DropdownItem>

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

@@ -1288,7 +1288,13 @@ const FormModal = () => {
                       : 'primary'
                   }
                   onClick={handleSubmit}
-                  icon={isCreatingAttribute}
+                  icon={
+                    (isCreatingAttribute &&
+                      !isCreatingComponentFromAView &&
+                      state.step !== '1') ||
+                    (state.modalType === 'addComponentToDynamicZone' &&
+                      isCreatingComponentFromAView)
+                  }
                 >
                   {getButtonSubmitMessage()}
                 </Button>