From 6d34ea41d2df8d4550ebf268ea783e71fbd9955a Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Sun, 2 Apr 2023 18:42:21 +0200
Subject: [PATCH] Style the new breadcrumbs [SCI-8087]

---
 .../stylesheets/navigation/breadcrumbs.scss   | 20 +++++++++++++-
 .../shared/navigation/_breadcrumbs.html.erb   | 26 +++++++++++++++----
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/navigation/breadcrumbs.scss b/app/assets/stylesheets/navigation/breadcrumbs.scss
index 5e3b80b52..07de15684 100644
--- a/app/assets/stylesheets/navigation/breadcrumbs.scss
+++ b/app/assets/stylesheets/navigation/breadcrumbs.scss
@@ -7,6 +7,7 @@
   column-gap: 14px;
 
   .breadcrumbs-link {
+    display: inline-block;
     color: var(--sn-blue);
     max-width: var(--max-breadcrumbs-link-width);
     white-space: nowrap;
@@ -19,6 +20,23 @@
   }
 
   .delimiter {
-    color: var(--sn-grey);
+    padding-bottom: 4px;
+  }
+
+  .breadcrumbs-collapsed-container {
+    color: var(--sn-blue);
+    position: relative;
+
+    .show-breadcrumbs {
+      align-items: center;
+      cursor: pointer;
+      display: flex;
+      position: relative;
+    }
+
+    a {
+      @include font-button;
+      color: var(--sn-blue);
+    }
   }
 }
diff --git a/app/views/shared/navigation/_breadcrumbs.html.erb b/app/views/shared/navigation/_breadcrumbs.html.erb
index 1183c902a..4ccdda0f4 100644
--- a/app/views/shared/navigation/_breadcrumbs.html.erb
+++ b/app/views/shared/navigation/_breadcrumbs.html.erb
@@ -9,7 +9,11 @@
                   class: "breadcrumbs-link #{first_breadcrumb_item[:class]}",
                   title: first_breadcrumb_item[:label],
                   data: first_breadcrumb_item[:data]) %>
-    <span class="delimiter">&gt;</span>
+    <span class="delimiter">
+      <img src="<%= asset_path "icon_small/navigate_next.svg"%>"
+           alt="navigate next"
+           class="navigate_next">
+    </span>
     <span class="breadcrumbs-collapsed-container">
         <span class="show-breadcrumbs" data-toggle="dropdown" title="<%= t('projects.index.breadcrumbs_collapsed') %>">
           •••
@@ -18,19 +22,27 @@
         <ul class="dropdown-menu breadcrumbs-dropdown" role="menu">
           <% @breadcrumbs_items.each do |item| %>
             <li>
-              <%= link_to(item[:label] + ' >', item[:url],
+              <%= link_to(item[:label], item[:url],
                           data: item[:data]) %>
             </li>
           <% end %>
         </ul>
     </span>
-    <span class="delimiter">&gt;</span>
+    <span class="delimiter">
+      <img src="<%= asset_path "icon_small/navigate_next.svg"%>"
+           alt="navigate next"
+           class="navigate_next">
+    </span>
     <% item = last_breadcrumb_items.first %>
     <%= link_to(item[:label], item[:url],
                 class: "breadcrumbs-link #{item[:class]}",
                 title: item[:label],
                 data: item[:data]) %>
-    <span class="delimiter">&gt;</span>
+    <span class="delimiter">
+      <img src="<%= asset_path "icon_small/navigate_next.svg"%>"
+           alt="navigate next"
+           class="navigate_next">
+    </span>
     <% last_item = last_breadcrumb_items.last %>
     <span class="breadcrumbs-link <%= last_item[:class] %>" title="<%= last_item[:label] %>">
       <%= last_item[:label] %>
@@ -42,7 +54,11 @@
                   class: "breadcrumbs-link #{item[:class]}",
                   title: item[:label],
                   data: item[:data]) %>
-      <span class="delimiter">&gt;</span>
+      <span class="delimiter">
+        <img src="<%= asset_path "icon_small/navigate_next.svg"%>"
+             alt="navigate next"
+             class="navigate_next">
+      </span>
 
     <% end %>
     <span class="breadcrumbs-link <%= last_item[:class] %>" title="<%= last_item[:label] %>">