fix icons gone + some UI 💄

betagouv · Jun 30, 2022 · d640147 · d640147
1 parent c21651e
commit d640147
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 8 deletions.
diff --git a/euphrosyne/assets/css/base.css b/euphrosyne/assets/css/base.css
@@ -32,6 +32,15 @@ body {
   background-color: var(--background-default-grey);
 }
 
+
+button:not(:disabled):hover, input[type="button"]:not(:disabled):hover, input[type="image"]:not(:disabled):hover, input[type="reset"]:not(:disabled):hover, input[type="submit"]:not(:disabled):hover {
+  --hover: var(--background-action-high-blue-france-hover);
+}
+
+.button, input[type=submit], input[type=button], .submit-row input, a.button { 
+  border-radius: 0;
+}
+
 a:link,
 a:visited {
   color: inherit;

diff --git a/lab/assets/js/components/file-table.js b/lab/assets/js/components/file-table.js
@@ -83,7 +83,7 @@ export class FileTable extends HTMLTableElement {
     downloadButton.classList.add(
       "download-btn",
       "fr-btn",
-      "fr-fi-download-line",
+      "fr-icon-download-line",
       "fr-btn--secondary"
     );
     downloadButton.textContent = window.gettext("Download file");
@@ -102,7 +102,7 @@ export class FileTable extends HTMLTableElement {
       deleteButton.classList.add(
         "delete-btn",
         "fr-btn",
-        "fr-fi-delete-line",
+        "fr-icon-delete-line",
         "fr-btn--secondary"
       );
       deleteButton.textContent = window.gettext("Delete file");

diff --git a/lab/static/css/admin/project-admin.css b/lab/static/css/admin/project-admin.css
@@ -22,3 +22,7 @@
 td.field-status {
   white-space: nowrap;
 }
+
+.deletelink-box {
+  font-size: 13px;
+}
diff --git a/lab/static/css/admin/run.css b/lab/static/css/admin/run.css
@@ -38,4 +38,8 @@
 #changelist .fr-card__title a {
   background-image: none;
   color: var(--text-action-high-blue-france)
+}
+
+#changelist .add-row a {
+  color: var(--text-active-blue-france);
 }
diff --git a/lab/templates/admin/lab/project/change_form.html b/lab/templates/admin/lab/project/change_form.html
@@ -30,12 +30,12 @@ <h1 id="fr-modal-prdformclose-title" class="fr-modal__title">
             <div class="fr-modal__footer">
                 <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
                 <li>
-                    <button class="fr-btn fr-fi-checkbox-line" aria-controls="fr-modal-prdformclose-cancel" >
+                    <button class="fr-btn fr-icon-checkbox-line" aria-controls="fr-modal-prdformclose-cancel" >
                     {% translate 'Cancel' %}
                     </button>
                 </li>
                 <li>
-                    <button class="fr-btn fr-fi-checkbox-line fr-btn--secondary" aria-controls="fr-modal-prdformclose-confirm">
+                    <button class="fr-btn fr-icon-checkbox-line fr-btn--secondary" aria-controls="fr-modal-prdformclose-confirm">
                     {% translate 'Yes, abandon changes' %}
                     </button>
                 </li>

diff --git a/lab/templates/admin/lab/run/change_list.html b/lab/templates/admin/lab/run/change_list.html
@@ -23,7 +23,7 @@
 {% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %}
 
 <div class="add-row align-right">
-  <a id="add_runs" class="fr-link" href="{% url 'admin:lab_run_add' %}?project={{ project.id }}">
+  <a id="add_runs" class="fr-link fr-fi-arrow-right-line fr-link--icon-left" href="{% url 'admin:lab_run_add' %}?project={{ project.id }}">
     {% translate "Create a run"%}
   </a>
 </div>

diff --git a/lab/templates/admin/lab/run/run_list.html b/lab/templates/admin/lab/run/run_list.html
@@ -10,11 +10,11 @@ <h4 class="fr-card__title flex-container">
             <input type="checkbox" name="_selected_action" value="{{ run.id }}" class="action-select">
             <div class="align-right">
               <a href="{% url "admin:lab_run_change" run.id %}" title="{% translate "Change" %}" class="fr-link">
-                <span class="fr-fi-edit-line" aria-hidden="true"></span>
+                <span class="fr-icon-edit-line" aria-hidden="true"></span>
                 <span class="fr-sr-only" rel="noopener noreferrer">{% translate "Change" %}</span>
               </a>
               <button class="fr-link" aria-controls="delete-run" data-runid="{{ run.id }}">
-                <span class="fr-fi-delete-line" aria-hidden="true"></span>
+                <span class="fr-icon-delete-line" aria-hidden="true"></span>
                 <span class="fr-sr-only" rel="noopener noreferrer">{% translate "Delete" %}</span>
               </button>
             </div>

diff --git a/lab/templates/workplace/workplace.html b/lab/templates/workplace/workplace.html
@@ -23,7 +23,7 @@
             {% for run in runs %}
             <li role="presentation">
                 <button id="tabpanel-run-{{ run.id }}" 
-                        class="fr-tabs__tab fr-fi-checkbox-line fr-tabs__tab--icon-left" 
+                        class="fr-tabs__tab fr-icon-checkbox-line fr-tabs__tab--icon-left" 
                         tabindex="{{ forloop.counter0 }}" 
                         role="tab" 
                         aria-selected="{% if forloop.counter0 == 0 %}true{% else %}false{% endif %}" 

diff --git a/webpack.config.js b/webpack.config.js
@@ -27,6 +27,12 @@ export default {
       "./euphrosyne/assets/js/main.js",
       "@gouvfr/dsfr/dist/core/core.module.min.js",
       "@gouvfr/dsfr/dist/dsfr/dsfr.min.css",
+      // We have to import each stylesheet icon separately due to a webpack
+      // compile error if we import utility.css or icons.css directly.
+      // See https://github.com/GouvernementFR/dsfr/issues/309
+      "@gouvfr/dsfr/dist/utility/icons/icons-design/icons-design.min.css",
+      "@gouvfr/dsfr/dist/utility/icons/icons-communication/icons-communication.min.css",
+      "@gouvfr/dsfr/dist/utility/icons/icons-system/icons-system.min.css",
       "remixicon/fonts/remixicon.css",
       "./euphrosyne/assets/css/base.css",
     ],