spree_admin 5.2.6 → 5.3.0.rc1

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

@@ -1,29 +1,27 @@
-<% unless turbo_frame_request? %>
-  <% content_for :page_title do %>
-    <%= Spree.t(:gift_cards) %>
-  <% end %>
+<% content_for :page_title do %>
+  <%= Spree.t(:gift_cards) %>
+<% end %>
 
-  <% content_for :page_actions do %>
-    <%= render_admin_partials(:gift_cards_actions_partials) %>
-    <%= link_to_export_modal %>
+<% content_for :page_actions do %>
+  <%= render_admin_partials(:gift_cards_actions_partials) %>
+  <%= link_to_export_modal %>
 
-    <%= dropdown id: 'page_actions_dropdown' do %>
-      <%= dropdown_toggle class: 'text-nowrap btn-primary align-self-center', id: 'more-actions-link' do %>
-        <%= icon 'plus' %>
-        <%= Spree.t(:new_gift_card) %>
+  <%= dropdown id: 'page_actions_dropdown' do %>
+    <%= dropdown_toggle class: 'whitespace-nowrap btn-primary self-center', id: 'more-actions-link' do %>
+      <%= icon 'plus' %>
+      <%= Spree.t(:new_gift_card) %>
+    <% end %>
+    <%= dropdown_menu do %>
+      <%= link_to spree.new_admin_gift_card_path,
+            class: 'text-left dropdown-item'  do %>
+        <%= icon 'add' %>
+        <%= Spree.t(:gift_card) %>
       <% end %>
-      <%= dropdown_menu do %>
-        <%= link_to spree.new_admin_gift_card_path,
-              class: 'text-left dropdown-item'  do %>
-          <%= icon 'add' %>
-          <%= Spree.t(:gift_card) %>
-        <% end %>
 
-        <%= link_to spree.new_admin_gift_card_batch_path,
-              class: 'text-left dropdown-item'  do %>
-          <%= icon 'add' %>
-          <%= Spree.t(:gift_card_batch) %>
-        <% end %>
+      <%= link_to spree.new_admin_gift_card_batch_path,
+            class: 'text-left dropdown-item'  do %>
+        <%= icon 'add' %>
+        <%= Spree.t(:gift_card_batch) %>
       <% end %>
     <% end %>
   <% end %>
@@ -31,17 +29,4 @@
 
 <%= render_admin_partials(:gift_cards_header_partials) %>
 
-<div class="card-lg p-0">
-  <% if params[:frame_name].present? %>
-    <%= turbo_frame_tag params[:frame_name], autoscroll: true, data: { autoscroll_block: :nearest, autoscroll_behavior: :smooth } do %>
-      <%= render 'filters', frame_name: params[:frame_name] %>
-      <%= render 'list' %>
-    <% end %>
-  <% else %>
-    <%= turbo_frame_tag "gift_cards", autoscroll: true, data: { autoscroll_behavior: :smooth, turbo_action: 'advance' } do %>
-      <%= render 'spree/admin/shared/export_modal', export_type: Spree::Exports::GiftCards %>
-      <%= render 'filters' %>
-      <%= render 'list' %>
-    <% end %>
-  <% end %>
-</div>
+<%= render_table @collection, :gift_cards, export_type: Spree::Exports::GiftCards %>

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

@@ -16,21 +16,21 @@
   <%= @object.code.upcase %>
 <% end %>
 
-<div class="row">
-  <div class="col-md-8">
+<div class="grid grid-cols-12 gap-6">
+  <div class="col-span-12 md:col-span-8">
 
-    <div class="card mb-4">
-      <div class="card-header d-flex justify-content-between align-items-center">
+    <div class="card mb-6">
+      <div class="card-header flex justify-between items-center">
         <h5 class="card-title">
           <%= Spree.t('admin.gift_cards.usage') %>
         </h5>
       </div>
-      <div class="card-body border-bottom">
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="w-75">
+      <div class="card-body border-b">
+        <div class="flex justify-between items-center">
+          <div class="w-3/4">
             <%= progress_bar_component(@object.amount_used, max: @object.amount) %>
           </div>
-          <div class="w-25 text-right">
+          <div class="w-1/4 text-right">
             <%= @object.display_amount_used %> <%= Spree.t(:used).downcase %> / <%= @object.display_amount %>
           </div>
         </div>
@@ -52,7 +52,7 @@
                 <% @orders.each do |order| %>
                   <tr>
                     <td>
