spree_admin 5.2.6 → 5.3.0.rc1

data/app/views/spree/admin/products/form/_categorization.html.erb

@@ -1,5 +1,5 @@
 <% if can?(:manage, Spree::Classification) || can?(:manage, ActsAsTaggableOn::Tag) %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-header">
       <h5 class="card-title">
         <%= Spree.t(:categorization) %>
@@ -14,7 +14,7 @@
             multiple: true,
             active_option: @product.taxon_ids,
             url: spree.admin_taxons_select_options_path(format: :json),
-            class: 'w-100' %>
+            class: 'w-full' %>
         <% elsif @product.taxons.any? %>
           <%= f.label :taxon_ids, Spree.t(:taxonomies) %>
 
@@ -31,7 +31,7 @@
       <% if can?(:manage, ActsAsTaggableOn::Tag) %>
         <div class="form-group">
           <%= f.label :tag_list, Spree.t(:tags) %>
-          <%= tom_select_tag 'product[tag_list]', multiple: true, class: 'w-100', options: tags_json_array, active_option: @product.tag_list, value_field: :name, create: true %>
+          <%= tom_select_tag 'product[tag_list]', multiple: true, class: 'w-full', options: tags_json_array, active_option: @product.tag_list, value_field: :name, create: true %>
         </div>
       <% end %>
     </div>

data/app/views/spree/admin/products/form/_inventory.html.erb

@@ -1,5 +1,5 @@
-<div class="inventory-form card mb-4">
-  <div class="card-header d-flex align-items-center justify-content-between">
+<div class="inventory-form card mb-6">
+  <div class="card-header flex items-center justify-between">
     <h5 class="card-title"><%= Spree.t(:inventory) %></h5>
 
     <% if can?(:manage, Spree::StockLocation) %>
@@ -7,7 +7,7 @@
     <% end %>
   </div>
   <div class="card-body">
