spree_admin 5.2.6 → 5.3.0.rc1

data/app/views/spree/admin/orders/customer_returns/edit.html.erb

@@ -1,6 +1,6 @@
 <% content_for :page_title do %>
   <%= page_header_back_button spree.edit_admin_order_path(@order) %>
-  <div class="d-flex gap-3 align-items-center">
+  <div class="flex gap-6 items-center">
     <%= @customer_return.number %>
 
     <% if @customer_return.fully_reimbursed? %>
@@ -11,21 +11,21 @@
   </div>
 <% end %>
 
-<ul class="list-group bg-white mb-4">
+<ul class="list-group bg-white mb-6">
   <% if @customer_return.order %>
-    <li class="list-group-item d-flex justify-content-between align-items-center">
+    <li class="list-group-item flex justify-between items-center">
       <%= Spree.t(:customer) %>
       <div>
         <%= render "spree/admin/orders/customer_summary", order: @customer_return.order %>
       </div>
     </li>
-    <li class="list-group-item d-flex justify-content-between align-items-center">
+    <li class="list-group-item flex justify-between items-center">
       <%= Spree.t(:order) %>
       <strong><%= link_to @customer_return.order.number,
         spree.edit_admin_order_path(@customer_return.order) %></strong>
     </li>
   <% end %>
-  <li class="list-group-item d-flex justify-content-between align-items-center">
+  <li class="list-group-item flex justify-between items-center">
     <%= Spree.t(:reimbursement_status) %>
     <% if @customer_return.fully_reimbursed? %>
       <span class="badge badge-success"><%= Spree.t(:reimbursed) %></span>
@@ -33,13 +33,13 @@
       <span class="badge badge-inactive"><%= Spree.t(:incomplete) %></span>
     <% end %>
   </li>
-  <li class="list-group-item d-flex justify-content-between align-items-center">
+  <li class="list-group-item flex justify-between items-center">
     <%= Spree.t(:pre_tax_total) %>
     <span><%= @customer_return.display_pre_tax_total.to_html %></span>
   </li>
 </ul>
 <% if @manual_intervention_return_items.any? %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-header">
       <h5><%= Spree.t(:manual_intervention_required) %></h5>
     </div>
@@ -54,7 +54,7 @@
 <% end %>
 
 <% if @pending_return_items.any? %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-header">
       <h5><%= Spree.t(:pending) %></h5>
     </div>
@@ -69,7 +69,7 @@
 <% end %>
 
 <% if @accepted_return_items.any? %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-header">
       <h5><%= Spree.t(:accepted) %></h5>
     </div>
@@ -84,7 +84,7 @@
 <% end %>
 
 <% if @rejected_return_items.any? %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-header">
       <h5><%= Spree.t(:rejected) %></h5>
     </div>
@@ -98,7 +98,7 @@
   </div>
 <% end %>
 
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5><%= plural_resource_name(Spree::Reimbursement) %></h5>
   </div>
@@ -127,7 +127,7 @@
 <% if !@customer_return.fully_reimbursed? && @customer_return.no_pending_reimbursements? && !@customer_return.completely_decided? %>
   <div
     class="
-      text-muted p-5 d-flex align-items-center w-100 justify-content-center
+      text-gray-600 p-12 flex items-center w-full justify-center
     "
   >
     <%= Spree.t(:unable_to_create_reimbursements) %>

data/app/views/spree/admin/orders/customer_returns/new.html.erb

@@ -11,9 +11,9 @@
   } %>
 
   <%= form_for [:admin, @order, @customer_return] do |f| %>
-    <div class="card mb-4" data-controller="checkbox-select-all">
+    <div class="card mb-6" data-controller="checkbox-select-all">
       <div class="card-header">
-        <h6 class="card-title"><%= Spree.t(:items_in_rmas) %></h6>
+        <h5 class="card-title"><%= Spree.t(:items_in_rmas) %></h5>
       </div>
       <div class="card-body p-0">
         <% if @rma_return_items.any? %>