-                      <%= link_to order.number, spree.edit_admin_order_path(order), class: 'text-dark font-weight-bold' %>
+                      <%= link_to order.number, spree.edit_admin_order_path(order), class: 'text-gray-900 font-bold' %>
                     </td>
                     <td>
                       <% if order.completed? %>
@@ -88,10 +88,10 @@
 
     </div>
 
-  <div class="col-md-4">
+  <div class="col-span-12 md:col-span-4">
     <%= turbo_frame_tag :gift_card_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>
@@ -99,8 +99,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(:code) %>
               </span>
               <span>
@@ -109,31 +109,31 @@
               </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(:customer) %>
               </span>
               <span>
                 <% if @object.user %>
                   <%= link_to @object.user.email, spree.admin_user_path(@object.user), data: { turbo_frame: '_top' } %>
                 <% else %>
-                  <span class="text-muted">
+                  <span class="text-gray-600">
                     <%= Spree.t(:not_available) %>
                   </span>
                 <% end %>
               </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(:amount) %>
               </span>
               <span>
                 <%= @object.display_amount %>
               </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(:used) %>
               </span>
               <span>
@@ -141,8 +141,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('store_credit.remaining') %>
               </span>
               <span>
@@ -150,8 +150,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(:currency) %>
               </span>
               <span>
@@ -159,34 +159,34 @@
               </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(:expires_at) %>
               </span>
               <% if @object.expires_at %>
                 <span><%= spree_time(@object.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>
 
-            <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_by) %>
               </span>
               <span>
                 <% if @object.created_by %>
                   <%= link_to @object.created_by.email, spree.admin_admin_user_path(@object.created_by), data: { turbo_frame: '_top' } %>
                 <% else %>
-                  <span class="text-muted">
+                  <span class="text-gray-600">
                     <%= Spree.t(:not_available) %>
                   </span>
                 <% end %>
               </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><%= spree_time(@object.created_at) %></span>

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

@@ -2,7 +2,7 @@
   <%= drawer_header(Spree.t(:row) + ' ' + @import_row.row_number.to_s) %>
 
   <div class="drawer-body" data-controller="highlight tabs">
-    <ul class="nav nav-pills mb-3">
+    <ul class="nav nav-pills mb-6">
       <li class="nav-item">
         <a class="nav-link active" data-tabs-target="tab" data-action="click->tabs#select">JSON</a>
       </li>
@@ -11,18 +11,18 @@
       </li>
     </ul>
 
-    <div data-tabs-target="panel" class="animate__animated animate__fadeIn">
-      <pre class="m-0"><code data-highlight-target="code" class="language-json d-block overflow-auto" style="height: calc(100dvh - 11rem);"><%= JSON.pretty_generate(@import_row.data_json) %></code></pre>
+    <div data-tabs-target="panel" class="animate-fade-in">
+      <pre class="m-0"><code data-highlight-target="code" class="language-json block overflow-auto" style="height: calc(100dvh - 11rem);"><%= JSON.pretty_generate(@import_row.data_json) %></code></pre>
     </div>
-    <div data-tabs-target="panel" hidden class="animate__animated animate__fadeIn">
-      <dl class="row rounded border p-2 overflow-auto" style="height: calc(100dvh - 11rem);">
+    <div data-tabs-target="panel" hidden class="animate-fade-in">
+      <dl class="grid grid-cols-12 gap-6 rounded-lg  border p-2 overflow-auto" style="height: calc(100dvh - 11rem);">
         <% @import_row.to_schema_hash.each do |field_name, value| %>
-          <dt class="col-sm-3"><%= field_name.humanize %></dt>
-          <dd class="col-sm-9">
+          <dt class="col-span-12 sm:col-span-3"><%= field_name.humanize %></dt>
+          <dd class="col-span-12 sm:col-span-9">
             <% if value.present? %>
               <%= h(value) %>
             <% else %>
-              <span class="text-muted">—</span>
+              <span class="text-gray-600">—</span>
             <% end %>
           </dd>
         <% end %>

data/app/views/spree/admin/imports/_footer.html.erb

@@ -1,6 +1,6 @@
-<footer id="footer">
+<footer id="footer" class="fixed bottom-0 left-0 w-full border-t border-gray-200 px-6 py-4 bg-gray-25 flex items-center justify-between gap-4 z-[1000]">
   <% if import.rows.any? %>
