spree_admin 5.2.6 → 5.3.0.rc1

data/app/views/spree/admin/promotion_rules/_promotion_rule.html.erb

@@ -1,7 +1,7 @@
 <%= turbo_frame_tag promotion_rule do  %>
   <div class="card" id="<%= spree_dom_id(promotion_rule) %>">
-    <div class="card-header d-flex justify-content-between align-items-center">
-      <h5 class="card-title"><%= promotion_rule.human_name %></h5>
+    <div class="card-header flex justify-between items-center py-3">
+      <h5 class="card-title text-base"><%= promotion_rule.human_name %></h5>
 
       <% if can?(:update, promotion_rule) || can?(:destroy, promotion_rule) %>
         <%= dropdown portal: false do %>
@@ -10,22 +10,24 @@
           <% end %>
           <%= dropdown_menu do %>
             <%= link_to_with_icon 'pencil', Spree.t('actions.edit'), spree.edit_admin_promotion_rule_path(promotion_rule.promotion, promotion_rule), class: 'dropdown-item' if can?(:update, promotion_rule) %>
-            <%= link_to_with_icon 'trash', Spree.t('actions.destroy'), spree.admin_promotion_rule_path(promotion_rule.promotion, promotion_rule), class: 'dropdown-item btn-danger', data: { turbo_method: :delete, turbo_confirm: Spree.t(:are_you_sure), turbo_frame: '_top' } if can?(:destroy, promotion_rule) %>
+            <%= link_to_with_icon 'trash', Spree.t('actions.destroy'), spree.admin_promotion_rule_path(promotion_rule.promotion, promotion_rule), 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_rule) %>
           <% end %>
         <% end %>
       <% end %>
     </div>
     <div class="card-body">
-      <p class="text-muted"><%= promotion_rule.human_description %></p>
+      <p class="text-gray-600 mb-3">
+      <%= promotion_rule.human_description %>
+      </p>
 
       <% if promotion_rule.preferences.present? %>
         <%= render 'spree/admin/shared/preferences', object: promotion_rule %>
       <% end %>
 
       <% if promotion_rule.respond_to?(:preferred_eligible_values) %>
-        <div class="mt-3">
+        <div class="mt-4">
           <span><%= Spree.t(:option_values) %>:</span>
-          <div class="d-flex flex-wrap gap-2">
+          <div class="flex flex-wrap gap-2">
             <% promotion_rule_option_values(promotion_rule.preferred_eligible_values).each do |value| %>
               <strong><%= value %></strong>
             <% end %>
@@ -34,9 +36,9 @@
       <% end %>
 
       <% if promotion_rule.respond_to?(:products) %>
-        <div class="mt-3">
+        <div class="mt-4">
           <span><%= Spree.t(:products) %>:</span>
-          <div class="d-flex flex-wrap gap-2">
+          <div class="flex flex-wrap gap-2">
             <% promotion_rule.products.pluck(:name).each do |product_name| %>
             <strong><%= product_name %></strong>
             <% end %>
@@ -45,9 +47,8 @@
       <% end %>
 
       <% if promotion_rule.respond_to?(:taxons) %>
-        <div class="mt-3">
-          <span><%= Spree.t(:taxons) %>:</span>
-          <div class="d-flex flex-wrap gap-2">
+        <div class="mt-4">
+          <div class="flex flex-wrap gap-2">
             <% promotion_rule.taxons.pluck(:pretty_name).each do |taxon_name| %>
               <strong><%= taxon_name %></strong>
             <% end %>
@@ -56,9 +57,8 @@
       <% end %>
 
       <% if promotion_rule.respond_to?(:users) %>
-        <div class="mt-3">
-          <span><%= Spree.t(:users) %>:</span>
-          <div class="d-flex flex-wrap gap-2">
+        <div class="mt-4">
+          <div class="flex flex-wrap gap-2">
             <% promotion_rule.users.pluck(:email).each do |user_email| %>
               <strong><%= user_email %></strong>
             <% end %>

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