-    <div class="custom-control custom-checkbox mb-4">
+    <div class="custom-control form-checkbox mb-6">
       <%= f.check_box :track_inventory,
             class: 'custom-control-input',
             data: {
@@ -18,46 +18,31 @@
       <%= f.label :track_inventory, Spree.t(:track_quantity), class: 'custom-control-label' %>
     </div>
     <div
-      class="master-variant-quantity-form <%= @product.has_variants? || !@product.track_inventory ? 'd-none' : '' %>"
+      class="master-variant-quantity-form <%= @product.has_variants? || !@product.track_inventory ? 'hidden' : '' %>"
       data-product-form-target="<%= @product.has_variants? ? '' : 'quantityForm' %>"
     >
-      <h6 class="font-weight-bold"><%= Spree.t(:quantity) %></h6>
-      <hr class="mt-0">
-      <div class="mb-4">
+      <h6 class="font-semibold"><%= Spree.t(:quantity) %></h6>
+      <hr class="my-6">
+      <div>
         <%= f.fields_for :master, @product.master do |vf| %>
           <%= vf.fields_for :stock_items do |sif| %>
             <%= sif.hidden_field :stock_location_id %>
-            <div class="row mb-2">
-              <div class="col-md-6 d-flex align-items-center">
+            <div class="grid lg:grid-cols-3 gap-x-6 gap-y-2 items-center mb-6 border-b border-gray-200 pb-6">
+              <% if can?(:manage, sif.object.stock_location) %>
+                <%= link_to sif.object.stock_location.name, spree.edit_admin_stock_location_path(sif.object.stock_location) %>
+              <% else %>
                 <%= sif.object.stock_location.name %>
-              </div>
-              <div class="col-md-2">
-                <%= sif.number_field :count_on_hand, class: 'form-control' %>
-              </div>
-              <div class="col-md-4">
-                <div class="custom-control custom-checkbox d-flex align-items-center h-100">
-                  <%= sif.check_box :backorderable, class: 'custom-control-input' %>
-                  <%= sif.label :backorderable, Spree.t(:continue_selling_when_out_of_stock), class: 'custom-control-label' %>
-                </div>
-              </div>
+              <% end %>
+              <%= sif.number_field :count_on_hand, class: 'form-input' %>
+              <%= sif.spree_check_box :backorderable, label: Spree.t(:continue_selling_when_out_of_stock) %>
             </div>
           <% end %>
         <% end %>
       </div>
     </div>
-    <div class="row">
-      <div class="col-md-6">
-        <div class="form-group">
-          <%= f.label :sku, Spree.t('admin.products.inventory.sku') %>
-          <%= f.text_field :sku, class: 'form-control' %>
-        </div>
-      </div>
-      <div class="col-md-6">
-        <div class="form-group">
-          <%= f.label :barcode, Spree.t('admin.products.inventory.barcode') %>
-          <%= f.text_field :barcode, class: 'form-control' %>
-        </div>
-      </div>
+    <div class="grid lg:grid-cols-2 gap-x-6 gap-y-2">
+      <%= f.spree_text_field :sku, label: Spree.t(:sku) %>
+      <%= f.spree_text_field :barcode, label: Spree.t(:barcode) %>
     </div>
   </div>
 </div>

data/app/views/spree/admin/products/form/_properties.html.erb

@@ -1,5 +1,5 @@
-<div class="card mb-4">
-  <div class="card-header d-flex align-items-center justify-content-between">
+<div class="card mb-6">
+  <div class="card-header flex items-center justify-between">
     <h5 class="card-title"><%= Spree.t(:properties) %></h5>
 
     <% if can?(:manage, Spree::Property) %>
@@ -20,21 +20,21 @@
           <%= product_property_form.hidden_field :id %>
           <%= product_property_form.hidden_field :property_id %>
           <tr>
-            <td class="align-top pt-3 w-25">
+            <td class="align-top pt-4 w-1/4">
               <code><%= property.name %></code>
             </td>
-            <td class="w-75">
+            <td class="w-3/4">
               <div class="form-group">
                 <% if property.long_text? %>
-                  <%= product_property_form.text_area :value, { class: 'form-control', data: { controller: 'textarea-autogrow'} } %>
+                  <%= product_property_form.text_area :value, { class: 'form-input', data: { controller: 'textarea-autogrow'} } %>
                 <% elsif property.number? %>
-                  <%= product_property_form.number_field :value, class: 'form-control' %>
+                  <%= product_property_form.number_field :value, class: 'form-input' %>
                 <% elsif property.rich_text? %>
                   <div class="trix-container">
                     <%= product_property_form.rich_text_area :value %>
                   </div>
                 <% else %>
-                  <%= product_property_form.text_field :value, class: 'form-control' %>
+                  <%= product_property_form.text_field :value, class: 'form-input' %>
                 <% end %>
               </div>
             </td>

data/app/views/spree/admin/products/form/_shipping.html.erb

@@ -1,4 +1,4 @@
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title"><%= Spree.t(:shipping) %></h5>
   </div>

data/app/views/spree/admin/products/form/_status.html.erb

@@ -1,7 +1,7 @@
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-body">
-    <div class="row mb-3">
-      <div class="col-6">
+    <div class="grid grid-cols-12 gap-6 mb-6">
+      <div class="col-span-6">
         <%= f.spree_select :status,
                            available_status_options(@product),
                            { selected: @product.status, help_bubble: show_product_status_help_bubble? ? Spree.t('admin.products.status_form.status') : nil },
@@ -11,7 +11,7 @@
                              }
                            } %>
       </div>
-      <div class="col-6 <%= 'd-none' if @product.active? %>" data-product-form-target="makeActiveAt">
+      <div class="col-span-6 <%= 'hidden' if @product.active? %>" data-product-form-target="makeActiveAt">
         <% if can?(:activate, @product) %>
           <%= f.spree_datetime_field :make_active_at,
                                      help_bubble: Spree.t('admin.products.status_form.make_active_at'),
@@ -19,13 +19,13 @@
         <% end %>
       </div>
     </div>
-    <div class="row">
-      <div data-product-form-target="availableOn" class="col-6">
+    <div class="grid grid-cols-12 gap-6">
+      <div data-product-form-target="availableOn" class="col-span-6">
         <%= f.spree_datetime_field :available_on,
                                    help_bubble: Spree.t('admin.products.status_form.available_on'),
                                    max: @product.discontinue_on %>
       </div>