-    <div class="flex-grow-1 d-flex flex-column">  
+    <div class="grow flex flex-col">  
       <%= progress_bar_component(import.rows.processed.count, min: 0, max: import.rows_count) %>
     </div>
 

data/app/views/spree/admin/imports/_loader.html.erb

@@ -1,14 +1,14 @@
 <% if import.completed? %>
-  <div class="d-flex justify-content-center align-items-center my-5 flex-column pb-5">
-    <%= icon('check', class: 'text-success', style: 'font-size: 4rem;') %>
-    <p class="text-success"><%= Spree.t('admin.imports.import_done') %>!</p>
-    <%= link_to_with_icon 'arrow-back-up', Spree.t('admin.back_to_dashboard'), spree.admin_path, class: 'btn btn-light mb-5' %>
+  <div class="flex justify-center items-center my-12 flex-col pb-12">
+    <%= icon('check', class: 'text-green-700', style: 'font-size: 4rem;') %>
+    <p class="text-green-700 mb-3"><%= Spree.t('admin.imports.import_done') %>!</p>
+    <%= link_to_with_icon 'arrow-back-up', Spree.t('admin.back_to_dashboard'), spree.admin_path, class: 'btn btn-light mb-12' %>
   </div>
 <% else %>
-  <div class="d-flex justify-content-center align-items-center my-5 flex-column" style="height: 200px;">
-    <div class="spinner-border mb-3 text-muted" role="status" style="width: 4rem; height: 4rem;">
+  <div class="flex justify-center items-center my-12 flex-col" style="height: 200px;">
+    <div class="inline-block w-16 h-16 border-4 border-current border-r-transparent rounded-full animate-spin mb-4 text-gray-600" role="status">
       <span class="sr-only"><%= Spree.t(:processing) %>...</span>
     </div>
-    <p class="text-muted"><%= Spree.t(:processing) %>...</p>
+    <p class="text-gray-600"><%= Spree.t(:processing) %>...</p>
   </div>
 <% end %>

data/app/views/spree/admin/imports/_mapping.html.erb

@@ -1,12 +1,12 @@
-<div class="d-flex justify-content-between align-items-center border-bottom hover-light" id="<%= spree_dom_id(mapping) %>">
+<div class="flex justify-between items-center border-b hover:bg-gray-25" id="<%= spree_dom_id(mapping) %>">
   <div class="text-center w-10">
     <%= render 'spree/admin/imports/mapping_icon', mapping: mapping %>
   </div>
-  <div class="text-wrap w-40 px-2 py-3">
+  <div class="whitespace-normal w-40 px-2 py-4">
     <%= mapping.schema_field_label %>
     <code class="ml-2"><%= mapping.schema_field %></code>
   </div>
-  <div class="w-50 px-2 py-3">
+  <div class="w-1/2 px-2 py-4">
     <%= render 'spree/admin/imports/mapping_form', import: @import, mapping: mapping, options: options %>
   </div>
 </div>

data/app/views/spree/admin/imports/_mapping_footer.html.erb

@@ -1,8 +1,8 @@
-<footer id="footer">
-  <div class="flex-grow-1 d-flex flex-column">
+<footer id="footer" class="fixed bottom-0 left-0 w-full border-t border-gray-200 px-6 py-4 bg-gray-25 flex items-center justify-between gap-4 z-[1000]">
+  <div class="grow flex flex-col">
     <% if import.mapping_done? %>
-      <p>
-        <%= icon('check', class: 'text-success') %>
+      <p class="mb-3 text-green-700">
+        <%= icon('check') %>
         <%= Spree.t('admin.imports.all_required_columns_mapped') %>
       </p>
     <% else %>

data/app/views/spree/admin/imports/_mapping_icon.html.erb

@@ -1,6 +1,6 @@
 <% if mapping.required? %>
   <div id="<%= spree_dom_id(mapping) %>-icon" data-controller="tooltip">
-    <%= icon('checklist', class: mapping.mapped? ? 'text-success' : 'text-muted') %>
+    <%= icon('checklist', class: mapping.mapped? ? 'text-green-700' : 'text-gray-600') %>
     <%= tooltip(Spree.t('admin.imports.mapping_required')) %>
   </div>
 <% end %>

data/app/views/spree/admin/imports/_row.html.erb

@@ -1,8 +1,8 @@
-<div class="import_row d-flex justify-content-between align-items-center border-bottom hover-light" id="<%= dom_id(row) %>">
+<div class="import_row flex justify-between items-center border-b hover:bg-gray-25" id="<%= dom_id(row) %>">
   <div class="text-center w-10">
     <%= row.row_number %>
   </div>
