Fix css

packages/strapi-plugin-content-manager/admin/src/components/Block/styles.scss

@@ -10,8 +10,8 @@
 .ctmBlockTitle {
   padding-top: 0px;
   line-height: 18px;
-  font-weight: 400;
   > span {
+    font-weight: 600;
     color: #333740;
     font-size: 18px;
   }

packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/index.js

@@ -18,9 +18,7 @@ import cn from 'classnames';
 import styles from './styles.scss';
 
 const draggableAttrSource = {
-  beginDrag: (props, monitor, component) => {
+  beginDrag: (props) => {
-    const el = findDOMNode(component);
-    el.className = styles.dragged;
     props.updateSiblingHoverState();
 
     return {
@@ -28,10 +26,7 @@ const draggableAttrSource = {
       index: props.index,
     };
   },
-  endDrag: (props, monitor, component) => {
+  endDrag: (props) => {
-    const el = findDOMNode(component);
-    const className = props.isEditing ? `${styles.draggableAttr} ${styles.editingAttr}` : styles.draggableAttr;
-    el.className = className;
     props.updateSiblingHoverState();
 
     return {};
@@ -86,7 +81,7 @@ const draggableAttrTarget = {
 };
 
 class DraggableAttr extends React.Component {
-  state = { isHover: false };
+  state = { isOver: false, dragStart: false };
 
   componentDidUpdate(prevProps) {
     const { isDraggingSibling } = this.props;
@@ -104,11 +99,11 @@ class DraggableAttr extends React.Component {
 
   handleMouseEnter = () => {
     if (!this.props.isDraggingSibling) {
-      this.setState({ isHover: true });
+      this.setState({ isOver: true });
     }
   };
 
-  handleMouseLeave = () => this.setState({ isHover: false });
+  handleMouseLeave = () => this.setState({ isOver: false });
 
   handleRemove = (e) => {
     e.preventDefault();
@@ -118,14 +113,18 @@ class DraggableAttr extends React.Component {
 
   render() {
     const { label, name, isDragging, isEditing, connectDragSource, connectDropTarget } = this.props;
-    const { isHover } = this.state;
+    const { isOver, dragStart } = this.state;
     const opacity = isDragging ? 0.2 : 1;
+    const overClass = isOver ? styles.draggableAttrOvered : '';
+    const className = dragStart ? styles.dragged : styles.draggableAttr;
 
     return (
       connectDragSource(
         connectDropTarget(
           <div
-            className={cn(styles.draggableAttr, isEditing && styles.editingAttr)}
+            className={cn(className, isEditing && styles.editingAttr, overClass)}
+            onDragStart={() => this.setState({ dragStart: true })}
+            onDragEnd={() => this.setState({ dragStart: false })}
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
             onClick={this.handleClickEdit}
@@ -133,20 +132,20 @@ class DraggableAttr extends React.Component {
           >
             <i className="fa fa-th" aria-hidden="true" />
             <span>{name}</span>
-            { isHover && !isDragging && (
+            { isOver && !isDragging && (
               <div className={styles.info}>
                 <FormattedMessage id="content-manager.components.DraggableAttr.edit" />
               </div>
             )}
-            { !isHover && upperFirst(name) !== label && (
+            { !isOver && upperFirst(name) !== label && (
               <div className={styles.info}>
                 {label}
               </div>
             )}
-            {isEditing && !isHover? (
+            {isEditing && !isOver? (
               <span className={styles.editIcon} onClick={this.handleClickEdit} />            
             ) : (
-              <span className={styles.removeIcon} onClick={this.handleRemove} />            
+              <span className={cn( dragStart ? styles.removeIconDragged : styles.removeIcon)} onClick={this.handleRemove} />            
             )}
           </div>
         ),

packages/strapi-plugin-content-manager/admin/src/components/DraggableAttr/styles.scss

@@ -1,12 +1,12 @@
 .draggableAttr {
   position: relative;
-  height: 28px;
+  height: 30px;
   width: 100%;
-  margin-bottom: 8px;
+  margin-bottom: 6px;
   padding-left: 10px;
   justify-content: space-between;
   background: #FAFAFB;
-  line-height: 28px;
+  line-height: 30px;
   color: #333740;
   border: 1px solid #E3E9F3;
   border-radius: 2px;
@@ -15,13 +15,15 @@
     font-size: 11px;
     color: #B3B5B9;
   }
-  &:hover {
+}
+
+.draggableAttrOvered {
   border: 1px solid #AED4FB!important;
-  }
 }
 
 .editingAttr {
   background: #E6F0FB!important;
+  border: 1px solid #AED4FB!important;
 }
 
 .info {
@@ -35,7 +37,26 @@
 .removeIcon {
   width: 30px;
   background: #F3F4F4;
-  height: 26px;
+  height: 28px;
+  cursor: pointer;
+  text-align: center;
+  float: right;
+
+  &:after {
+    display: inline-block;
+    content: '';
+    width: 8px;
+    height: 8px;
+    margin: auto;
+    margin-top: -3px;
+    background-image: url('../../assets/images/icon-cross.svg');
+  }
+}
+
+.removeIconDragged {
+  width: 30px;
+  background: #F3F4F4;
+  height: 28px;
   cursor: pointer;
   text-align: center;
   float: right;
@@ -54,7 +75,7 @@
 .editIcon {
   width: 30px;
   background: #E6F0FB;
-  height: 26px;
+  height: 28px;
   cursor: pointer;
   text-align: center;
   float: right;
@@ -72,15 +93,16 @@
 
 .dragged {
   position: relative;
-  height: 28px;
+  height: 30px !important;
   width: 100%;
-  margin-bottom: 8px;
+  margin-bottom: 6px;
+  box-shadow: 0!important;
   padding-left: 10px;
   justify-content: space-between;
-  background: #E6F0FB;
+  background: #E6F0FB !important;
-  line-height: 28px;
+  line-height: 30px;
   color: #333740;
-  border: 1px solid #AED4FB;
+  border: 1px solid darken(#AED4FB, 20%)!important;
   border-radius: 2px;
   > i {
     margin-right: 10px;

packages/strapi-plugin-content-manager/admin/src/components/SettingsRow/styles.scss

@@ -28,4 +28,5 @@
 .frame {
   position: relative;
   padding-left: 55px;
+  font-weight: 500;
 }

packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/forms.json

@@ -43,6 +43,7 @@
       "customBootstrapClass": "col-md-4 ml-md-auto",
       "didCheckErrors": false,
       "errors": [],
+      "style": { "marginRight": "-20px" },
       "name": "defaultSort",
       "selectOptions": ["_id"],
       "type": "select",
@@ -53,7 +54,7 @@
       "customBootstrapClass": "col-md-1",
       "didCheckErrors": false,
       "errors": [],
-      "inputStyle": { "maxWidth": "130px" },
+      
       "name": "sort",
       "selectOptions": ["ASC", "DESC"],
       "type": "select",
@@ -80,15 +81,6 @@
       "name": "sortable",
       "type": "toggle",
       "validations": {}
-    },
-    {
-      "label": { "id": "content-manager.form.Input.search.field" },
-      "customBootstrapClass": "col-md-6",
-      "didCheckErrors": false,
-      "errors": [],
-      "name": "searchable",
-      "type": "toggle",
-      "validations": {}
     }
   ]
 }

packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/index.js

@@ -251,11 +251,14 @@ class SettingPage extends React.PureComponent {
                     <div className="row">
                       {forms.inputs.map(input => {
                         const inputName = `${namePath}.${input.name}`;
+                        console.log(input.name)
+                        let inputStyle = input.name === 'defaulteSort' ? { marginRight: '-20px' } : {};
                 
                         return (
                           <Input
                             {...input}
                             key={input.name}
+                            // style={inputStyle}
                             name={inputName}
                             onChange={onChangeSettings}
                             selectOptions={this.getSelectOptions(input)}

packages/strapi-plugin-content-manager/admin/src/containers/SettingPage/styles.scss

@@ -61,7 +61,7 @@
 .dropdownWrapper {
   margin-left: 30px;
   > div {
-    height: 28px;
+    height: 30px;
     width: 100%;
     justify-content: space-between;
     background: #ffffff;
@@ -72,13 +72,14 @@
       position: relative;
       cursor: pointer;
       padding-left: 10px !important;
-      line-height: 28px;
+      line-height: 30px;
       width: 100%;
       color: #333740;
       text-align: left;
       background-color: #ffffff;
       border: none;
       font-size: 13px;
+      font-weight: 500;
       &:focus, &:active, &:hover, &:visited {
         background-color: transparent!important;
         box-shadow: none;
@@ -113,8 +114,8 @@
       overflow: scroll;
       
       button {
-        height: 28px;
+        height: 30px;
-        line-height: 28px;
+        line-height: 30px;
         div {
           margin: 0;
           white-space: nowrap;