ui(Administrateur::Procedure::Service): use ds-fr table and some ui refinements

app/assets/stylesheets/forms.scss

@@ -607,3 +607,7 @@ textarea::placeholder {
   opacity: 0.6; // normalize opacity across browsers
   color: $dark-grey;
 }
+
+.send-wrapper--with-border-top {
+  border-top: 2px solid rgba(0, 0, 145, 1);
+}

app/assets/stylesheets/reset.scss

@@ -44,6 +44,5 @@ q:before, q:after {
   content: none;
 }
 table {
-  border-collapse: collapse;
   border-spacing: 0;
 }

app/assets/stylesheets/table_service.scss

@@ -1,9 +1,5 @@
 @import "constants";
 
-.table-service {
-  .change {
-    text-align: left;
-    width: 300px;
-    padding-left: $default-padding;
-  }
+.change {
+  width: 300px;
 }

app/assets/stylesheets/utils.scss

@@ -130,3 +130,24 @@ $steps: (0, 1, 2, 3, 4, 5, 6, 7, 8);
     }
   }
 }
+
+$directions: (
+  "t": ("padding-top"),
+  "r": ("padding-right"),
+  "b": ("padding-bottom"),
+  "l": ("padding-left"),
+  "x": ("padding-left", "padding-right"),
+  "y": ("padding-top", "padding-bottom"),
+  "":  ("padding")
+);
+$steps: (0, 1, 2, 3, 4, 5, 6, 7, 8);
+
+@each $modifier, $properties in $directions {
+  @each $step in $steps {
+    @each $property in $properties {
+      .p#{$modifier}-#{$step} {
+        #{$property}: $step * $default-spacer;
+      }
+    }
+  }
+}

app/components/dsfr/button_component.rb

@@ -1,7 +1,7 @@
 class Dsfr::ButtonComponent < ApplicationComponent
   private
 
-  def initialize(label:, form:nil, url: nil, class_names: [])
+  def initialize(label:, form: nil, url: nil, class_names: [])
     @form = form
     @label = label
     @url = url

app/javascript/entrypoints/application.js

@@ -72,3 +72,4 @@ import '../../../node_modules/@gouvfr/dsfr/dist/core/core.css';
 import '../../../node_modules/@gouvfr/dsfr/dist/component/button/button.css';
 import '../../../node_modules/@gouvfr/dsfr/dist/component/alert/alert.css';
 import '../../../node_modules/@gouvfr/dsfr/dist/component/callout/callout.css';
+import '../../../node_modules/@gouvfr/dsfr/dist/component/table/table.css';

app/views/administrateurs/services/_form.html.haml

@@ -61,7 +61,7 @@
   - if procedure_id.present?
     = hidden_field_tag :procedure_id, procedure_id
 
-  .send-wrapper.justify-content--space-between
+  .send-wrapper.justify-content--space-between.send-wrapper--with-border-top.my-0.py-3
     = render Dsfr::ButtonComponent.new(label: "Annuler et revenir à la page de suivi", url: admin_procedure_path(id: @procedure.id), class_names: ['fr-btn--secondary'])
     = render Dsfr::ButtonComponent.new(form: f, label: "Enregistrer", class_names: [''])
 

app/views/administrateurs/services/index.html.haml

@@ -5,15 +5,15 @@
 
 #services-index.container
   %h1 Liste des Services
-  %h2 La démarche #{@procedure.libelle} peut être affectée aux services dans la liste ci-dessous
 
-  %table.table.table-service.hoverable
+  %table.fr-table.width-100.mt-3
+    %caption La démarche “#{@procedure.libelle}” peut être affectée aux services dans la liste ci-dessous
     %thead
       %tr
-        %th
+        %th{ scope: "col" }
           Nom
-        %th.change
-          = link_to('Nouveau service', new_admin_service_path(procedure_id: @procedure.id), class: 'button')
+        %th.change{ scope: "col" }
+          = render Dsfr::ButtonComponent.new(label: "Nouveau service", url: new_admin_service_path(procedure_id: @procedure.id), class_names: ['fr-btn--secondary'])
 
     %tbody
       - @services.each do |service|