-  <div class="text-wrap w-20 px-2 py-3">
+  <div class="whitespace-normal w-20 px-2 py-4">
     <% badge_class = case row.status
        when 'completed'
          'success'
@@ -15,21 +15,21 @@
       <%= Spree.t(row.status) %>
     </span>
   </div>
-  <div class="w-60 px-2 py-3">
+  <div class="w-60 px-2 py-4">
     <% if row.status == 'failed' %>
       <div class="text-danger"><%= row.validation_errors %></div>
     <% elsif row.status == 'completed' && row.item.present? %>
       <%= render "spree/admin/import_rows/#{row.item_type.demodulize.underscore}", item: row.item %>
     <% else %>
-      <div class="d-flex align-items-center gap-2">
-        <div class="spinner-border text-muted" role="status">
+      <div class="flex items-center gap-2">
+        <div class="inline-block w-5 h-5 border-2 border-current border-r-transparent rounded-full animate-spin text-gray-600" role="status">
           <span class="sr-only"><%= Spree.t(:processing) %>...</span>
         </div>
         <%= Spree.t(:processing) %>...
       </div>
     <% end %>
   </div>
-  <div class="w-10 px-2 py-3">
+  <div class="w-10 px-2 py-4">
     <%= link_to_with_icon 'eye', Spree.t(:details), spree.admin_import_row_path(import, row), class: 'btn btn-sm btn-light', data: { action: 'drawer#open', turbo_frame: :drawer }, no_text: true %>
   </div>
 </div>

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

@@ -12,7 +12,7 @@
         data-active-storage-upload-inline-value="true"
         data-active-storage-upload-hide-cancel-button-value="true"
         data-active-storage-upload-disable-thumbnail-generator-value="true"
-        class="d-flex flex-column justify-content-center w-100 position-relative mb-4">
+        class="flex flex-col justify-center w-full relative mb-6">
       </div>
 
       <%= f.spree_select :preferred_delimiter, options_for_select([',', ';', '|', '\t'], @import.preferred_delimiter) %>

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

@@ -3,24 +3,24 @@
 <% end %>
 
 <% content_for :steps do %>
-  <li class="border-right flex-grow-1 h-100 d-flex align-items-center justify-content-center <% if @import.mapping? %>active bg-white font-weight-bold<% end %>">1. Map fields</li>
-  <li class="border-right flex-grow-1 h-100 d-flex align-items-center justify-content-center <% if @import.processing? %>active bg-white font-weight-bold<% end %>">2. Process rows</li>
-  <li class="flex-grow-1 h-100 d-flex align-items-center justify-content-center <% if @import.complete? %>active bg-white font-weight-bold<% end %>">3. Complete</li>
+  <li class="border-r grow h-full flex items-center justify-center <% if @import.mapping? %>bg-gray-100 font-bold<% end %>">1. Map fields</li>
+  <li class="border-r grow h-full flex items-center justify-center <% if @import.processing? %>bg-gray-100 font-bold<% end %>">2. Process rows</li>
+  <li class="grow h-full flex items-center justify-center <% if @import.complete? %>bg-gray-100 font-bold<% end %>">3. Complete</li>
 <% end %>
 
 <% if @import.status == 'mapping' %>
-  <div class="d-flex justify-content-between align-items-center bg-light border-top border-bottom text-muted mt-3 sticky-top">
+  <div class="flex justify-between items-center bg-gray-25 border-t border-b text-gray-600 mt-4 sticky top-0 z-[1020]">
     <div class="w-10 p-2 text-center">
       <%= Spree.t('admin.imports.field_required') %>
     </div>
     <div class="w-40 p-2">
       <%= I18n.t('activerecord.attributes.spree/import_mapping.file_column') %>
     </div>
-    <div class="w-50 p-2">
+    <div class="w-1/2 p-2">
       <%= I18n.t('activerecord.attributes.spree/import_mapping.schema_field') %>
     </div>
   </div>
-  <div id="mappings" class="mb-5">
+  <div id="mappings" class="mb-12">
     <%= render collection: @mappings, partial: 'spree/admin/imports/mapping', locals: { options: @mappings_options } %>
   </div>
 
@@ -30,7 +30,7 @@
   <%= turbo_stream_from "import_#{@import.id}_footer" %>
   <%= turbo_stream_from "import_#{@import.id}_loader" %>
 