@@ -25,7 +25,7 @@
         <% else %>
           <div
             class="
-              text-muted p-5 d-flex align-items-center w-100 justify-content-center
+              text-gray-600 p-12 flex items-center w-full justify-center
             "
           >
             <%= Spree.t(:none) %>
@@ -34,7 +34,7 @@
       </div>
     </div>
 
-    <div class="card mb-4">
+    <div class="card mb-6">
       <div class="card-body">
         <%= f.spree_select :stock_location_id,
                    available_stock_locations_list,
@@ -50,8 +50,8 @@
   <div class="card">
     <div
       class="
-        card-body text-muted d-flex align-items-center justify-content-center
-        flex-column gap-2
+        card-body text-gray-600 flex items-center justify-center
+        flex-col gap-2
       "
     >
       <%= Spree.t(:all_items_have_been_returned) %>,

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

@@ -1,30 +1,13 @@
-  <% content_for :page_title do %>
-  <% if controller_name == 'checkouts' %>
-    <%= Spree.t(:draft_orders) %>
-  <% else %>
-    <%= Spree.t(:orders) %>
-  <% end %>
+<% content_for :page_title do %>
+  <%= Spree.t(:orders) %>
 <% end %>
 
 <% content_for :page_actions do %>
   <%= render_admin_partials(:orders_actions_partials) %>
   <%= link_to_export_modal %>
-  <%= link_to_with_icon 'plus', Spree.t(:new_order), spree.new_admin_order_path, class: "btn btn-primary" if can?(:create, Spree::Order)  %>
+  <%= link_to_with_icon 'plus', Spree.t(:new_order), spree.new_admin_order_path, class: "btn btn-primary" if can?(:create, Spree::Order) %>
 <% end %>
 
 <%= render_admin_partials(:orders_header_partials) %>
 
-<div class="card-lg">
-  <% if params[:frame_name].present? %>
-    <%= turbo_frame_tag params[:frame_name], autoscroll: true, data: { autoscroll_block: :nearest, autoscroll_behavior: :smooth } do %>
-      <%= render 'spree/admin/orders/filters', frame_name: params[:frame_name] %>
-      <%= render 'spree/admin/orders/list' %>
-    <% end %>
-  <% else %>
-    <%= turbo_frame_tag "orders", autoscroll: true, data: { autoscroll_behavior: :smooth, turbo_action: 'advance' } do %>
-      <%= render 'spree/admin/shared/export_modal', export_type: Spree::Exports::Orders %>
-      <%= render 'spree/admin/orders/filters' %>
-      <%= render 'spree/admin/orders/list' %>
-    <% end %>
-  <% end %>
-</div>
+<%= render_table @collection, :orders, export_type: Spree::Exports::Orders %>

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

@@ -8,10 +8,10 @@
 <% end %>
 
 <%= form_for @order, url: spree.admin_orders_path do |f| %>
-  <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">
       <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @order } %>
-      <div class="card mb-4">
+      <div class="card mb-6">
         <div class="card-body">
           <%= render 'form', f: f %>
         </div>

data/app/views/spree/admin/orders/order_promotions/create.turbo_stream.erb

@@ -0,0 +1,16 @@
+<%= turbo_render_alerts %>
+<%= turbo_close_dialog %>
+
+<% if @handler.successful? %>
+  <%= turbo_stream.replace 'order_promotions' do %>
+    <%= render 'spree/admin/orders/promotions' %>
+  <% end %>
+
+  <%= turbo_stream.replace 'order_adjustments' do %>
+    <%= render 'spree/admin/orders/adjustments' %>
+  <% end %>
+
+  <%= turbo_stream.replace 'order_tab_summary' do %>
+    <%= render 'spree/admin/orders/summary' %>
+  <% end %>
+<% end %>

data/app/views/spree/admin/orders/order_promotions/destroy.turbo_stream.erb

