types_de_champs_editor: improve apparence of Move buttons

app/assets/stylesheets/new_design/procedure_champs_editor.scss

@@ -14,8 +14,20 @@
   }
 
   .move {
+    height: 44px;
+    border-radius: 25px;
     margin-right: 10px;
-    margin-bottom: 5px;
+
+    &:first-of-type {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      margin-bottom: -1px;
+    }
+
+    &:last-of-type {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
   }
 
   &.type-header-section {

app/javascript/components/TypesDeChampEditor/components/MoveButton.js

@@ -2,19 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-function MoveButton({ isVisible, icon, onClick }) {
+function MoveButton({ isEnabled, icon, onClick }) {
-  if (isVisible) {
+  return (
-    return (
+    <button className="button small icon-only move" disabled={!isEnabled} onClick={onClick}>
-      <button className="button small icon-only move" onClick={onClick}>
+      <FontAwesomeIcon icon={icon} />
-        <FontAwesomeIcon icon={icon} />
+    </button>
-      </button>
+  );
-    );
-  }
-  return null;
 }
 
 MoveButton.propTypes = {
-  isVisible: PropTypes.bool,
+  isEnabled: PropTypes.bool,
   icon: PropTypes.string,
   onClick: PropTypes.func
 };

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

@@ -76,7 +76,7 @@ const TypeDeChamp = sortableElement(
         >
           <div className="flex column justify-start">
             <MoveButton
-              isVisible={!isFirstItem}
+              isEnabled={!isFirstItem}
               icon="arrow-up"
               onClick={() =>
                 dispatch({
@@ -86,7 +86,7 @@ const TypeDeChamp = sortableElement(
               }
             />
             <MoveButton
-              isVisible={!isLastItem}
+              isEnabled={!isLastItem}
               icon="arrow-down"
               onClick={() =>
                 dispatch({