-      <div data-product-form-target="discontinueOn" class="col-6">
+      <div data-product-form-target="discontinueOn" class="col-span-6">
         <%= f.spree_datetime_field :discontinue_on,
                                    help_bubble: Spree.t('admin.products.status_form.discontinue_on'),
                                    min: @product.make_active_at %>

data/app/views/spree/admin/products/form/_stores.html.erb

@@ -1,4 +1,4 @@
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title">
       <%= Spree.t(:stores) %>
@@ -10,7 +10,7 @@
         <p class="form-text"><%= Spree.t('admin.products.stores.choose_stores') %>.</p>
 
         <%= f.collection_check_boxes :store_ids, available_stores, :id, :name do |b| %>
-          <div class="custom-control custom-checkbox mb-1">
+          <div class="custom-control form-checkbox mb-1">
             <%= b.check_box(class: 'custom-control-input') %>
             <%= b.label(class: 'custom-control-label') %>
           </div>

data/app/views/spree/admin/products/form/_tax.html.erb

@@ -1,4 +1,4 @@
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title"><%= Spree.t(:tax) %></h5>
   </div>

data/app/views/spree/admin/products/form/_variants.html.erb

@@ -1,15 +1,25 @@
 <% if @product.has_variants? || can?(:manage_option_types, @product) %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-header">
       <h5 class="card-title"><%= Spree.t(:variants) %></h5>
     </div>
     <% option_types_for_select = @option_types.pluck(:presentation, :id) %>
     <div class="card-body p-0">
+      <%# Build currency format info for JavaScript %>
+      <% currency_formats = supported_currencies.each_with_object({}) do |currency, hash|
+           currency_obj = ::Money::Currency.find(currency)
+           hash[currency.to_s] = {
+             decimal_mark: currency_obj.decimal_mark,
+             thousands_separator: currency_obj.thousands_separator,
+             symbol: currency_obj.symbol
+           }
+         end %>
       <div
         data-controller="variants-form"
         class="variants-form"
         data-action="product-form:toggle-quantity-tracked@window->variants-form#toggleQuantityTracked"
         data-variants-form-locale-value="<%= I18n.locale %>"
+        data-variants-form-currency-formats-value="<%= currency_formats.to_json %>"
         <% if @product.persisted? %> data-variants-form-product-id-value="<%= @product.slug %>" <% end %>
         data-variants-form-current-currency-value="<%= current_currency %>"
         data-variants-form-currencies-value="<%= supported_currencies.map(&:to_s).to_json %>"
@@ -33,8 +43,8 @@
                     <i class="ti ti-grip-vertical"></i>
                   </button>
                 <% end%>
-                <div class="w-100">
-                  <div class="d-flex justify-content-between align-items-center">
+                <div class="w-full">
+                  <div class="flex justify-between items-center">
                     <h6 data-slot="optionName"><%= option_type.presentation %></h6>
                     <% if can?(:manage_option_types, @product) %>
                       <button class="btn btn-light btn-sm" type="button" data-action="variants-form#editOption" data-variants-form-option-id-param="<%= option_type.id %>"><%= Spree.t(:edit) %></button>
@@ -49,8 +59,8 @@
               </div>
             <% end %>
           </div>
-          <div class="options-creator__option options-creator__option--new d-none" data-variants-form-target="newOptionForm">
-            <div class="w-100">
+          <div class="options-creator__option options-creator__option--new hidden" data-variants-form-target="newOptionForm">
+            <div class="w-full">
               <div class="form-group">
                 <label class="label" for="new_option_name"><%= Spree.t(:option_name) %></label>
                 <%= tom_select_tag :new_option_name,
@@ -97,15 +107,15 @@
                     } %>
                 </div>
               </div>