@@ -1,14 +1,17 @@
 <%= turbo_frame_tag @promotion_rule do %>
   <%= form_with model: @promotion_rule, url: spree.admin_promotion_rule_path(@promotion, @promotion_rule), method: :put, scope: :promotion_rule do |f| %>
     <div class="card" id="<%= spree_dom_id(@promotion_rule) %>">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <h5 class="card-title"><%= @promotion_rule.human_name %></h5>
+      <div class="card-header flex justify-between items-center">
+        <h5 class="card-title text-base"><%= @promotion_rule.human_name %></h5>
       </div>
       <div class="card-body">
         <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @promotion_rule } %>
+        <p class="text-gray-600 mb-3">
+          <%= @promotion_rule.human_description %>
+        </p>
         <%= render "spree/admin/promotion_rules/forms/#{@promotion_rule.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_rules/forms/_customer_group.html.erb

@@ -0,0 +1,9 @@
+<div class="form-group">
+  <%= label_tag "promotion_rule[preferred_customer_group_ids][]", Spree.t('customer_group_rule.choose_customer_groups') %>
+  <%= tom_select_tag "promotion_rule[preferred_customer_group_ids][]",
+    multiple: true,
+    url: spree.select_options_admin_customer_groups_path,
+    active_option: f.object.preferred_customer_group_ids,
+    preloaded_options: Spree::CustomerGroup.where(id: f.object.preferred_customer_group_ids).pluck(:name, :id)
+  %>
+</div>

data/app/views/spree/admin/promotion_rules/forms/_item_total.html.erb

@@ -1,23 +1,23 @@
-<div class="row mb-3">
-  <div class="col-6">
-    <%= f.select :preferred_operator_min, 
+<div class="grid grid-cols-12 gap-6 mb-6">
+  <div class="col-span-6">
+    <%= f.select :preferred_operator_min,
                  options_for_select(Spree::Promotion::Rules::ItemTotal::OPERATORS_MIN.map{|o| [Spree.t("item_total_rule.operators.#{o}"),o]}, f.object.preferred_operator_min),
-                 {}, 
-                 { class: 'custom-select' } %>
+                 {},
+                 { class: 'form-select' } %>
   </div>
-  <div class="col-6">
-    <%= f.number_field :preferred_amount_min, class: 'form-control', required: true %>
+  <div class="col-span-6">
+    <%= f.number_field :preferred_amount_min, class: 'form-input', required: true %>
   </div>
 </div>
-<div class="row">
-  <div class="col-6">
+<div class="grid grid-cols-12 gap-6">
+  <div class="col-span-6">
     <%= f.select :preferred_operator_max,
                  options_for_select(Spree::Promotion::Rules::ItemTotal::OPERATORS_MAX.map{|o| [Spree.t("item_total_rule.operators.#{o}"),o]}, f.object.preferred_operator_max),
                  {},
-                 { class: 'custom-select' } %>
+                 { class: 'form-select' } %>
   </div>
-  <div class="col-6">
-    <%= f.number_field :preferred_amount_max, class: 'form-control' %>
+  <div class="col-span-6">
+    <%= f.number_field :preferred_amount_max, class: 'form-input' %>
 
     <span class="form-text mt-2">
       Leave this field blank to not limit the maximum amount.

data/app/views/spree/admin/promotion_rules/forms/_option_value.html.erb

@@ -5,5 +5,5 @@
     remote_search: true,
     remote_search_active_option: active_options_for_option_value_promotion_rule(f.object),
     multiple: true,
-    class: 'w-100 mr-2' %>
+    class: 'w-full mr-2' %>
 </div>

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

@@ -5,22 +5,21 @@
     <% else %>
       <%= dialog_header(@promotion_rule.human_name) %>
     <% end %>
-    <div class="dialog-body">
+    <div class="dialog-body <% if @promotion_rule.type.present? %>overflow-visible<% end %>">
       <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @promotion_rule } %>
       <% if @promotion_rule.type.nil? %>
