types_de_champ_editor: improve the move handle

app/assets/images/icons/move-handle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fas" data-icon="arrows-alt-v" class="svg-inline--fa fa-arrows-alt-v fa-w-8 fa-lg" width="32" height="32"><path d="M19.04 20.763h-1.656v-9.526h1.656c.768 0 2.494.242.61-1.6l-3.094-3.362a.815.815 0 0 0-1.22 0l-3.093 3.361c-1.643 1.831-.159 1.6.61 1.6h1.655v9.527h-1.655c-.769 0-2.235-.244-.61 1.6l3.093 3.362a.815.815 0 0 0 1.22 0l3.094-3.361c1.884-1.795.158-1.6-.61-1.6z" fill="currentColor"/><rect width="9" height="2" y="11" ry=".402"/><rect ry=".402" y="19" height="2" width="9"/><rect width="9" height="2" y="15" ry=".402"/><rect ry=".402" y="11" x="23" height="2" width="9"/><rect width="9" height="2" x="23" y="19" ry=".402"/><rect ry=".402" y="15" x="23" height="2" width="9"/></svg>

app/assets/stylesheets/new_design/icons.scss

@@ -131,4 +131,8 @@
   &.delete {
     background-image: image-url("icons/trash.svg");
   }
+
+  &.move-handle {
+    background-image: image-url("icons/move-handle.svg");
+  }
 }

app/assets/stylesheets/new_design/procedure_champs_editor.scss

@@ -2,15 +2,27 @@
 @import "constants";
 
 .type-de-champ {
-  background-color: $white;
+  width: 100%;
+  background-color: #FAFDFF;
   border: 1px solid $border-grey;
   border-radius: 5px;
-  margin-bottom: 10px;
+  margin-bottom: $default-padding * 2;
-  width: 100%;
+  box-shadow: 0px 2px 4px -4px;
+  overflow: hidden;
 
-  .handle {
+  .handle.icon {
-    cursor: ns-resize;
+    width: 32px;
-    margin-right: 10px;
+    height: 32px;
+    background-size: 32px;
+    margin-left: 7px;
+    margin-right: 16px;
+    align-self: center;
+    cursor: grab;
+    opacity: 0.8;
+
+    &:hover {
+      opacity: 0.4;
+    }
   }
 
   .move {
@@ -30,8 +42,24 @@
     }
   }
 
+  .head {
+    background-color: #D9ECFF;
+
+    select {
+      margin-bottom: 0px;
+    }
+  }
+
   &.type-header-section {
+    &,
+    .head {
       background-color: $blue;
+    }
+
+    .head .icon {
+      filter: contrast(0%) brightness(200%);
+      opacity: 0.9;
+    }
 
     label {
       color: $light-grey;
@@ -48,6 +76,7 @@
       border-bottom: 1px solid $border-grey;
 
       &.head {
+        border-bottom: 1px solid #D4E5F5;
         padding-bottom: 10px;
       }
     }
@@ -56,12 +85,6 @@
       margin-left: 55px;
     }
 
-    &.head {
-      select {
-        margin-bottom: 0px;
-      }
-    }
-
     &.delete {
       flex-grow: 1;
       display: flex;

app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.js

@@ -162,8 +162,7 @@ TypeDeChamp.propTypes = {
 };
 
 const DragHandle = sortableHandle(() => (
-  <div className="handle button small icon-only">
+  <div className="handle small icon-only icon move-handle">
-    <FontAwesomeIcon icon="arrows-alt-v" size="lg" />
   </div>
 ));
 

app/views/root/patron.html.haml

@@ -29,6 +29,7 @@
     %span.icon.phone
     %span.icon.clock
     %span.icon.download
+    %span.icon.move-handle
     %span.icon.frown
     %span.icon.meh
     %span.icon.smile