-              <div class="d-flex justify-content-between">
-                <button class="btn btn-light btn-sm" data-action="variants-form#hideNewOptionForm" type="button"><%= Spree.t('actions.discard') %></button>
-                <button class="btn btn-primary btn-sm" data-action="variants-form#handleNewOption" type="button"><%= Spree.t(:done) %></button>
+              <div class="flex justify-between">
+                <button class="btn btn-light" data-action="variants-form#hideNewOptionForm" type="button"><%= Spree.t('actions.discard') %></button>
+                <button class="btn btn-primary" data-action="variants-form#handleNewOption" type="button"><%= Spree.t(:done) %></button>
               </div>
             </div>
           </div>
           <% if can?(:manage_option_types, @product) %>
             <button
-              class="new_option_button"
+              class="new_option_button btn btn-secondary justify-center"
               type="button"
               data-variants-form-target="newOptionButton" data-action="variants-form#showNewOptionForm"
             >
@@ -120,25 +130,25 @@
             </button>
           <% end %>
         </div>
-        <div class="variants-table <% unless @product.has_variants? %>d-none<% end %>" data-variants-form-target="variantsTable">
-          <div class="variants-table__actions gap-3">
+        <div class="variants-table <% unless @product.has_variants? %>hidden<% end %>" data-variants-form-target="variantsTable">
+          <div class="variants-table__actions gap-16">
             <% if supported_currencies.length > 1 %>
-              <div class="d-flex flex-row align-items-center gap-2">
+              <div class="flex flex-row items-center gap-2">
                 <label for="currency" class="mb-0"><%= Spree.t(:currency) %></label>
-                <%= select_tag 'currency', options_for_select(supported_currencies, current_store.default_currency), class: 'variants-table__actions__select custom-select', data: { action: 'variants-form#updateCurrency' } %>
+                <%= select_tag 'currency', options_for_select(supported_currencies, current_store.default_currency), class: 'variants-table__actions__select form-select', data: { action: 'variants-form#updateCurrency' } %>
               </div>
             <% end %>
             <% if available_stock_locations_for_product(@product).size > 1 %>
-              <div class="d-flex flex-row align-items-center gap-2">
+              <div class="flex flex-row items-center gap-2">
                 <label for="stock_location" class="mb-0"><%= Spree.t(:stock_location) %></label>
-                <%= select_tag 'stock_location', variant_form_stock_location_options, class: 'variants-table__actions__select custom-select', data: { action: 'variants-form#updateStockLocationId' } %>
+                <%= select_tag 'stock_location', variant_form_stock_location_options, class: 'variants-table__actions__select form-select', data: { action: 'variants-form#updateStockLocationId' } %>
               </div>
             <% end %>
           </div>
-          <div class="variants-table__header border-top border-bottom">
+          <div class="variants-table__header border-t border-b">
             <% if can?(:destroy, @product.default_variant)  %>
               <div class="variants-table__body__cell column-checkbox">
-                <div class="custom-control custom-checkbox">
+                <div class="custom-control form-checkbox">
                   <%= check_box_tag "ids[]", nil, false, class: "custom-control-input", id: "ids", data: { variants_form_target: "checkboxAll" } %>
                   <label class="custom-control-label" for="ids"><span></span></label>
                 </div>
@@ -146,9 +156,9 @@
             <% end%>
             <div class="variants-table__header__cell column-variant">
               <%= Spree.t(:variant) %>
-              <button data-variants-form-target="deleteButton" data-action="variants-form#deleteSelected" type="button" class="delete-button d-none ml-3">
-                <i class="ti ti-trash"></i> <%= Spree.t(:delete_selected) %>
-              </button>
+            <button data-variants-form-target="deleteButton" data-action="variants-form#deleteSelected" type="button" class="btn btn-danger btn-sm hidden ml-12">
+              <%= icon('trash') %> <%= Spree.t(:delete_selected) %>
+            </button>
             </div>
             <div class="variants-table__header__cell  column-price">
               <%= Spree.t(:price) %>
@@ -162,7 +172,7 @@
           <%= render 'spree/admin/products/form/variants/variant_template', default_stock_location: default_stock_location_for_product(@product) %>
           <div class="variants-table__body" data-variants-form-target="variantsContainer" data-test-id="product-variants-table">
           </div>