-  <div class="d-flex justify-content-between align-items-center bg-light border-top border-bottom text-muted mt-3 sticky-top">
+  <div class="flex justify-between items-center bg-gray-25 border-t border-b text-gray-600 mt-4 sticky top-0 z-[1020]">
     <div class="w-10 p-2 text-center">
       <%= I18n.t('activerecord.attributes.spree/import_row.row_number') %>
     </div>

data/app/views/spree/admin/integrations/_integration.html.erb

@@ -3,10 +3,10 @@
 
 <% integration_description ||= Spree.t("admin.integrations.#{integration_class.integration_key}.description") %>
 
-<div id="integration-<%= integration_class.integration_key %>" class="col mb-4 d-flex align-items-stretch">
+<div id="integration-<%= integration_class.integration_key %>" class="col mb-6 flex items-stretch">
   <div class="card w-full">
-    <div class="card-header border-bottom d-flex align-items-center justify-content-between h-auto pr-3 <% if integration.present? %>bg-success<% end %>">
-      <div style="height: 36px" class="d-flex align-items-center">
+    <div class="card-header border-b flex flex-col gap-4 items-center justify-between h-auto pr-4 <% if integration.present? %>bg-green-50<% end %>">
+      <div class="flex items-center py-1">
         <%= image_tag integration_class.icon_path, alt: integration_name, height: 36 if integration_class.icon_path.present? %>
       </div>
 
@@ -22,14 +22,14 @@
       <p><%= integration_description %></p>
     </div>
 
-    <div class="card-footer d-flex <% if integration.present? %>align-items-baseline justify-content-between<% else %>flex-column<% end %>">
+    <div class="card-footer flex <% if integration.present? %>items-baseline justify-between<% else %>flex-col<% end %>">
       <% if integration.present? %>
-        <%= link_to spree.edit_admin_integration_path(integration), class: 'card-link btn btn-sm btn-light' do %>
+        <%= link_to spree.edit_admin_integration_path(integration), class: 'btn btn-sm btn-light' do %>
           <%= icon 'settings' %>
           <%= Spree.t(:settings) %>
         <% end if can?(:update, integration) %>
       <% else %>
-        <%= link_to_with_icon 'plus', "#{Spree.t('actions.connect')} #{integration_class.integration_name}", spree.new_admin_integration_path(integration: { type: integration_class.name }), class: 'btn btn-primary' if can?(:create, Spree::Integration) %>
+        <%= link_to_with_icon 'plus', "#{Spree.t('actions.connect')} #{integration_class.integration_name}", spree.new_admin_integration_path(integration: { type: integration_class.name }), class: 'btn btn-primary truncate w-full' if can?(:create, Spree::Integration) %>
       <% end %>
     </div>
   </div>

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

@@ -6,6 +6,10 @@
 <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @integration } %>
 
 <%= form_for @integration, as: :integration, url: spree.admin_integration_path(@integration) do |form| %>
-  <%= render "spree/admin/integrations/forms/#{@integration.key}", form: form %>
-  <%= render 'spree/admin/shared/edit_resource_links', f: form %>
+  <div class="grid grid-cols-12 gap-6">
+    <div class="col-span-12 lg:col-span-6 lg:col-start-4">
+      <%= render "spree/admin/integrations/forms/#{@integration.key}", form: form %>
+      <%= render 'spree/admin/shared/edit_resource_links', f: form %>
+    </div>
+  </div>
 <% end %>

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

@@ -8,33 +8,33 @@
 
 <%= render_admin_partials(:integrations_header_partials) %>
 
-<div class="row">
-  <div class="col-lg-8 offset-lg-2">
-    <div class="alert alert-info mb-4">
+<div class="grid grid-cols-12 gap-6">
+  <div class="col-span-12 lg:col-span-8 lg:col-start-3">
+    <div class="alert alert-info mb-6">
       <%= Spree.t('admin.integrations.page_subtitle') %>
     </div>
 
     <% if grouped_available_store_integrations.any? %>
       <% grouped_available_store_integrations.each do |group, integrations| %>
         <% if group.present? %>
-          <div class="my-2 text-muted font-weight-light text-uppercase"><%= Spree.t(group) %></div>
+          <div class="my-2 text-gray-600 font-light uppercase"><%= Spree.t(group) %></div>
         <% end %>
 
