feat(backend): Use Remixicons when new navbar is used

admin/app/components/solidus_admin/orders/show/adjustments/index/component.rb

@@ -13,8 +13,6 @@ def title
     t(".title", number: @order.number)
   end
 
-  NBSP = " ".html_safe
-
   def initialize(order:, adjustments:)
     @order = order
     @adjustments = adjustments

backend/app/assets/javascripts/spree/backend/handlebars_extensions.js → backend/app/assets/javascripts/spree/backend/handlebars_extensions.js.erb

@@ -24,3 +24,20 @@ Handlebars.registerHelper("concat", function() {
 Handlebars.registerHelper("format_money", function(amount, currency) {
   return Spree.formatMoney(amount, currency);
 });
+
+Handlebars.registerHelper("solidus_icon", function(name) {
+  var useRemix = <%= Spree::Backend::Config.admin_updated_navbar.to_json %>;
+  var spritePath = <%= image_path("spree/backend/themes/solidus_admin/remixicon.symbol.svg").to_json %>;
+  var remixNames = <%= Spree::Backend::REMIX_ICONS.to_json %>;
+  var symbol = remixNames[name];
+
+  if (useRemix && symbol) {
+    return new Handlebars.SafeString(
+      '<svg aria-hidden="true" style="fill: currentColor; width: 16px; height: 16px;"><use xlink:href="' +
+      spritePath + '#' + symbol + '"></use></svg>'
+    );
+  }
+  return new Handlebars.SafeString(
+    '<i class="fa fa-' + name + '" aria-hidden="true"></i>'
+  );
+});

backend/app/assets/javascripts/spree/backend/templates/orders/line_item.hbs

@@ -33,12 +33,12 @@
 </td>
 <td class="cart-line-item-delete actions" data-hook="cart_line_item_delete">
   {{#if editing}}
-    <button class="save-line-item fa fa-ok no-text with-tip" data-action="save" title="{{ t "actions.save" }}"></button>
+    <button class="save-line-item icon_button no-text with-tip" data-action="save" title="{{ t "actions.save" }}">{{solidus_icon "ok"}}</button>
     {{#unless noCancel}}
-      <button class="cancel-line-item fa fa-cancel no-text with-tip" data-action="cancel" title="{{ t "actions.cancel" }}"></button>
+      <button class="cancel-line-item icon_button no-text with-tip" data-action="cancel" title="{{ t "actions.cancel" }}">{{solidus_icon "cancel"}}</button>
     {{/unless}}
   {{else}}
-    <button class="edit-line-item fa fa-edit no-text with-tip" data-action="edit" title="{{ t "actions.edit" }}"></button>
-    <button class="delete-line-item fa fa-trash no-text with-tip" data-action="remove" title="{{ t "actions.delete" }}"></button>
+    <button class="edit-line-item icon_button no-text with-tip" data-action="edit" title="{{ t "actions.edit" }}">{{solidus_icon "edit"}}</button>
+    <button class="delete-line-item icon_button no-text with-tip" data-action="remove" title="{{ t "actions.delete" }}">{{solidus_icon "trash"}}</button>
   {{/if}}
 </td>

backend/app/assets/javascripts/spree/backend/templates/orders/shipment_tracking.hbs

@@ -16,9 +16,9 @@
 </td>
 <td class="actions">
   {{#if editing}}
-    <button class="js-save fa fa-check no-text with-tip" data-action="save" title="{{ t "actions.save" }}"></button>
-    <button class="js-cancel fa fa-cancel no-text with-tip" data-action="cancel" title="{{ t "actions.cancel" }}"></button>
+    <button class="js-save icon_button no-text with-tip" data-action="save" title="{{ t "actions.save" }}">{{solidus_icon "check"}}</button>
+    <button class="js-cancel icon_button no-text with-tip" data-action="cancel" title="{{ t "actions.cancel" }}">{{solidus_icon "cancel"}}</button>
   {{else}}
-    <button class="js-edit fa fa-edit no-text with-tip" data-action="edit" title=""{{ t "actions.edit" }}"></button>
+    <button class="js-edit icon_button no-text with-tip" data-action="edit" title="{{ t "actions.edit" }}">{{solidus_icon "edit"}}</button>
   {{/if}}
 </td>

backend/app/assets/javascripts/spree/backend/templates/orders/shipping_method.hbs

@@ -25,10 +25,10 @@
 <td class="actions">
   {{#if editing}}
     {{#if shipping_rates}}
-    <button class="js-save fa fa-check no-text with-tip" data-action="save" title="{{ t "actions.save" }}"></button>
+    <button class="js-save icon_button no-text with-tip" data-action="save" title="{{ t "actions.save" }}">{{solidus_icon "check"}}</button>
     {{/if}}
-    <button class="js-cancel fa fa-cancel no-text with-tip" data-action="cancel" title="{{ t "actions.cancel" }}"></button>
+    <button class="js-cancel icon_button no-text with-tip" data-action="cancel" title="{{ t "actions.cancel" }}">{{solidus_icon "cancel"}}</button>
   {{else}}
-    <button class="js-edit fa fa-edit no-text with-tip" data-action="edit" title=""{{ t "actions.edit" }}"></button>
+    <button class="js-edit icon_button no-text with-tip" data-action="edit" title="{{ t "actions.edit" }}">{{solidus_icon "edit"}}</button>
   {{/if}}
 </td>

backend/app/assets/javascripts/spree/backend/templates/products/sortable.hbs

@@ -1,5 +1,5 @@
 <a href="#" id="product_{{ id }}" data-product-id="{{ id }}" class="sort_item list-group-item">
-  <i class="fa fa-sort"></i>
+  {{solidus_icon "sort"}}
   <span class="product_name">{{ name }}</span>
   <span class="float-right">{{ display_price }}</span>
 </a>

backend/app/assets/javascripts/spree/backend/templates/stock_items/stock_location_stock_item.hbs

@@ -34,6 +34,6 @@
   </form>
 </td>
 <td class="actions">
-  <a class="submit fa fa-check icon_link with-tip no-text" data-action="save" href="#"></a>
-  <a class="cancel fa fa-cancel icon_link with-tip no-text" data-action="cancel" href="#"></a>
+  <a class="submit icon_link with-tip no-text" data-action="save" href="#">{{solidus_icon "check"}}</a>
+  <a class="cancel icon_link with-tip no-text" data-action="cancel" href="#">{{solidus_icon "cancel"}}</a>
 </td>

backend/app/assets/javascripts/spree/backend/templates/taxons/_tree.hbs

@@ -4,13 +4,13 @@
     <div class="taxon">
     {{else}}
     <div class="taxon sortable">
-      <i class="fa fa-arrows"></i>
+      {{solidus_icon "arrows"}}
     {{/if}}
       {{name}}
       <div class="actions float-right">
-        <a href="#" class="js-taxon-add-child fa fa-plus icon_link no-text"></a>
-        <a href="{{admin_url}}/taxonomies/{{taxonomy_id}}/taxons/{{id}}/edit" class="fa fa-edit icon_link no-text"></a>
-        <a href="#" class="js-taxon-delete fa fa-trash icon_link no-text"></a>
+        <a href="#" class="js-taxon-add-child icon_link no-text">{{solidus_icon "plus"}}</a>
+        <a href="{{admin_url}}/taxonomies/{{taxonomy_id}}/taxons/{{id}}/edit" class="icon_link no-text">{{solidus_icon "edit"}}</a>
+        <a href="#" class="js-taxon-delete icon_link no-text">{{solidus_icon "trash"}}</a>
       </div>
     </div>
     {{#if taxons }}

backend/app/assets/javascripts/spree/backend/templates/variants/split.hbs

@@ -22,6 +22,6 @@
   </form>
 </td>
 <td class='actions'>
-  <button class="save-split icon_link fa fa-ok no-text with-tip" data-action="save" title="{{ t "actions.save" }}"></button>
-  <button class="cancel-split icon_link fa fa-cancel no-text with-tip" data-action="cancel" title="{{ t "actions.cancel" }}"></button>
+  <button class="save-split icon_button no-text with-tip" data-action="save" title="{{ t "actions.save" }}">{{solidus_icon "ok"}}</button>
+  <button class="cancel-split icon_button no-text with-tip" data-action="cancel" title="{{ t "actions.cancel" }}">{{solidus_icon "cancel"}}</button>
 </td>

backend/app/assets/stylesheets/spree/backend/shared/_icons.scss

@@ -1,10 +1,12 @@
 // Some fixes for fontwesome stylesheets
-[class^="icon-"], [class*=" icon-"] {
+[class^="icon-"],
+[class*=" icon-"] {
   &:before {
     padding-right: 5px;
   }
 
-  &.button, &.icon_link {
+  &.button,
+  &.icon_link {
     width: auto;
 
     &:before {
@@ -15,29 +17,53 @@
 }
 
 .btn.fa {
-  font: normal normal $btn-font-weight #{$font-size-base}/#{$btn-line-height} "FontAwesome";
+  font: normal normal $btn-font-weight #{$font-size-base}/#{$btn-line-height}
+    "FontAwesome";
 }
 
-.fa-email     { @extend .fa-envelope }
-.fa-resume    { @extend .fa-refresh  }
-.fa-approve   { @extend .fa-check    }
+.fa-email {
+  @extend .fa-envelope;
+}
+.fa-resume {
+  @extend .fa-refresh;
+}
+.fa-approve {
+  @extend .fa-check;
+}
 
 .fa-remove,
 .fa-cancel,
-.fa-void      { @extend .fa-times    }
+.fa-void {
+  @extend .fa-times;
+}
 
-.fa-failure   { @extend .fa-thumbs-down }
+.fa-failure {
+  @extend .fa-thumbs-down;
+}
 
-.fa-trash     { @extend .fa-trash-o  }
+.fa-trash {
+  @extend .fa-trash-o;
+}
 
-.fa-capture   { @extend .fa-thumbs-up }
-.fa-credit    { @extend .fa-check    }
-.fa-approve   { @extend .fa-check    }
-.fa-icon-cogs { @extend .fa-cogs     }
+.fa-capture {
+  @extend .fa-thumbs-up;
+}
+.fa-credit {
+  @extend .fa-check;
+}
+.fa-approve {
+  @extend .fa-check;
+}
+.fa-icon-cogs {
+  @extend .fa-cogs;
+}
 .fa-ok,
-.fa-icon-ok   { @extend .fa-check    }
+.fa-icon-ok {
+  @extend .fa-check;
+}
 
-button, a {
+button,
+a {
   &.fa:before {
     padding-right: 5px;
   }
@@ -49,11 +75,37 @@ button, a {
 .icon-external-link {
   @extend .fa;
 }
-.icon-user          { @extend .fa-user; }
-.icon-signout       { @extend .fa-sign-out; }
-.icon-external-link { @extend .fa-external-link; }
+.icon-user {
+  @extend .fa-user;
+}
+.icon-signout {
+  @extend .fa-sign-out;
+}
+.icon-external-link {
+  @extend .fa-external-link;
+}
 
 // Avoid ugly default browser font (usually a serif) when an element has an icon AND text
 .fa {
   font-family: "FontAwesome", $font-family-base !important;
 }
+
+.content-wrapper {
+  svg.icon {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+  }
+
+  .icon_button,
+  .icon_link {
+    &:has(svg) {
+      display: inline-flex;
+      width: 20px;
+      height: 20px;
+      align-items: center;
+      gap: 0.25rem;
+      vertical-align: -0.3em;
+    }
+  }
+}

backend/app/assets/stylesheets/spree/backend/shared/_tables.scss

@@ -23,6 +23,14 @@ table {
       padding: 3px 0;
     }
 
+    .icon_link:has(svg) {
+      color: $color-dark;
+
+      &:hover {
+        color: $color-dark-light;
+      }
+    }
+
     &.actions {
       text-align: right;
       padding-left: 1.25rem;
@@ -48,17 +56,33 @@ table {
         }
       }
 
-      button[class*='fa-'] {
-        color: $link-color;
+      button[class*="fa-"],
+      button.icon_button:has(.fa) {
+        padding: 0 !important;
+      }
+
+      button[class*="fa-"],
+      .icon_button {
+        color: $color-dark;
         background: transparent;
         border: 0 none;
-        padding: 0 !important;
 
         &:hover {
+          color: $color-dark-light;
           background: transparent;
         }
       }
 
+      .icon_link:has(svg),
+      .icon_button:has(svg) {
+        padding: 2px;
+
+        + .icon_link:has(svg),
+        + .icon_button:has(svg) {
+          margin-left: 2px;
+        }
+      }
+
       .fa-envelope-alt, .fa-eye-open {
         color: $link-color;
         padding-left: 0px;
@@ -68,28 +92,44 @@ table {
         }
       }
 
-      .fa-trash:hover, .fa-void:hover, .fa-failure:hover {
+      .fa-trash:hover,
+      .fa-void:hover,
+      .fa-failure:hover,
+      [data-action="remove"]:hover {
         color: theme-color("danger");
       }
 
-      .fa-cancel:hover {
+      .fa-cancel:hover,
+      [data-action="cancel"]:hover {
         color: theme-color("warning");
       }
 
-      .fa-edit:hover, .fa-capture:hover, .fa-ok:hover, .fa-plus:hover,
-      .fa-save:hover, .fa-arrows-h:hover, .fa-check:hover {
+      .fa-edit:hover,
+      .fa-capture:hover,
+      .fa-ok:hover,
+      .fa-plus:hover,
+      .fa-save:hover,
+      .fa-arrows-h:hover,
+      .fa-check:hover,
+      [data-action="save"]:hover,
+      [data-action="edit"]:hover,
+      [data-action="capture"]:hover,
+      [data-action="add"]:hover,
+      [data-action="new"]:hover {
         color: theme-color("success");
       }
 
-      .fa-copy:hover {
+      .fa-copy:hover,
+      [data-action="clone"]:hover {
         color: theme-color("warning");
       }
 
       .fa-thumbs-up:hover {
         color: theme-color("success");
       }
 
-      .fa-thumbs-down:hover {
+      .fa-thumbs-down:hover,
+      [data-action="void"]:hover {
         color: theme-color("danger");
       }
     }

backend/app/helpers/spree/admin/adjustments_helper.rb

@@ -5,7 +5,7 @@ module Admin
     module AdjustmentsHelper
       def adjustment_state(adjustment)
         icon = adjustment.finalized? ? "lock" : "unlock"
-        content_tag(:span, "", class: "fa fa-#{icon}")
+        solidus_icon(icon)
       end
 
       def display_adjustable(adjustable)