-        <%= render 'spree/admin/shared/spinner' %>
         <% options_for_promotion_rule_types(@promotion).each do |rule_type| %>
           <% key = rule_type.demodulize.underscore %>
-          <%= link_to spree.new_admin_promotion_rule_path(@promotion, promotion_rule: { type: rule_type }), class: 'd-flex align-items-top w-100 py-2 px-3 hover-gray rounded-lg mb-2', data: { turbo_prefetch: false } do %>
-            <%= radio_button_tag :type, rule_type %>
-            <div class="ml-3">
-              <h6 class="font-weight-bold mb-1"><%= Spree.t("promotion_rule_types.#{key}.name") %></h6>
-              <p class="text-muted mb-0"><%= Spree.t("promotion_rule_types.#{key}.description") %></p>
+          <%= link_to spree.new_admin_promotion_rule_path(@promotion, promotion_rule: { type: rule_type }), class: 'flex align-items-top w-full py-2 px-4 hover:bg-gray-100 rounded-xl mb-2 no-underline', data: { turbo_prefetch: false } do %>
+            <%= radio_button_tag :type, rule_type, class: 'hidden' %>
+            <div class="">
+              <h6 class="font-bold mb-1"><%= Spree.t("promotion_rule_types.#{key}.name") %></h6>
+              <p class="text-gray-600 mb-0"><%= Spree.t("promotion_rule_types.#{key}.description") %></p>
             </div>
           <% end %>
         <% end %>
       <% else %>
-        <p class="text-muted">
+        <p class="text-gray-600 mb-3">
           <%= @promotion_rule.human_description %>
         </p>
         <%= f.hidden_field :type, value: @promotion_rule.type %>

data/app/views/spree/admin/promotions/_actions.html.erb

@@ -1,19 +1,19 @@
-<div class="card mb-4">
-  <div class="card-header d-flex justify-content-between px-3 border-0">
+<div class="card mb-6">
+  <div class="card-header flex justify-between border-0">
     <h5 class="card-title">
       <%= icon('bolt', class: 'mr-2') %>
       <%= Spree.t(:promotion_actions) %>
     </h5>
     <% if can?(:create, Spree::PromotionAction.new(promotion: @promotion)) %>
-      <%= link_to_with_icon 'plus', Spree.t(:add_one), spree.new_admin_promotion_action_path(@promotion), class: 'btn btn-primary btn-sm', data: { turbo_frame: 'dialog', action: 'dialog#open' } %>
+      <%= link_to_with_icon 'plus', Spree.t(:add_one), spree.new_admin_promotion_action_path(@promotion), class: 'btn btn-secondary btn-sm', data: { turbo_frame: 'dialog', action: 'dialog#open' } %>
     <% end %>
   </div>
-  <div class="card-body d-flex flex-column gap-2 px-2 pt-0 pb-2">
+  <div class="card-body flex flex-col gap-2 px-2 pt-0 pb-2">
     <% if @promotion.promotion_actions.empty? %>
-      <div class="text-muted p-5 d-flex align-items-center w-100 justify-content-center">
+      <div class="text-gray-600 p-12 flex items-center w-full justify-center">
         <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::PromotionAction)) %>
         <% if can?(:create, Spree::PromotionAction.new(promotion: @promotion)) %>
-          <%= link_to_with_icon 'plus', Spree.t(:add_one), spree.new_admin_promotion_action_path(@promotion), class: 'btn btn-light btn-sm ml-3', data: { turbo_frame: 'dialog', action: 'dialog#open' } %>
+          <%= link_to_with_icon 'plus', Spree.t(:add_one), spree.new_admin_promotion_action_path(@promotion), class: 'btn btn-light btn-sm ml-6', data: { turbo_frame: 'dialog', action: 'dialog#open' } %>
         <% end %>
       </div>
     <% else %>

data/app/views/spree/admin/promotions/_filters.html.erb

@@ -1,19 +1,19 @@
 <%= search_form_for [:admin, @search], class: "filter-wrap", data: {controller: "filters dialog"} do |f| %>