-        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 mb-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
           <% integrations.each do |integration| %>
             <%= render 'spree/admin/integrations/integration', integration_class: integration %>
           <% end %>
         </div>
       <% end %>
 
-      <p class="text-muted text-center my-5">
-        Find more integrations 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 integrations in <%= external_link_to 'Integrations Directory', 'https://spreecommerce.org/docs/integrations/integrations', target: '_blank' %>
       </p>
     <% else %>
-      <p class="text-muted text-center my-5">
+      <p class="text-gray-600 text-center my-12">
         No integrations installed yet. Find integrations in 
 
-        <%= external_link_to 'Integrations Directory', 'https://spreecommerce.org/docs/integrations/integrations', class: 'text-decoration-none font-weight-bold', target: '_blank' %>
+        <%= external_link_to 'Integrations Directory', 'https://spreecommerce.org/docs/integrations/integrations', target: '_blank' %>
       </p>
     <% end %>
   </div>

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

@@ -7,8 +7,8 @@
   <%= form.hidden_field :type %>
   <%= form.hidden_field :active, value: true %>
 
-  <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: @integration } %>
       <%= render "spree/admin/integrations/forms/#{@integration.key}", form: form %>
       <%= render 'spree/admin/shared/new_resource_links' %>

data/app/views/spree/admin/invitations/_invitation.html.erb

@@ -21,7 +21,7 @@
       <span class="badge badge-warning"><%= Spree.t(:expired) %></span>
     <% else %>
       <span class="badge badge-light"><%= Spree.t(:pending) %></span>
-      <p class="text-muted font-size-sm mb-0 mt-2 pl-1">Expires at: <%= spree_time(invitation.expires_at) %></p>
+      <p class="text-gray-600 text-sm mb-0 mt-2 pl-1">Expires at: <%= spree_time(invitation.expires_at) %></p>
     <% end %>
   </td>
   <td class="w-10">
@@ -29,7 +29,7 @@
   </td>
   <td class="w-10 actions">
     <% if invitation.pending? && !invitation.expired? %>
-      <%= dropdown do %>
+      <%= dropdown portal: false do %>
         <%= dropdown_toggle class: 'btn-light btn-sm' do %>
           <%= icon('dots-vertical', class: 'mr-0') %>
         <% end %>
@@ -43,7 +43,7 @@
               class: "dropdown-item", 
               data: { turbo_method: :put, turbo_confirm: Spree.t(:are_you_sure) } %>
           <%= link_to_with_icon 'trash', Spree.t('actions.destroy'), spree.admin_invitation_path(invitation),
-              class: "dropdown-item btn-danger",
+              class: "dropdown-item text-red-600 hover:bg-red-100",
               data: { turbo_method: :delete, turbo_confirm: Spree.t(:are_you_sure) } if can?(:destroy, invitation) %>
         <% end %>
       <% end %>

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

@@ -10,11 +10,11 @@
   <table class="table">
     <thead>
     <tr>
-      <th scope="col" class="rounded-lg-top-left"><%= Spree.t(:email) %></th>
+      <th scope="col" class="rounded-xl-top-left"><%= Spree.t(:email) %></th>
       <th scope="col"><%= I18n.t('activerecord.attributes.spree/invitation.inviter') %></th>
       <th scope="col"><%= Spree.t(:role_id) %></th>
       <th scope="col"><%= Spree.t(:status) %></th>
-      <th scope="col" class="rounded-lg-top-right"><%= sort_link @search, :created_at, Spree.t(:created_at) %></th>
+      <th scope="col" class="rounded-xl-top-right"><%= sort_link @search, :created_at, Spree.t(:created_at) %></th>
       <th scope="col"></th>
     </tr>
     </thead>

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

@@ -1,4 +1,4 @@
-<div class="d-flex align-items-center gap-2 mb-4">
+<div class="flex items-center gap-2 mb-6">
   <div>
     <%= render_avatar(@invitation.inviter, height: 32, width: 32) %>
   </div>
@@ -6,4 +6,4 @@
     <strong><%= @invitation.inviter.name %></strong> has invited you to join <strong><%= @invitation.resource.name %></strong>
   </div>
 </div>
-<%= link_to Spree.t(:accept), spree.accept_admin_invitation_path(@invitation), class: 'btn btn-primary mx-auto px-5', data: { turbo_method: :put } %>
+<%= link_to Spree.t(:accept), spree.accept_admin_invitation_path(@invitation), class: 'btn btn-primary mx-auto px-12', data: { turbo_method: :put } %>