-          <div class="variants-table__footer font-size-sm">
+          <div class="variants-table__footer text-sm rounded-b-2xl">
             <%= Spree.t('admin.variants_form.total_inventory_html', stock_location: current_store.default_stock_location.name, count: raw("<span data-variants-form-target='stockItemsCount'>#{@product.total_on_hand}</span>") )%>
           </div>
         </div>

data/app/views/spree/admin/products/form/variants/_option_template.html.erb

@@ -8,8 +8,8 @@
         <i class="ti ti-grip-vertical"></i>
       </button>
     <% end %>
-    <div class="w-100">
-      <div class="d-flex justify-content-between">
+    <div class="w-full">
+      <div class="flex justify-between">
         <h6 data-slot="optionName"></h6>
         <% if can?(:manage_option_types, @product) %>
           <button class="btn btn-light btn-sm" type="button" data-action="variants-form#editOption" data-variants-form-option-id-param=""><%= Spree.t(:edit) %></button>
@@ -20,8 +20,8 @@
   </div>
 </template>
 <template data-variants-form-target="optionFormTemplate">
-  <div class="options-creator__option options-creator__option--form" data-slot="optionForm">
-    <div class="w-100">
+  <div class="options-creator__option options-creator__option--form border-b border-gray-100 mb-4 pb-4" data-slot="optionForm">
+    <div class="w-full">
       <div class="form-group">
         <label class="label" for="option_name"><%= Spree.t(:option_name) %></label>
         <%= tom_select_tag :option_name,
@@ -35,7 +35,7 @@
       </div>
       <div class="form-group">
         <span class="label"><%= Spree.t(:option_values) %></span>
-        <div data-controller="multi-tom-select" class="values-inputs" data-variants-form-target="newOptionValuesSelectContainer" data-slot="optionValuesSelectContainer">
+        <div data-controller="multi-tom-select" class="values-inputs flex flex-col gap-2" data-variants-form-target="newOptionValuesSelectContainer" data-slot="optionValuesSelectContainer">
           <%= tom_select_tag "new_option_values[]",
             template: true,
             multiple: false,
@@ -50,9 +50,9 @@
             } %>
         </div>
       </div>
-      <div class="d-flex justify-content-between">
-        <button class="btn btn-danger btn-outline btn-sm" data-action="variants-form#discardOption" data-variants-form-option-id-param="" type="button"><%= Spree.t('actions.destroy') %></button>
-        <button class="btn btn-primary btn-sm" data-variants-form-option-id-param="" data-action="variants-form#saveOption" type="button"><%= Spree.t(:done) %></button>
+      <div class="flex justify-between">
+        <button class="btn btn-danger" data-action="variants-form#discardOption" data-variants-form-option-id-param="" type="button"><%= Spree.t('actions.destroy') %></button>
+        <button class="btn btn-primary" data-variants-form-option-id-param="" data-action="variants-form#saveOption" type="button"><%= Spree.t(:done) %></button>
       </div>
     </div>
   </div>

data/app/views/spree/admin/products/form/variants/_variant_template.html.erb

@@ -3,10 +3,10 @@
 <% can_manage_stock = @product.new_record? ? true : can?(:manage, test_stock_item) %>
 <% can_manage_prices = @product.new_record? ? true : can?(:manage, test_price) %>
 <template data-variants-form-target="variantTemplate">
-  <div class="variants-table__body__row hover-light" data-variants-form-target="variant">
+  <div class="variants-table__body__row hover:bg-gray-25" data-variants-form-target="variant">
     <% if can?(:destroy, @product.default_variant) %>
       <div class="variants-table__body__cell column-checkbox">
-        <div class="custom-control custom-checkbox">
+        <div class="custom-control form-checkbox">
           <input type="checkbox" value="1" class="custom-control-input"  data-variants-form-target="checkbox" id="checkbox_"  data-action="change->variants-form#refresh">
           <label class="custom-control-label" for="checkbox_"><span></span></label>
         </div>
@@ -15,11 +15,11 @@
     <div class="variants-table__body__cell column-variant" data-slot="variantName">
       Medium
     </div>