-    <div class="d-flex flex-column flex-lg-row gap-2">
+    <div class="flex flex-col lg:flex-row gap-2">
       <%= render 'spree/admin/shared/filters_search_bar', param: :name_cont, label: Spree.t(:name) %>
       <%= render "spree/admin/promotions/table_filter_dropdown" %>
-      <%= button_tag type: 'button', class: 'btn btn-light d-flex align-items-center', data: { action: 'dialog#open' } do %>
+      <%= button_tag type: 'button', class: 'btn btn-light flex items-center', data: { action: 'dialog#open' } do %>
         <%= icon "adjustments", class: "mr-1" %>
         <%= Spree.t("admin.filters") %>
       <% end %>
     </div>
 
-  <dialog class="drawer" data-dialog-target="dialog" id="promotion-filters-drawer">
+  <%= drawer(id: 'promotion-filters-drawer', controller_name: 'dialog') do %>
     <%= drawer_header(Spree.t(:filter), 'dialog') %>
     <div class="drawer-body">
         <div class="form-group">
           <%= label_tag :q_code_or_coupon_codes_code_eq, Spree.t(:code) %>
-          <%= f.search_field :code_or_coupon_codes_code_eq, class: "form-control", data: { filters_target: :input } %>
+          <%= f.search_field :code_or_coupon_codes_code_eq, class: "form-input", data: { filters_target: :input } %>
         </div>
       <%= render_admin_partials(:promotions_filters_partials, f: f) %>
     </div>
@@ -21,7 +21,7 @@
       <%= drawer_discard_button('dialog') %>
       <%= render 'spree/admin/shared/filter_submit' %>
     </div>
-  </dialog>
+  <% end %>
 
   <%= render "spree/admin/shared/filter_badge_template" %>
 

data/app/views/spree/admin/promotions/_form.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(:details) %>
@@ -9,7 +9,7 @@
   </div>
 </div>
 
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title">
       <%= Spree.t(:kind) %>
@@ -20,7 +20,7 @@
   </div>
 </div>
 
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title">
       <%= Spree.t(:settings) %>

data/app/views/spree/admin/promotions/_rules.html.erb

@@ -1,33 +1,26 @@
-<div class="card mb-4">
-  <div class="card-header d-flex justify-content-between px-3">
+<div class="card mb-6">
+  <div class="card-header flex justify-between">
     <h5 class="card-title">
       <%= icon('checklist', class: 'mr-2') %>
       <%= Spree.t(:rules) %>
     </h5>
     <% if can?(:create, Spree::PromotionRule.new(promotion: @promotion)) %>
-      <%= link_to_with_icon 'plus', Spree.t(:add_one), spree.new_admin_promotion_rule_path(@promotion), class: 'btn btn-primary btn-sm', data: { turbo_frame: 'dialog', action: 'dialog#open' } %>
+      <%= link_to_with_icon 'plus', Spree.t(:add_one), spree.new_admin_promotion_rule_path(@promotion), class: 'btn btn-secondary btn-sm', data: { turbo_frame: 'dialog', action: 'dialog#open' } %>
     <% end %>
   </div>
-  <div class="card-body">
-    <div class="form-group mb-0">
-      <div class="d-block d-lg-flex gap-3">
-        <%= form_with model: @promotion, url: spree.admin_promotion_path(@promotion), method: :put, data: { controller: 'auto-submit' } do |f| %>
-          <% Spree::Promotion::MATCH_POLICIES.each do |policy| %>
-            <div class="custom-control custom-radio custom-control-inline">
-              <%= f.radio_button :match_policy, policy, class: 'custom-control-input', data: { action: 'auto-submit#submit' } %>
-              <%= f.label "match_policy_#{policy}", class: 'custom-control-label' %>
-            </div>
-          <% end %>
-        <% end %>
-      </div>
-    </div>
+  <div class="card-body pb-0">
+    <%= form_with model: @promotion, url: spree.admin_promotion_path(@promotion), method: :put, data: { controller: 'auto-submit' }, html: { class: 'flex gap-x-6' } do |f| %>
+      <% Spree::Promotion::MATCH_POLICIES.each do |policy| %>
+        <%= f.spree_radio_button :match_policy, policy, { data: { action: 'click->auto-submit#submit' }, label: Spree.t("promotion_form.match_policies.#{policy}") } %>
+      <% end %>
+    <% end %>
   </div>