@@ -0,0 +1,15 @@
+<%= turbo_render_alerts %>
+
+<% if @handler.successful? %>
+  <%= turbo_stream.replace 'order_promotions' do %>
+    <%= render 'spree/admin/orders/promotions' %>
+  <% end %>
+
+  <%= turbo_stream.replace 'order_adjustments' do %>
+    <%= render 'spree/admin/orders/adjustments' %>
+  <% end %>
+
+  <%= turbo_stream.replace 'order_tab_summary' do %>
+    <%= render 'spree/admin/orders/summary' %>
+  <% end %>
+<% end %>

data/app/views/spree/admin/orders/order_promotions/new.html.erb

@@ -0,0 +1,15 @@
+<%= turbo_frame_tag :dialog do %>
+  <div>
+    <%= dialog_header(Spree.t(:add_coupon_code)) %>
+    <%= form_with url: spree.admin_order_order_promotions_path(@order) do |f| %>
+      <div class="dialog-body">
+        <%= f.spree_text_field :coupon_code,
+                               placeholder: Spree.t(:add_coupon_code),
+                               autofocus: true %>
+      </div>
+      <div class="dialog-footer">
+        <%= turbo_save_button_tag Spree.t(:apply) %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/spree/admin/orders/return_authorizations/_form.html.erb

@@ -7,7 +7,7 @@
         <tr>
           <th scope="col">
             <% if allow_return_item_changes %>
-              <div class="custom-control custom-checkbox ml-1">
+              <div class="custom-control form-checkbox ml-0.5">
                 <input
                   type="checkbox"
                   class="custom-control-input"
@@ -38,7 +38,7 @@
           <tr>
             <td class="inventory-unit-checkbox">
               <% if editable %>
-                <div class="custom-control custom-checkbox ml-1">
+                <div class="custom-control form-checkbox ml-0.5">
 
                   <%= item_fields.hidden_field :inventory_unit_id %>
                   <%= item_fields.check_box :_destroy,