-    <div class="variants-table__body__cell column-price">
+    <div class="variants-table__body__cell column-price mr-2">
       <% supported_currencies.each_with_index do |currency, i| %>
-        <div class="form-control align-items-center py-0 focus-shadow focus-border mr-2 price-input-container <%= current_currency != currency ? 'd-none' : 'd-flex' %>" <%= !can_manage_prices ? 'readonly' : '' %>>
-          <%= text_field_tag "product[variants_attributes][prices_attributes][#{i}][amount]", '',  class: 'form-control-plaintext px-0', data: { slot: "[prices_attributes][#{currency}][amount]_input", action: 'variants-form#updatePrice', currency: currency.to_s }, readonly: !can_manage_prices %>
-          <span><%= currency_symbol(currency) %></span>
+        <div class="input-group price-input-container <%= current_currency != currency ? 'hidden' : 'flex' %>" <%= !can_manage_prices ? 'readonly' : '' %>>
+          <%= text_field_tag "product[variants_attributes][prices_attributes][#{i}][amount]", '',  class: 'border-0 focus:ring-0 focus:outline-none', data: { slot: "[prices_attributes][#{currency}][amount]_input", action: 'variants-form#updatePrice', currency: currency.to_s }, readonly: !can_manage_prices %>
+          <span class="px-3"><%= currency_symbol(currency) %></span>
         </div>
         <%= hidden_field_tag "product[variants_attributes][prices_attributes][#{i}][currency]", currency, data: {slot: "[prices_attributes][#{currency}][currency]_input"} %>
         <%= hidden_field_tag "product[variants_attributes][prices_attributes][#{i}][id]", "", data: {slot: "[prices_attributes][#{currency}][id]_input"} %>
@@ -27,14 +27,14 @@
     </div>
     <div class="variants-table__body__cell column-quantity">
       <% available_stock_locations_for_product(@product).ids.each_with_index do |id, i|  %>
-        <%= number_field_tag "product[variants_attributes][stock_items_attributes][#{i}][count_on_hand]", 0, class: class_names('form-control', default_stock_location.id == id ? 'd-block' : 'd-none'), data: {slot: "[stock_items_attributes][#{id}][count_on_hand]_input", stock_location_id: id, action: "variants-form#updateCountOnHand blur->variants-form#replaceBlankWithZero" }, readonly: !can_manage_stock %>
+        <%= number_field_tag "product[variants_attributes][stock_items_attributes][#{i}][count_on_hand]", 0, class: class_names('form-input', default_stock_location.id == id ? 'block' : 'hidden'), data: {slot: "[stock_items_attributes][#{id}][count_on_hand]_input", stock_location_id: id, action: "variants-form#updateCountOnHand blur->variants-form#replaceBlankWithZero" }, readonly: !can_manage_stock %>
         <%= hidden_field_tag "product[variants_attributes][stock_items_attributes][#{i}][stock_location_id]", id, data: { slot: "[stock_items_attributes][#{id}][stock_location_id]_input" } %>
         <%= hidden_field_tag "product[variants_attributes][stock_items_attributes][#{i}][id]", "", data: { slot: "[stock_items_attributes][#{id}][id]_input" } %>
       <% end %>
     </div>
     <% if can?(:manage, @product.default_variant) %>
-      <div class="variants-table__body__cell column-actions d-flex align-items-center">
-        <a href="#" class="btn btn-sm btn-light invisible ml-2" data-slot="variantEditButton">
+      <div class="variants-table__body__cell column-actions flex items-center">
+        <a href="#" class="btn btn-light invisible ml-2" data-slot="variantEditButton">
           <%= icon('edit') %>
           <%= Spree.t(:edit)%>
         </a>

data/app/views/spree/admin/products/index.html.erb

@@ -11,20 +11,7 @@
 
 <%= render_admin_partials(:products_header_partials) %>
 