-  <div class="card-body p-2 d-flex flex-column gap-2">
+  <div class="card-body p-2 flex flex-col gap-2">
     <% if @promotion.promotion_rules.empty? %>
-      <div class="text-muted p-5 d-flex align-items-center w-100 justify-content-center">
+      <div class="text-gray-600 p-12 flex items-center w-full justify-center">
         <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::PromotionRule)) %>
         <% if can?(:create, Spree::PromotionRule.new(promotion: @promotion)) %>
-          <%= link_to_with_icon 'plus', Spree.t(:add_one), spree.new_admin_promotion_rule_path(@promotion), class: 'btn btn-light btn-sm ml-3', data: { turbo_frame: 'dialog', action: 'dialog#open' } %>
+          <%= link_to_with_icon 'plus', Spree.t(:add_one), spree.new_admin_promotion_rule_path(@promotion), class: 'btn btn-light btn-sm ml-6', data: { turbo_frame: 'dialog', action: 'dialog#open' } %>
         <% end %>
       </div>
     <% else %>

data/app/views/spree/admin/promotions/_sidebar.html.erb

@@ -3,8 +3,8 @@
   <% if coupon_codes_count.positive? %>
     <% used_coupon_codes_count = @promotion.coupon_codes.used.count %>
 
-    <div class="card mb-4">
-      <div class="card-header d-flex justify-content-between">
+    <div class="card mb-6">
+      <div class="card-header flex justify-between">
         <h5 class="card-title">
           <%= Spree.t(:coupon_codes) %>
         </h5>
@@ -13,7 +13,7 @@
       <div class="card-body">
         <%= progress_bar_component(used_coupon_codes_count, max: coupon_codes_count) %>
       </div>
-      <div class="card-footer d-flex justify-content-between">
+      <div class="card-footer flex justify-between">
         <span class="badge badge-light">
           <%= Spree.t(:used) %>: <%= used_coupon_codes_count %> / <%= coupon_codes_count %>
         </span>
@@ -26,8 +26,8 @@
 <% end %>
 
 <%= turbo_frame_tag :promotion_edit_details do %>
-  <div class="card mb-4">
-    <div class="card-header d-flex justify-content-between">
+  <div class="card mb-6">
+    <div class="card-header flex justify-between">
       <h5 class="card-title">
         <%= Spree.t(:details) %>
       </h5>
@@ -35,8 +35,8 @@
     </div>
     <div class="card-body p-0">
       <ul class="list-group list-group-flush">
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          <span class="text-muted">
+        <li class="list-group-item flex justify-between items-center">
+          <span class="text-gray-600">
             <%= Spree.t(:name) %>
           </span>
           <span>
@@ -44,8 +44,8 @@
           </span>
         </li>
 
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          <span class="text-muted">
+        <li class="list-group-item flex justify-between items-center">
+          <span class="text-gray-600">
             <%= Spree.t(:created_at) %>
           </span>
           <span>
@@ -53,8 +53,8 @@
           </span>
         </li>
 
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          <span class="text-muted">
+        <li class="list-group-item flex justify-between items-center">
+          <span class="text-gray-600">
             <%= Spree.t(:updated_at) %>
           </span>
           <span>
@@ -62,8 +62,8 @@
           </span>
         </li>
 
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          <span class="text-muted">
+        <li class="list-group-item flex justify-between items-center">
+          <span class="text-gray-600">
             <%= Spree.t(:kind) %>
           </span>
           <span class="badge badge-light">
@@ -72,9 +72,9 @@
         </li>
 
         <% if @promotion.code.present? %>
