Generate relation attribute in right order and fix select on relation modal

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

@@ -45,7 +45,7 @@ class RelationBox extends React.Component { // eslint-disable-line react/prefer-
           {map(this.props.dropDownItems, (value, key) => {
             const divStyle = get(this.props.header, 'name') === value.name ? { color: '#323740', fontWeight: 'bold'} : { color: 'rgba(50,55,64, 0.75)'};
             return (
-              <div style={{ height: '3.8rem'}} key={key}>
+              <div style={{ height: '3.6rem'}} key={key}>
                 <DropdownItem onClick={this.handleClick} id={value.name}>
                   <div style={divStyle} id={value.name}>
                     <i className={`fa ${value.icon}`} style={divStyle} />

packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/styles.scss

@@ -21,12 +21,12 @@
   text-transform: capitalize;
   display: block;
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  overflow: visible;
 
   > i {
     margin-right: 8px;
-    color: rgba(50, 55, 64, 0.75);
+    color: #323740;
     font-size: 1.3rem;
     font-weight: 100;
   }
@@ -48,16 +48,17 @@
 .dropDown {
   position: absolute;
   width: 100%;
+  height: 100%;
   display: flex;
-  top: .5rem;
+  top: 0; left: 0;
   justify-content: flex-end;
 
   > div {
     width: 100%;
     > button {
+      cursor: pointer;
       width: 100%;
       text-align: right;
-      cursor: pointer;
       background-color: transparent;
       border: none;
       font-size: 14px;
@@ -82,28 +83,33 @@
 }
 
 .dropDownContent {
-  top: 102%;
-  // left: -18.2rem;
+  top: 100%;
   padding: 0;
   border-radius: 0;
   border: none;
   font-family: Lato;
+  box-shadow: 0 2px 4px rgba(203, 211, 224, .5);
+
   > div {
     min-width: 21.5rem;
 
     > button {
+      padding: 0 15px;
+
       > div {
-        border-bottom: 1px solid #F6F6F6;
-        font-family: Lato;
-        text-transform: capitalize;
-        font-size: 1.3rem;
-        color: rgba(50, 55, 64, 0.75);
         cursor: pointer;
+        border-bottom: 1px solid #F6F6F6;
+        font-size: 1.3rem;
+        font-family: Lato;
+        font-weight: 400;
+        text-transform: capitalize;
+        color: #323740;
+
         > i {
           margin-right: 8px;
-          color: rgba(50, 55, 64, 0.75);
-          font-size: 1.3rem;
-          font-weight: 100;
+          font-size: 1.2rem;
+          font-weight: 100 !important;
+          color: #323740;
         }
       }
     }

packages/strapi-plugin-content-type-builder/services/ContentTypeBuilder.js

@@ -136,8 +136,7 @@ module.exports = {
         const attr = {
           required: relation.required,
           columnName: relation.columnName,
-          unique: relation.unique,
-          via: relation.key
+          unique: relation.unique
         };
 
         switch (relation.nature) {
@@ -152,6 +151,8 @@ module.exports = {
           default:
         }
 
+        attr.via = relation.key;
+
         attrs[attribute.name] = attr;
       }