-<div class="card-lg">
-  <% if params[:frame_name].present? %>
-    <%= turbo_frame_tag params[:frame_name], autoscroll: true, data: { autoscroll_block: :start, autoscroll_behavior: :smooth } do %>
-      <%= render 'filters', frame_name: params[:frame_name] %>
-      <%= render 'list' %>
-    <% end %>
-  <% else %>
-    <%= turbo_frame_tag "products", autoscroll: true, data: { autoscroll_behavior: :smooth, turbo_action: 'advance' } do %>
-      <%= render 'spree/admin/shared/export_modal', export_type: Spree::Exports::Products %>
-      <%= render 'filters' %>
-      <%= render 'list' %>
-    <% end %>
-  <% end %>
-</div>
+<%= render_table @collection, :products, bulk_operations: true, export_type: Spree::Exports::Products %>
 
 <p class="documentation-link-container">
   Learn more about

data/app/views/spree/admin/profile/edit.html.erb

@@ -6,10 +6,10 @@
   <%= turbo_save_button_tag Spree.t('actions.update'), form: 'edit_user', data: { admin_target: 'save' } %>
 <% end %>
 
-<div class="row">
-  <div class="col-lg-6 offset-lg-3">
+<div class="grid grid-cols-12 gap-6">
+  <div class="col-span-12 lg:col-span-6 lg:col-start-4">
     <%= form_for @user, url: spree.admin_profile_path, method: :put, as: :user do |f| %>
-      <div class="card mb-4">
+      <div class="card mb-6">
         <div class="card-header">
           <h5 class="card-title"><%= Spree.t('admin.personal_details') %></h5>
         </div>

data/app/views/spree/admin/promotion_actions/_promotion_action.html.erb

@@ -1,7 +1,7 @@
 <%= turbo_frame_tag promotion_action do  %>
   <div class="card" id="<%= spree_dom_id(promotion_action) %>">
-    <div class="card-header d-flex justify-content-between align-items-center">
-      <h5 class="card-title"><%= promotion_action.human_name %></h5>
+    <div class="card-header flex justify-between items-center py-3">
+      <h5 class="card-title text-base"><%= promotion_action.human_name %></h5>
 
       <% if can?(:update, promotion_action) || can?(:destroy, promotion_action) %>
         <%= dropdown portal: false do %>
@@ -10,13 +10,13 @@
           <% end %>
           <%= dropdown_menu do %>
             <%= link_to_with_icon 'pencil', Spree.t('actions.edit'), spree.edit_admin_promotion_action_path(promotion_action.promotion, promotion_action), class: 'dropdown-item' if can?(:update, promotion_action) %>
-            <%= link_to_with_icon 'trash', Spree.t('actions.destroy'), spree.admin_promotion_action_path(promotion_action.promotion, promotion_action), class: 'dropdown-item btn-danger', data: { turbo_method: :delete, turbo_confirm: Spree.t(:are_you_sure), turbo_frame: '_top' } if can?(:destroy, promotion_action) %>
+            <%= link_to_with_icon 'trash', Spree.t('actions.destroy'), spree.admin_promotion_action_path(promotion_action.promotion, promotion_action), class: 'dropdown-item text-red-600 hover:bg-red-100', data: { turbo_method: :delete, turbo_confirm: Spree.t(:are_you_sure), turbo_frame: '_top' } if can?(:destroy, promotion_action) %>
           <% end %>
         <% end %>
       <% end %>
     </div>
     <div class="card-body">
-      <p class="text-muted"><%= promotion_action.human_description %></p>
+      <p class="text-gray-600"><%= promotion_action.human_description %></p>
 
       <% if promotion_action.preferences.present? %>
         <%= render 'spree/admin/shared/preferences', object: promotion_action %>
@@ -31,7 +31,7 @@
         <h6><%= Spree.t(:line_items) %></h6>
         <ul class="list-group">
           <% promotion_action.promotion_action_line_items.each do |line_item| %>
-            <li class="list-group-item d-flex justify-content-between align-items-center">
+            <li class="list-group-item flex justify-between items-center">
               <%= link_to line_item.variant.descriptive_name, spree.edit_admin_product_variant_path(line_item.variant.product, line_item.variant) %>
               <span>
                 <%= Spree.t(:quantity) %>: <%= line_item.quantity %>