-          <li class="list-group-item d-flex justify-content-between align-items-center py-2">
-            <span class="text-muted"><%= Spree.t(:coupon_code) %></span>
-            <div class="d-flex align-items-center gap-1">
+          <li class="list-group-item flex justify-between items-center py-2">
+            <span class="text-gray-600"><%= Spree.t(:coupon_code) %></span>
+            <div class="flex items-center gap-1">
               <code><%= @promotion.code.upcase %></code>
               <%= clipboard_component(@promotion.code.upcase) %>
             </div>
@@ -87,7 +87,7 @@
 
 <%= turbo_frame_tag :promotion_edit_settings do %>
   <div class="card">
-    <div class="card-header d-flex justify-content-between">
+    <div class="card-header flex justify-between">
       <h5 class="card-title">
         <%= Spree.t(:settings) %>
       </h5>
@@ -96,29 +96,29 @@
     <div class="card-body p-0">
       <ul class="list-group list-group-flush">
         <% unless @promotion.multi_codes? %>
-          <li class="list-group-item d-flex justify-content-between align-items-center">
-            <span class="text-muted"><%= Spree.t(:usage_limit) %></span>
+          <li class="list-group-item flex justify-between items-center">
+            <span class="text-gray-600"><%= Spree.t(:usage_limit) %></span>
             <%= render 'spree/admin/promotions/usage_limit', promotion: @promotion %>
           </li>
         <% end %>
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          <span class="text-muted">
+        <li class="list-group-item flex justify-between items-center">
+          <span class="text-gray-600">
             <%= I18n.t('activerecord.attributes.spree/promotion.starts_at') %>
           </span>
           <% if @promotion.starts_at %>
             <span><%= spree_time(@promotion.starts_at) %></span>
           <% else %>
-            <span class="text-muted"><%= Spree.t(:not_available) %></span>
+            <span class="text-gray-600"><%= Spree.t(:not_available) %></span>
           <% end %>
         </li>
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          <span class="text-muted">
+        <li class="list-group-item flex justify-between items-center">
+          <span class="text-gray-600">
             <%= Spree.t(:expires_at) %>
           </span>
           <% if @promotion.expires_at %>
             <span><%= spree_time(@promotion.expires_at) %></span>
           <% else %>
-            <span class="text-muted"><%= Spree.t(:not_available) %></span>
+            <span class="text-gray-600"><%= Spree.t(:not_available) %></span>
           <% end %>
         </li>
       </ul>

data/app/views/spree/admin/promotions/_table_filter_dropdown.html.erb

@@ -1,6 +1,6 @@
 <%= dropdown do %>
   <%= dropdown_toggle class: 'btn-light dropdown-toggle' do %>
-    <span class="text-muted font-weight-normal mr-1">
+    <span class="text-gray-600 font-normal mr-1">
       <%= Spree.t(:status) %>
     </span>
     <%= promotion_filter_dropdown_value %>

data/app/views/spree/admin/promotions/_table_row.html.erb

@@ -1,6 +1,6 @@
 <tr id="<%= spree_dom_id promotion %>" data-controller="row-link">
   <td class="w-30 p-0">
-    <%= link_to promotion.name, spree.admin_promotion_path(promotion), class: 'font-weight-bold d-block py-2 px-3 w-100 h-100', data: { row_link_target: :link, turbo_frame: '_top' } %>
+    <%= link_to promotion.name, spree.admin_promotion_path(promotion), class: 'font-bold block py-2 px-4 w-full h-full', data: { row_link_target: :link, turbo_frame: '_top' } %>
   </td>
     <td class="w-20 cursor-pointer" data-action="click->row-link#openLink">
       <% if promotion.coupon_code? && promotion.code.present? %>
@@ -8,16 +8,16 @@
       <% elsif promotion.multi_codes? && promotion.code_prefix.present? %>
         <code><%= promotion.code_prefix %>-<%= '*' * 6 %></code>
       <% else %>
-        <span class="text-muted small"><%= Spree.t(:not_available) %></span>
+        <span class="text-gray-600 small"><%= Spree.t(:not_available) %></span>
       <% end %>
     </td>
   </td>
   <td class="w-10 cursor-pointer" data-action="click->row-link#openLink">
     <span class="badge badge-<% if promotion.automatic? %>info<% else %>light<% end %>">
       <% if promotion.automatic? %>
