From 0bb25765d978e9fc2bb81724f1726b6b8e969399 Mon Sep 17 00:00:00 2001
From: Colin Darie <colin@darie.eu>
Date: Thu, 8 Feb 2024 17:08:45 +0100
Subject: [PATCH] style(carte): passe l'UI au DSFR

---
 app/assets/stylesheets/carte.scss             |  5 ----
 .../dossiers/geo_area_component.html.haml     |  4 ++--
 .../dossiers/geo_areas_component.html.haml    |  4 ++--
 .../MapEditor/components/ImportFileInput.tsx  |  7 ++++--
 .../MapEditor/components/PointInput.tsx       | 24 ++++++++-----------
 app/javascript/components/MapEditor/index.tsx | 22 ++++++++---------
 6 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/app/assets/stylesheets/carte.scss b/app/assets/stylesheets/carte.scss
index fa9f9e067..ec8dd3c48 100644
--- a/app/assets/stylesheets/carte.scss
+++ b/app/assets/stylesheets/carte.scss
@@ -1,11 +1,6 @@
 @import "colors";
 @import "constants";
 
-.areas-title {
-  font-weight: bold;
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
 
 .areas {
   margin-bottom: 10px;
diff --git a/app/components/dossiers/geo_area_component.html.haml b/app/components/dossiers/geo_area_component.html.haml
index 99e6f8aef..8498637f2 100644
--- a/app/components/dossiers/geo_area_component.html.haml
+++ b/app/components/dossiers/geo_area_component.html.haml
@@ -1,8 +1,8 @@
-%li{ class: editing ? 'mb-1' : 'flex column mb-2', data: { controller: 'geo-area', geo_area_id_value: geo_area.id } }
+%li{ class: editing ? 'fr-mb-1w' : 'flex column fr-mb-2w', data: { controller: 'geo-area', geo_area_id_value: geo_area.id } }
   - if editing
     = link_to '#', data: { action: 'geo-area#onClick' } do
       = geo_area.label
-    = text_field_tag :description, geo_area.description, data: { action: 'focus->geo-area#onFocus input->geo-area#onInput', geo_area_target: 'description' }, placeholder: 'Description', class: 'no-margin', id: "geo_area_#{geo_area.id}_description"
+    = text_field_tag :description, geo_area.description, data: { action: 'focus->geo-area#onFocus input->geo-area#onInput', geo_area_target: 'description' }, placeholder: 'Description', class: 'fr-input', id: "geo_area_#{geo_area.id}_description"
   - else
     = link_to '#', data: { action: 'geo-area#onClick' } do
       = geo_area.label
diff --git a/app/components/dossiers/geo_areas_component.html.haml b/app/components/dossiers/geo_areas_component.html.haml
index 52f8168f4..bb657eacc 100644
--- a/app/components/dossiers/geo_areas_component.html.haml
+++ b/app/components/dossiers/geo_areas_component.html.haml
@@ -1,5 +1,5 @@
 - if champ.selections_utilisateur.present?
-  .areas-title Sélections utilisateur
+  .fr-label Sélections utilisateur
   .areas
     %ul
       - champ.selections_utilisateur.slice(0, 20).each do |geo_area|
@@ -10,7 +10,7 @@
             et #{champ.selections_utilisateur.size - 20} autres points, lignes ou polygones.
 
 - if champ.cadastres.present?
-  .areas-title Parcelles cadastrales
+  .fr-label Parcelles cadastrales
   .areas
     %ul
       - champ.cadastres.each do |geo_area|
diff --git a/app/javascript/components/MapEditor/components/ImportFileInput.tsx b/app/javascript/components/MapEditor/components/ImportFileInput.tsx
index e6d4bb4cd..68be216e2 100644
--- a/app/javascript/components/MapEditor/components/ImportFileInput.tsx
+++ b/app/javascript/components/MapEditor/components/ImportFileInput.tsx
@@ -19,8 +19,11 @@ export function ImportFileInput({
     useImportFiles(featureCollection, { createFeatures, deleteFeatures });
 
   return (
-    <div className="file-import" style={{ marginBottom: '10px' }}>
-      <button className="button send primary" onClick={addInputFile}>
+    <div className="file-import fr-mb-3w">
+      <button
+        className="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-add-circle-line"
+        onClick={addInputFile}
+      >
         Ajouter un fichier GPX ou KML
       </button>
       <div>
diff --git a/app/javascript/components/MapEditor/components/PointInput.tsx b/app/javascript/components/MapEditor/components/PointInput.tsx
index c7ef342b0..90eaa2a20 100644
--- a/app/javascript/components/MapEditor/components/PointInput.tsx
+++ b/app/javascript/components/MapEditor/components/PointInput.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useId } from 'react';
 import { fire } from '@utils';
 import type { Feature } from 'geojson';
-import { PlusIcon, LocationMarkerIcon } from '@heroicons/react/outline';
 import CoordinateInput from 'react-coordinate-input';
 
 export function PointInput() {
@@ -27,31 +26,29 @@ export function PointInput() {
   };
 
   return (
-    <>
-      <label
-        className="areas-title mt-1"
-        htmlFor={inputId}
-        style={{ fontSize: '16px' }}
-      >
+    <div className="fr-input-group fr-mt-3w">
+      <label className="fr-label" htmlFor={inputId}>
         Ajouter un point sur la carte
+        <span className="fr-hint-text">
+          Exemple : 43°48&#39;06&#34;N 006°14&#39;59&#34;E
+        </span>
       </label>
-      <div className="flex align-center mt-1 mb-2">
+      <div className="flex flex-gap-1 fr-mt-1w">
         {navigator.geolocation ? (
           <button
             type="button"
-            className="button mr-1"
+            className="fr-btn fr-btn--secondary fr-icon-map-pin-2-line"
             onClick={getCurrentPosition}
             title="Afficher votre position sur la carte"
           >
             <span className="sr-only">
               Afficher votre position sur la carte
             </span>
-            <LocationMarkerIcon className="icon-size-big" aria-hidden />
           </button>
         ) : null}
         <CoordinateInput
           id={inputId}
-          className="m-0 mr-1"
+          className="fr-input"
           value={value}
           onChange={(value: string, { dd }: { dd: [number, number] }) => {
             setValue(value);
@@ -71,7 +68,7 @@ export function PointInput() {
         />
         <button
           type="button"
-          className="button"
+          className="fr-btn fr-icon-add-circle-line"
           onClick={addPoint}
           disabled={!feature}
           title="Ajouter le point avec les coordonnées saisies sur la carte"
@@ -79,9 +76,8 @@ export function PointInput() {
           <span className="sr-only">
             Ajouter le point avec les coordonnées saisies sur la carte
           </span>
-          <PlusIcon className="icon-size-big" aria-hidden />
         </button>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/app/javascript/components/MapEditor/index.tsx b/app/javascript/components/MapEditor/index.tsx
index 7de243a35..315af5a22 100644
--- a/app/javascript/components/MapEditor/index.tsx
+++ b/app/javascript/components/MapEditor/index.tsx
@@ -36,18 +36,16 @@ export default function MapEditor({
 
   return (
     <>
-      <div>
-        <p style={{ marginBottom: '20px' }}>
-          Besoin d&apos;aide ?&nbsp;
-          <a
-            href="https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/cartographie"
-            target="_blank"
-            rel="noreferrer"
-          >
-            consulter les tutoriels video
-          </a>
-        </p>
-      </div>
+      <p className="fr-hint-text fr-mb-2w">
+        Besoin d&apos;aide ?&nbsp;
+        <a
+          href="https://doc.demarches-simplifiees.fr/pour-aller-plus-loin/cartographie"
+          target="_blank"
+          rel="noreferrer"
+        >
+          consulter les tutoriels video
+        </a>
+      </p>
       {error && <FlashMessage message={error} level="alert" fixed={true} />}
 
       <ImportFileInput featureCollection={featureCollection} {...actions} />