data/app/views/spree/admin/promotion_actions/edit.html.erb

@@ -1,14 +1,14 @@
 <%= turbo_frame_tag @promotion_action do %>
   <%= form_with model: @promotion_action, url: spree.admin_promotion_action_path(@promotion, @promotion_action), method: :put, scope: :promotion_action do |f| %>
     <div class="card" id="<%= spree_dom_id(@promotion_action) %>">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <h5 class="card-title"><%= @promotion_action.human_name %></h5>
+      <div class="card-header flex justify-between items-center">
+        <h5 class="card-title text-base"><%= @promotion_action.human_name %></h5>
       </div>
       <div class="card-body">
         <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @promotion_action } %>
         <%= render "spree/admin/promotion_actions/forms/#{@promotion_action.key}", f: f %>
       </div>
-      <div class="card-footer d-flex justify-content-between">
+      <div class="card-footer flex justify-between">
         <%= turbo_save_button_tag Spree.t('actions.update') %>
         <%= link_to Spree.t('actions.discard'), spree.admin_promotion_path(@promotion), class: 'btn btn-light' %>
       </div>

data/app/views/spree/admin/promotion_actions/forms/_create_line_items.html.erb

@@ -7,7 +7,7 @@
     <% end %>
   </template>
 
-  <div class="rounded-lg border">
+  <div class="rounded-xl border">
     <table class="table">
       <thead>
         <tr>

data/app/views/spree/admin/promotion_actions/forms/_create_line_items_row.html.erb

@@ -6,7 +6,7 @@
       <%= tom_select_tag "#{line_item_fields.object_name}[variant_id]",
             url: spree.admin_variants_search_path,
             remote_search: true,
-            class: 'w-100',
+            class: 'w-full',
             required: true %>
     <% else %>
       <%= link_to spree.edit_admin_product_variant_path(line_item_fields.object.variant.product, line_item_fields.object.variant), target: '_blank' do %>
@@ -17,7 +17,7 @@
     <% end %>
   </td>
   <td class="w-20">
-    <%= line_item_fields.number_field :quantity, min: 1, max: line_item_fields.object.variant&.total_on_hand, class: 'form-control', required: true %>
+    <%= line_item_fields.number_field :quantity, min: 1, max: line_item_fields.object.variant&.total_on_hand, class: 'form-input', required: true %>
   </td>
   <td class="w-10 text-right">
     <button type="button" class="btn btn-danger btn-sm" data-action="nested-form#remove">

data/app/views/spree/admin/promotion_actions/new.html.erb

@@ -8,19 +8,18 @@
     <div class="dialog-body">
       <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @promotion_action } %>
       <% if @promotion_action.type.nil? %>
-        <%= render 'spree/admin/shared/spinner' %>
         <% options_for_promotion_action_types(@promotion).each do |action_type| %>
           <% key = action_type.to_s.demodulize.underscore %>
-            <%= link_to spree.new_admin_promotion_action_path(@promotion, promotion_action: { type: action_type }), class: 'd-flex align-items-top w-100 py-2 px-3 hover-gray rounded-lg mb-2', data: { turbo_prefetch: false } do %>
+            <%= link_to spree.new_admin_promotion_action_path(@promotion, promotion_action: { type: action_type }), class: 'flex align-items-top w-full py-2 px-4 hover:bg-gray-100 rounded-xl mb-2', data: { turbo_prefetch: false } do %>
               <%= radio_button_tag :type, action_type, checked: @promotion_action.type == action_type %>
-              <div class="ml-3">
+              <div class="ml-4">
                 <h6><%= Spree.t("promotion_action_types.#{key}.name") %></h6>
-                <p class="text-muted mb-0"><%= Spree.t("promotion_action_types.#{key}.description") %></p>
+                <p class="text-gray-600 mb-0"><%= Spree.t("promotion_action_types.#{key}.description") %></p>
               </div>
             <% end %>
         <% end %>
       <% else %>
-        <p class="text-muted">
+        <p class="text-gray-600">
           <%= @promotion_action.human_description %>
         </p>
         <%= f.hidden_field :type, value: @promotion_action.type %>