-        <%= icon('automation', class: 'mr-1') %>
+        <%= icon('automation', class: 'mr-2') %>
       <% else %>
-        <%= icon('ticket', class: 'mr-1') %>
+        <%= icon('ticket', class: 'mr-2') %>
       <% end %>
       <%= promotion.kind.humanize %>
     </span>

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

@@ -2,8 +2,8 @@
 
 <%= turbo_frame_tag :promotion_edit_details do %>
   <%= form_for @promotion, url: object_url, method: :put, data: { turbo_frame: '_top' } do |f| %>
-    <div class="card mb-4">
-      <div class="card-header d-flex justify-content-between">
+    <div class="card mb-6">
+      <div class="card-header flex justify-between">
         <h5 class="card-title">
           <%= Spree.t(:details) %>
         </h5>
@@ -12,7 +12,7 @@
         <%= render 'spree/admin/shared/error_messages', target: @promotion %>
         <div class="form-group">
           <%= f.label :name %>
-          <%= f.text_field :name, class: 'form-control', required: true, autofocus: true %>
+          <%= f.text_field :name, class: 'form-input', required: true, autofocus: true %>
           <%= f.error_message_on :name %>
           <span class="form-text mt-2">
             Customers will see this in their cart and at checkout.
@@ -22,11 +22,11 @@
         <% if @promotion.coupon_code? && !@promotion.multi_codes? %>
           <div class="form-group">   
             <%= f.label :code %>
-            <%= f.text_field :code, class: 'form-control text-uppercase', placeholder: 'Your coupon code' %>
+            <%= f.text_field :code, class: 'form-input uppercase', placeholder: 'Your coupon code' %>
           </div>
         <% end %>
       </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.admin_promotion_path(@promotion), class: 'btn btn-light' do %>
           <%= Spree.t('actions.discard') %>
@@ -48,7 +48,7 @@
         <%= render 'spree/admin/shared/error_messages', target: @promotion %>
         <%= render 'spree/admin/promotions/form/settings', 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.admin_promotion_path(@promotion), class: 'btn btn-light' do %>
           <%= Spree.t('actions.discard') %>

data/app/views/spree/admin/promotions/form/_kind.html.erb

@@ -3,41 +3,41 @@
     <%= f.radio_button :kind, :coupon_code, data: { action: 'change->reveal#show' }, class: 'custom-control-input' %>
     <%= f.label :kind_coupon_code, Spree.t(:coupon_code), class: 'custom-control-label' %>
 
-    <div data-reveal-target="item" class="rounded p-3 bg-light mt-3 <% if @promotion.automatic? %>hidden<% end %>">
+    <div data-reveal-target="item" class="rounded-md p-6 bg-gray-25 mt-6 <% if @promotion.automatic? %>hidden<% end %>">
       <div data-controller="reveal" data-reveal-hidden-class="hidden">
-        <div class="d-flex align-items-start custom-control custom-radio">
+        <div class="flex items-start custom-control custom-radio">
           <%= f.radio_button :multi_codes, false, data: { action: 'change->reveal#toggle' }, class: 'custom-control-input' %>
           <%= f.label :multi_codes_false, class: 'custom-control-label' do %>
             One code for all customers
-            <span class="form-text font-weight-normal mr-1 mt-2">
+            <span class="form-text font-normal mr-1 mt-2">
               You can limit the number of times this code can be used.
             </span>
           <% end %>
         </div>
-        <div data-reveal-target="item" class="mb-4 mt-2 ml-4 <% if @promotion.multi_codes? %>hidden<% end %>">
-          <%= f.text_field :code, class: 'form-control text-uppercase', placeholder: 'Your coupon code' %>
+        <div data-reveal-target="item" class="mb-6 mt-2 ml-6 <% if @promotion.multi_codes? %>hidden<% end %>">
+          <%= f.text_field :code, class: 'form-input uppercase', placeholder: 'Your coupon code' %>
         </div>
 