@@ -79,7 +79,7 @@
               <% if editable %>
                 <%= item_fields.number_field :return_quantity,
                                          {
-                                           class: "refund-quantity-input form-control",
+                                           class: "refund-quantity-input form-input",
                                            min: 0,
                                            required: true,
                                            data: {
@@ -95,7 +95,7 @@
               <% if editable %>
                 <%= item_fields.text_field :pre_tax_amount,
                                          {
-                                           class: "refund-amount-input form-control",
+                                           class: "refund-amount-input form-input",
                                            required: true,
                                            data: {
                                              action: "return-items#updateTotalRefundAmount",
@@ -110,7 +110,7 @@
                 <%= item_fields.select :preferred_reimbursement_type_id,
                                    @reimbursement_types.collect { |r| [r.name.humanize, r.id] },
                                    { include_blank: true },
-                                   { class: "custom-select" } %>
+                                   { class: "form-select" } %>
               <% end %>
             </td>
             <td>
@@ -125,7 +125,7 @@
                                                 { include_blank: true },
                                                 {
                                                   class:
-                                                    "custom-select return-item-exchange-selection",
+                                                    "form-select return-item-exchange-selection",
                                                 } %>
                 <% end %>
               <% end %>
@@ -141,7 +141,7 @@
     <span data-return-items-target="totalPreTaxRefund">0.00</span>
   </div>
 
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-body">
       <%= f.spree_select :stock_location_id,
                available_stock_locations_list,

data/app/views/spree/admin/orders/return_authorizations/_return_authorization.html.erb

@@ -13,7 +13,7 @@
   data-controller="row-link"
   class="cursor-pointer"
 >
-  <td data-action="click->row-link#openLink" class="font-weight-bolder">
+  <td data-action="click->row-link#openLink" class="font-bolder">
     <%= link_to return_authorization.number, edit_link %>
   </td>
   <td data-action="click->row-link#openLink">

data/app/views/spree/admin/orders/return_authorizations/edit.html.erb

@@ -1,7 +1,7 @@
 <% content_for :page_title do %>
   <%= page_header_back_button spree.edit_admin_order_path(@order) %>
 
-  <div class="d-flex gap-3 align-items-center">
+  <div class="flex gap-6 items-center">
     <%= @return_authorization.number %>
 
     <span class="badge badge-<%= @return_authorization.state %>">
@@ -20,7 +20,7 @@ locals: {
 
   <div class="form-actions">
     <%= turbo_save_button_tag Spree.t("actions.update") %>
-    <div class="ml-auto d-flex gap-3">
+    <div class="ml-auto flex gap-6">
       <% if f.object.can_cancel? && can?(:cancel, f.object) %>
         <%= link_to Spree.t("actions.cancel"),
         spree.cancel_admin_return_authorization_path(f.object),

data/app/views/spree/admin/orders/return_authorizations/show.html.erb

@@ -1,6 +1,6 @@
 <% content_for :page_title do %>
   <%= page_header_back_button spree.edit_admin_order_path(@order) %>
-  <div class="d-flex gap-3 align-items-center">
+  <div class="flex gap-6 items-center">
     <span><%= Spree.t(:return_authorization) %></span>
     <span><%= @return_authorization.number %></span>
     <span class="badge badge-<%= @return_authorization.state %>">
@@ -19,12 +19,12 @@ locals: {
 } %>
 
 <% if flash[:errors].present? %>
-  <div class="alert alert-danger border-danger text-break">
+  <div class="alert alert-danger border-danger break-words">
     <%= flash[:errors].to_sentence %>
   </div>
 <% end %>
 
-<div class="card-lg mb-4">
+<div class="card-lg mb-6">
   <div class="table-responsive">
     <table class="table table-condensed return-items-table">
       <thead>
@@ -74,9 +74,9 @@ locals: {
 </div>
 
 <% if @return_authorization.reason.present? %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-header">
-      <h6 class="card-title"><%= Spree.t(:reason) %></h6>
+      <h5 class="card-title"><%= Spree.t(:reason) %></h5>
     </div>
     <div class="card-body">
       <%= @return_authorization.reason.name %>
@@ -85,9 +85,9 @@ locals: {
 <% end %>
 
 <% if @return_authorization.memo.present? %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-header">
-      <h6 class="card-title"><%= Spree.t(:memo) %></h6>
+      <h5 class="card-title"><%= Spree.t(:memo) %></h5>
     </div>
     <div class="card-body">
       <%= @return_authorization.memo %>
@@ -96,7 +96,7 @@ locals: {
 <% end %>
 
 <% if @refunds.any? %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-header">
       <h5><%= Spree.t(:reimbursement) %></h5>
     </div>

data/app/views/spree/admin/orders/shipping_address/_form.html.erb

@@ -6,10 +6,10 @@
                   address: address %>
 <% if @order.user.present? && @order.user.addresses.many? %>
   <div>
-    <div class="w-100 text-center mb-2"><%= Spree.t(:or_select_other_address) %></div>
+    <div class="w-full text-center mb-2"><%= Spree.t(:or_select_other_address) %></div>
     <%= label_tag :shipping_address_id, Spree.t(:existing_address), class: 'sr-only' %>
     <%= select_tag :shipping_address_id, 
                    options_for_select(@order.user.addresses.map { |a| [a.to_s.gsub('<br/>', ", "), a.id]}), 
-                   { include_blank: Spree.t(:select_existing_address), class: "custom-select", data: { action: 'auto-submit#submit' } } %>
+                   { include_blank: Spree.t(:select_existing_address), class: "form-select", data: { action: 'auto-submit#submit' } } %>
   </div>
 <% end %>

data/app/views/spree/admin/orders/shipping_address/create.turbo_stream.erb

@@ -1,7 +1,7 @@
 <%= turbo_stream.update :dialog do %>
   <%= form_for @address, url: spree.admin_order_shipping_address_path(@order), data: {turbo_frame: :_top}, method: :post do |f| %>
     <%= dialog_header(Spree.t(:new_shipping_address)) %>
-    <div class="dialog-body d-flex flex-col gap-3">
+    <div class="dialog-body flex flex-col gap-4">
       <%= render 'form', address: @address, f: f%>
     </div>
     <div class="dialog-footer">

data/app/views/spree/admin/orders/shipping_address/edit.html.erb

@@ -1,7 +1,7 @@
 <%= turbo_frame_tag :dialog do %>
   <%= form_for @address, url: spree.admin_order_shipping_address_path(@order), data: {controller: 'auto-submit', form_target: 'form', turbo_frame: :_top}, method: :put do |f| %>
     <%= dialog_header(Spree.t(:update_shipping_address)) %>
-    <div class="dialog-body d-flex flex-col gap-3">
+    <div class="dialog-body flex flex-col gap-4">
       <%= render 'form', address: @address, f: f %>
     </div>
     <div class="dialog-footer">

data/app/views/spree/admin/orders/shipping_address/new.html.erb

@@ -1,7 +1,7 @@
 <%= turbo_frame_tag :dialog do %>
   <%= form_for @address, url: spree.admin_order_shipping_address_path(@order), data: {turbo_frame: :_top}, method: :post do |f| %>
     <%= dialog_header(Spree.t(:new_shipping_address)) %>
-    <div class="dialog-body d-flex flex-col gap-3">
+    <div class="dialog-body flex flex-col gap-4">
       <%= render 'form', address: @address, f: f%>
     </div>
     <div class="dialog-footer">

data/app/views/spree/admin/orders/shipping_address/update.turbo_stream.erb

@@ -1,7 +1,7 @@
 <%= turbo_stream.update :dialog do %>
   <%= form_for @address, url: spree.admin_order_shipping_address_path(@order), data: {controller: 'auto-submit', form_target: 'form', turbo_frame: :_top}, method: :put do |f| %>
     <%= dialog_header(Spree.t(:update_shipping_address)) %>
-    <div class="dialog-body d-flex flex-col gap-3">
+    <div class="dialog-body flex flex-col gap-4">
       <%= render 'form', address: @address, f: f %>
     </div>
     <div class="dialog-footer">

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

@@ -0,0 +1,24 @@
+<%= render 'header' %>
+<%= render_admin_partials(:order_page_header_partials, order: @order) %>
+
+<div class="grid grid-cols-12 gap-6">
+  <div class="col-span-12 lg:col-span-8">
+    <%= render 'line_items' %>
+    <%= render 'shipments' %>
+    <%= render 'promotions' %>
+    <%= render 'adjustments' %>
+    <%= render 'tax_rates' %>
+    <%= render 'payments' %>
+    <%= render 'refunds' %>
+    <%= render 'customer_returns' %>
+    <%= render 'return_authorizations' %>
+    <%= render_admin_partials(:order_page_body_partials, order: @order) %>
+    <%= render 'summary' %>
+  </div>
+  <div class="col-span-12 lg:col-span-4">
+    <%= render 'customer' %>
+    <%= render 'special_instructions' %>
+    <%= render 'spree/admin/shared/internal_note', notable: @order %>
+    <%= render_admin_partials(:order_page_sidebar_partials, order: @order) %>
+  </div>
+</div>

data/app/views/spree/admin/orders/update.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_render_alerts %>
+
+<%= turbo_stream.replace 'internal_note' do %>
+  <%= render 'spree/admin/shared/internal_note', notable: @order %>
+<% end %>

data/app/views/spree/admin/orders/user/new.html.erb

@@ -1,6 +1,6 @@
 <% show_form ||= params[:show_form] %>
-<%= turbo_frame_tag dom_id(@order, :customer_information), class: "card mb-4 blur-busy" do  %>
-  <div class="card-header d-flex justify-content-between">
+<%= turbo_frame_tag dom_id(@order, :customer_information), class: "card mb-6 blur-busy" do  %>
+  <div class="card-header flex justify-between">
     <h5 class="card-title">
       <%= Spree.t(:customer) %>
     </h5>
@@ -11,19 +11,19 @@
       <%= form_with model: @user, scope: :user, url: spree.admin_order_user_path(@order) do |f| %>
         <%= render 'spree/admin/shared/error_messages', target: @user %>
         <%= render 'spree/admin/users/form', f: f %>
-        <div class="d-flex justify-content-between">
+        <div class="flex justify-between">
           <%= link_to Spree.t('actions.discard'), spree.edit_admin_order_path(@order), class: "btn btn-light btn-sm" %>
           <%= turbo_save_button_tag Spree.t('actions.save'), data: { turbo_frame: dom_id(@order, :edit) }, type: :submit, class: 'btn btn-primary text-center btn-sm' %>
         </div>
       <% end %>
     <% else %>
-      <div class="d-flex gap-2 flex-column">
+      <div class="flex gap-2 flex-col">
         <%= form_with url: spree.admin_order_user_path(@order), data: {  controller: 'auto-submit' }, method: :patch do  %>
           <%= label_tag :user_id, Spree.t(:select_user), class: "sr-only" %>
-          <%= tom_select_tag :user_id, { include_blank: Spree.t(:select_user), options: users_for_select_options, select_data: {action: 'auto-submit#submit'}, disable_with: "<span class='spinner-border spinner-border-sm' role='status'></span>" } %>
+          <%= tom_select_tag :user_id, { include_blank: Spree.t(:select_user), options: users_for_select_options, select_data: {action: 'auto-submit#submit'}, disable_with: "<span class='inline-block w-4 h-4 border-2 border-current border-r-transparent rounded-full animate-spin' role='status'></span>" } %>
         <% end %>
-        <span class="d-flex w-100 justify-content-center align-items-center"><%= Spree.t(:or) %></span>
-        <%= link_to Spree.t(:create_new), spree.new_admin_order_user_path(@order, show_form: true), class: "btn btn-secondary w-100" %>
+        <span class="flex w-full justify-center items-center"><%= Spree.t(:or) %></span>
+        <%= link_to Spree.t(:create_new), spree.new_admin_order_user_path(@order, show_form: true), class: "btn btn-secondary w-full" %>
       </div>
     <% end %>
   </div>

data/app/views/spree/admin/payment_methods/_available_payment_method.html.erb

@@ -1,6 +1,6 @@
 <tr data-controller="row-link">
   <td class="cursor-pointer w-30" data-action="click->row-link#openLink">
-    <div class="d-flex align-items-center">
+    <div class="flex items-center">
       <% if payment_method_icon_tag(payment_method.payment_icon_name).present? %>
         <%= payment_method_icon_tag(payment_method.payment_icon_name, height: 30, class: 'mr-2') %>
       <% end %>
@@ -8,13 +8,13 @@
       <%= payment_method.name %>
     </div>
   </td>
-  <td class="cursor-pointer w-40 text-wrap" data-action="click->row-link#openLink">
+  <td class="cursor-pointer w-40 whitespace-normal" data-action="click->row-link#openLink">
     <% if payment_method.try(:description_partial_name) %>
       <%= render "spree/admin/payment_methods/descriptions/#{payment_method.description_partial_name}", payment_method: payment_method %>
     <% end %>
   </td>
   <td class="actions w-30">
-    <div class="d-flex justify-content-end">
+    <div class="flex justify-end">
       <%= link_to_with_icon 'plus', Spree.t(:add), spree.new_admin_payment_method_path(payment_method: { type: payment_method.type }), class: 'btn btn-light btn-sm', data: { row_link_target: :link, turbo_frame: '_top' } %>
     </div>
   </td>

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

@@ -3,7 +3,7 @@
 <% end %>
 
 <% if !preference_fields(@object, f).empty? || @object.respond_to?(:custom_form_fields_partial_name) %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-header">
       <h5 class="card-title"><%= Spree.t(:payment_provider_settings) %></h5>
     </div>
@@ -17,7 +17,7 @@
   </div>
 <% end %>
 
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title"><%= Spree.t(:display_settings) %></h5>
   </div>
@@ -28,7 +28,7 @@
       <div class="form-group">
         <%= label_tag :payment_method_stores, Spree.t(:stores) %>
         <%= 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/payment_methods/_payment_method.html.erb

@@ -1,10 +1,10 @@
 <tr id="<%= spree_dom_id payment_method %>" data-controller="row-link" data-sortable-update-url="<%= spree.admin_payment_method_path(payment_method) %>">
-  <td class="w-10 move-handle text-center">
-    <%= icon('grip-vertical', class: 'rounded hover-gray p-2') %>
+  <td class="w-5 move-handle text-center">
+    <%= icon('grip-vertical', class: 'rounded-md hover:bg-gray-100 p-2') %>
   </td>
-  <td class="cursor-pointer w-55 text-wrap" data-action="click->row-link#openLink">
-    <div class="d-flex align-items-center">
-      <div class="bg-light rounded" style="width: 95px; height: 60px;">
+  <td class="cursor-pointer w-50 whitespace-normal" data-action="click->row-link#openLink">
+    <div class="flex items-center">
+      <div class="bg-gray-25 rounded" style="width: 95px; height: 60px;">
         <% if payment_method_icon_tag(payment_method.payment_icon_name).present? %>
           <span data-controller="tooltip">
             <%= payment_method_icon_tag(payment_method.payment_icon_name, height: 60, width: 95, title: payment_method.name) %>
@@ -13,7 +13,7 @@
         <% end %>
       </div>
 
-      <div class="mx-3">
+      <div class="mx-6">
         <% if payment_method.try(:description_partial_name) %>
           <%= render "spree/admin/payment_methods/descriptions/#{payment_method.description_partial_name}", payment_method: payment_method %>
         <% else %>
@@ -24,7 +24,7 @@
   </td>
   <td class="w-20">
     <%= form_for payment_method, as: :payment_method, url: spree.admin_payment_method_path(payment_method), method: :patch, data: { controller: 'auto-submit' } do |f| %>
-      <%= f.select :display_on, display_on_options, {}, { class: 'custom-select custom-select-sm w-auto', data: { action: 'auto-submit#submit' } } %>
+      <%= f.select :display_on, display_on_options, {}, { class: 'form-select form-select-sm', data: { action: 'auto-submit#submit' } } %>
     <% end %>
   </td>
   <td class="w-10 text-center">
@@ -35,7 +35,7 @@
       </div>
     <% end %>
   </td>
-  <td class="actions w-5">
+  <td class="actions w-10">
     <%= link_to_edit(payment_method, data: { row_link_target: :link, turbo_frame: '_top' }) %>
   </td>
 </tr>

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

@@ -4,8 +4,8 @@
 <% end %>
 
 <%= form_for @payment_method, as: :payment_method, url: spree.admin_payment_method_path(@payment_method), html: { id: "edit_payment_method_#{@payment_method.id}" } do |f| %>
-  <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">
       <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @payment_method } %>
       <%= render 'form', f: f %>
       <%= render 'spree/admin/shared/edit_resource_links', f: f %>

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

@@ -26,7 +26,7 @@
 </div>
 
 <% if available_payment_methods.present? && can?(:create, Spree::PaymentMethod) %>
-  <h6 class="pb-2 pt-3">Available Payment Methods</h6>
+  <h6 class="pb-2 pt-6">Available Payment Methods</h6>
   <div class="card-lg">
     <div class="table-responsive">
       <table class="table">
@@ -44,6 +44,6 @@
   </div>
 <% end %>
 
-<p class="text-muted text-center my-5">
-  Find more payment methods in <%= external_link_to 'Integrations Directory', 'https://spreecommerce.org/docs/integrations/integrations', class: 'text-decoration-none font-weight-bold', target: '_blank' %>
+<p class="text-gray-600 text-center my-12">
+  Find more payment methods in <%= external_link_to 'Integrations Directory', 'https://spreecommerce.org/docs/integrations/integrations', target: '_blank' %>
 </p>