-        <div class="mt-2 d-flex align-items-start custom-control custom-radio">
+        <div class="mt-2 flex items-start custom-control custom-radio">
           <%= f.radio_button :multi_codes, true, data: { action: 'change->reveal#toggle' }, class: 'custom-control-input' %>
           <%= f.label :multi_codes_true, class: 'custom-control-label' do %>
             Generate unique codes
-            <span class="form-text font-weight-normal mr-1 mt-2">
+            <span class="form-text font-normal mr-1 mt-2">
               These codes are generated automatically and can be downloaded as a CSV file. Codes are unique and can only be used once.
             </span>
           <% end %>
         </div>
-        <div data-reveal-target="item" class="ml-3 mt-2 row <% unless @promotion.multi_codes? %>hidden<% end %>">
-          <div class="col-6">
-            <%= f.text_field :code_prefix, class: 'form-control text-uppercase', placeholder: 'Coupon Prefix (optional)' %>
+        <div data-reveal-target="item" class="ml-6 mt-2 grid grid-cols-12 gap-6 <% unless @promotion.multi_codes? %>hidden<% end %>">
+          <div class="col-span-6">
+            <%= f.text_field :code_prefix, class: 'form-input uppercase', placeholder: 'Coupon Prefix (optional)' %>
             <span class="form-text mt-2">
               eg. <strong>ABC</strong>
             </span>
           </div>
-          <div class="col-6">
+          <div class="col-span-6">
             <% minimum_number_of_codes = @promotion.persisted? && @promotion.coupon_codes.count.positive? ? @promotion.coupon_codes.count : 1 %>
             <% maximum_number_of_codes = ENV.fetch('PROMOTION_MAX_NUMBER_OF_CODES', 5000) %>
-            <%= f.number_field :number_of_codes, class: 'form-control', placeholder: 'Number of codes', min: minimum_number_of_codes, max: maximum_number_of_codes, step: 1 %>
+            <%= f.number_field :number_of_codes, class: 'form-input', placeholder: 'Number of codes', min: minimum_number_of_codes, max: maximum_number_of_codes, step: 1 %>
             <span class="form-text mt-2">
               How many codes you want to generate.
               <% if @promotion.persisted? %>
@@ -50,7 +50,7 @@
     </div>
   </div>
 
-  <div class="mt-4 custom-control custom-radio">
+  <div class="mt-6 custom-control custom-radio">
     <%= f.radio_button :kind, :automatic, data: { action: 'change->reveal#hide' }, class: 'custom-control-input' %>
     <%= f.label :kind_automatic, Spree.t(:automatic_promotion), class: 'custom-control-label' %>
 

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

@@ -9,4 +9,4 @@
 
 <%= render_admin_partials(:promotions_header_partials) %>
 
-<%= render 'spree/admin/shared/index_table' %>
+<%= render_table @collection, :promotions %>

data/app/views/spree/admin/promotions/show.html.erb

@@ -1,12 +1,12 @@
 <%= render 'spree/admin/promotions/header' %>
 
-<div class="row">
-  <div class="col-12 col-lg-8">
+<div class="grid grid-cols-12 gap-6">
+  <div class="col-span-12 lg:col-span-8">
     <%= render 'rules' %>
     <%= render 'actions' %>
   </div>
 
-  <div class="col-12 col-lg-4">
+  <div class="col-span-12 lg:col-span-4">
     <%= render 'sidebar' %>
   </div>
 </div>

data/app/views/spree/admin/properties/_form.html.erb

@@ -1,4 +1,4 @@
-<div data-controller="slug-form" class="card mb-4">
+<div data-controller="slug-form" class="card mb-6">
   <div class="card-body">
     <%= f.spree_text_field :presentation, data: { slug_form_target: :name, action: 'input->slug-form#updateUrlFromName' }, required: true, autofocus: f.object.new_record? %>
     <%= f.spree_text_field :name, label: Spree.t(:internal_name), data: { slug_form_target: :url }, required: true %>