spree_admin 5.2.6 → 5.3.0.rc1

data/app/views/spree/admin/dashboard/_visits.html.erb

@@ -1,23 +1,23 @@
-<div class="row row-cols-1 row-cols-md-2">
-  <div class="col mb-4">
-    <div class="card h-100">
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+  <div class="col mb-6">
+    <div class="card h-full">
       <div class="card-header">
         <h5 class="card-title">
           Where are visitors coming from?
         </h5>
       </div>
       <% if @top_referrers.any? %>
-        <ul class="list-group list-group-flush small rounded-0">
+        <ul class="list-group list-group-flush small rounded-none">
           <% @top_referrers.each do |referrer| %>
-            <li class="list-group-item d-flex justify-content-between hover-light">
+            <li class="list-group-item flex justify-between hover:bg-gray-25">
               <span><%= referrer.first %></span>
               <span><%= referrer.second %></span>
             </li>
           <% end %>
         </ul>
       <% else %>
-        <p class="m-5 text-center text-muted">
-          <%= icon 'share', height: 50, class: 'mb-3', style: 'opacity: 0.5' %>
+        <p class="m-12 text-center text-gray-600">
+          <%= icon 'share', height: 50, class: 'mb-4', style: 'opacity: 0.5' %>
           <br />
           <strong>No data</strong>
           <br />
@@ -26,25 +26,25 @@
       <% end %>
     </div>
   </div>
-  <div class="col mb-4">
-    <div class="card h-100">
+  <div class="col mb-6">
+    <div class="card h-full">
       <div class="card-header">
         <h5 class="card-title">
           Top landing pages
         </h5>
       </div>
       <% if @top_landing_pages.any? %>
-        <ul class="list-group list-group-flush small rounded-0">
+        <ul class="list-group list-group-flush small rounded-none">
           <% @top_landing_pages.each do |landing_page| %>
-            <li class="list-group-item d-flex justify-content-between hover-light">
+            <li class="list-group-item flex justify-between hover:bg-gray-25">
               <span><%= landing_page.first %></span>
               <span><%= landing_page.second %></span>
             </li>
           <% end %>
         </ul>
       <% else %>
-        <p class="m-5 text-center text-muted">
-          <%= icon 'pointer', height: 50, class: 'mb-3', style: 'opacity: 0.5' %>
+        <p class="m-12 text-center text-gray-600">
+          <%= icon 'pointer', height: 50, class: 'mb-4', style: 'opacity: 0.5' %>
           <br />
           <strong>No data</strong>
           <br />
@@ -53,17 +53,17 @@
       <% end %>
     </div>
   </div>
-  <div class="col mb-4">
-    <div class="card h-100">
+  <div class="col mb-6">
+    <div class="card h-full">
       <div class="card-header">
         <h5 class="card-title">
           Visitor location
         </h5>
       </div>
       <% if @top_locations.any? %>
-        <ul class="list-group list-group-flush small rounded-0">
+        <ul class="list-group list-group-flush small rounded-none">
           <% @top_locations.each do |location| %>
-            <li class="list-group-item d-flex justify-content-between hover-light">
+            <li class="list-group-item flex justify-between hover:bg-gray-25">
               <% cache [*spree_base_cache_key, "visits-country/#{location.first}"] do %>
                 <span>
                   <span class="mr-1">
@@ -77,8 +77,8 @@
           <% end %>
         </ul>
       <% else %>
-        <p class="m-5 text-center text-muted">
-          <%= icon 'world', height: 50, class: 'mb-3', style: 'opacity: 0.5' %>
+        <p class="m-12 text-center text-gray-600">
+          <%= icon 'world', height: 50, class: 'mb-4', style: 'opacity: 0.5' %>
           <br />
           <strong>No data</strong>
           <br />
@@ -87,7 +87,7 @@
       <% end %>
     </div>
   </div>
-  <div class="col mb-4">
+  <div class="col mb-6">
     <div class="card">
       <div class="card-header">
         <h5 class="card-title">
@@ -99,8 +99,8 @@
           <%= pie_chart @top_devices, legend: "bottom", suffix: "%" %>
         </div>
       <% else %>
-        <p class="m-5 text-center text-muted">
-          <%= icon 'device-mobile', height: 50, class: 'mb-3', style: 'opacity: 0.5' %>
+        <p class="m-12 text-center text-gray-600">
+          <%= icon 'device-mobile', height: 50, class: 'mb-4', style: 'opacity: 0.5' %>
           <br />
           <strong>No data</strong>
           <br />

data/app/views/spree/admin/dashboard/analytics.html.erb

@@ -3,16 +3,16 @@
 <% end %>
 
 <%= turbo_frame_tag :analytics do %>
-  <div class="card mb-4"
+  <div class="card mb-6"
        data-controller="tabs"
        data-tabs-active-tab-class-value="active">
-    <div class="card-header d-block border-0 h-auto p-2">
-      <div class="row">
-        <div class="col-6 col-lg-4 pr-2">
+    <div class="card-header block border-0 h-auto p-2">
+      <div class="grid grid-cols-12 gap-2">
+        <div class="col-span-6 lg:col-span-4 gap-2">
           <div class="analytics-card-tab active" data-tabs-target="tab" data-action="click->tabs#select">
-            <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0">
-              <span class="font-size-sm text-muted">Total Sales</span>
-              <span class="font-size-lg text-dark font-weight-bold mt-1">
+            <div class="flex justify-center flex-col mb-6 lg:mb-0">
+              <span class="text-sm text-gray-500">Total Sales</span>
+              <span class="text-lg text-gray-900 font-bold mt-1">
                 <%= @sales_total %>
               </span>
               <div>
@@ -22,11 +22,11 @@
           </div>
         </div>
 
-        <div class="col-6 col-lg-2 pl-0 pr-2">
+        <div class="col-span-6 lg:col-span-2">
           <div class="analytics-card-tab" data-tabs-target="tab" data-action="click->tabs#select">
-            <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0">
-              <span class="font-size-sm text-muted">Avg. Order Value</span>
-              <span class="font-size-lg text-dark font-weight-bold mt-1 me-3"><%= @orders_average %></span>
+            <div class="flex justify-center flex-col mb-6 lg:mb-0">
+              <span class="text-sm text-gray-500">Avg. Order Value</span>
+              <span class="text-lg text-gray-900 font-bold mt-1 mr-3"><%= @orders_average %></span>
               <div>
                 <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: @orders_average_growth_rate %>
               </div>
@@ -34,11 +34,11 @@
           </div>
         </div>
 
-        <div class="col-6 col-lg-2 pl-0 pr-2">
+        <div class="col-span-6 lg:col-span-2">
           <div class="analytics-card-tab" data-tabs-target="tab" data-action="click->tabs#select">
-            <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0">
-              <span class="font-size-sm text-muted">Total Orders</span>
-              <span class="font-size-lg text-dark font-weight-bold mt-1 me-3"><%= @orders_total  %></span>
+            <div class="flex justify-center flex-col mb-6 lg:mb-0">
+              <span class="text-sm text-gray-500">Total Orders</span>
+              <span class="text-lg text-gray-900 font-bold mt-1 mr-3"><%= @orders_total  %></span>
               <div>
                 <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: @orders_growth_rate %>
               </div>
@@ -46,11 +46,11 @@
           </div>
         </div>
         <% if @visits_total && @visits_growth_rate %>
-          <div class="col-6 col-lg-2 pl-0 pr-2">
+          <div class="col-span-6 lg:col-span-2">
             <div class="analytics-card-tab" data-tabs-target="tab" data-action="click->tabs#select">
-              <div class="d-flex justify-content-center flex-column">
-                <span class="font-size-sm text-muted">Visits</span>
-                <span class="font-size-lg text-dark font-weight-bold mt-1 me-3"><%= @visits_total %></span>
+              <div class="flex justify-center flex-col">
+                <span class="text-sm text-gray-500">Visits</span>
+                <span class="text-lg text-gray-900 font-bold mt-1 mr-3"><%= @visits_total %></span>
                 <div>
                   <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: @visits_growth_rate %>
                 </div>
@@ -60,11 +60,11 @@
         <% end %>
 
         <% if @audience_total && @audience_growth_rate %>
-          <div class="col-6 col-lg-2 pl-0">
+          <div class="col-span-6 lg:col-span-2">
             <div class="analytics-card-tab" data-tabs-target="tab" data-action="click->tabs#select">
-              <div class="d-flex justify-content-center flex-column">
-                <span class="font-size-sm text-muted">Sign-ups</span>
-                <span class="font-size-lg text-dark font-weight-bold mt-1 me-3"><%= @audience_total %></span>
+              <div class="flex justify-center flex-col">
+                <span class="text-sm text-gray-500">Sign-ups</span>
+                <span class="text-lg text-gray-900 font-bold mt-1 mr-3"><%= @audience_total %></span>
                 <div>
                   <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: @audience_growth_rate %>
                 </div>
@@ -75,7 +75,7 @@
       </div>
     </div>
     <div class="card-body p-2">
-      <div data-tabs-target="panel" class="animate__animated animate__fadeIn">
+      <div data-tabs-target="panel" class="animate-fade-in">
         <% if currency_money(current_currency).symbol_first? %>
           <%= line_chart @grouped_orders_scope.sum(:total), prefix: currency_money(current_currency).symbol, zeros: true, points: false, library: {
             animation: {
@@ -92,19 +92,19 @@
           } %>
         <% end %>
       </div>
-      <div data-tabs-target="panel" class="animate__animated animate__fadeIn" hidden>
+      <div data-tabs-target="panel" class="animate-fade-in" hidden>
         <%= line_chart @grouped_orders_scope.average(:total), suffix: currency_money(current_currency).symbol, zeros: true, points: false %>
       </div>
-      <div data-tabs-target="panel" class="animate__animated animate__fadeIn" hidden>
+      <div data-tabs-target="panel" class="animate-fade-in" hidden>
         <%= line_chart @grouped_orders_scope.count, points: false %>
       </div>
       <% if @visits %>
-        <div data-tabs-target="panel" class="animate__animated animate__fadeIn" hidden>
+        <div data-tabs-target="panel" class="animate-fade-in" hidden>
           <%= line_chart @visits.count, points: false %>
         </div>
       <% end %>
       <% if @audience %>
-        <div data-tabs-target="panel" class="animate__animated animate__fadeIn" hidden>
+        <div data-tabs-target="panel" class="animate-fade-in" hidden>
           <%= line_chart @audience.count, points: false %>
         </div>
       <% end %>

data/app/views/spree/admin/dashboard/getting_started.html.erb

@@ -1,9 +1,9 @@
-<div class="row pt-4">
-  <div class="col-lg-8 offset-lg-2 mb-4">
+<div class="grid grid-cols-12 gap-6 pt-6">
+  <div class="col-span-12 lg:col-span-8 lg:col-start-3 mb-6">
     <h2 class="page-header-title">
       <%= Spree.t('admin.getting_started') %>
     </h2>
-    <p>
+    <p class="mb-4">
       <%= Spree.t('admin.dashboard.getting_started.description') %>
     </p>
 

data/app/views/spree/admin/dashboard/setup_tasks/_add_products.html.erb

@@ -14,7 +14,7 @@
   </p>
 <% end %>
 
-<div class="d-flex gap-3">
+<div class="flex gap-3">
   <%= link_to_with_icon 'plus', Spree.t(:add_product), spree.new_admin_product_path, class: 'btn btn-primary', data: { turbo_frame: '_top' } if can?(:create, Spree::Product) %>
   <%= link_to_with_icon 'table-import', Spree.t(:import), spree.new_admin_import_path(type: 'Spree::Imports::Products'), class: 'btn btn-light', data: { action: 'drawer#open',turbo_frame: :drawer } if can?(:create, Spree::Import) %>
   

data/app/views/spree/admin/dashboard/setup_tasks/_set_customer_support_email.html.erb

@@ -1,11 +1,11 @@
-<%= turbo_frame_tag :set_customer_support_email, class: 'w-100' do %>
+<%= turbo_frame_tag :set_customer_support_email, class: 'w-full' do %>
   <div class="alert alert-info">
     We need your customer support email to display on your storefront.
     This email will work as a contact point for your customers to reach out to you for any queries or support.
   </div>
 
   <% if done %>
-    <p>
+    <p class="mb-3">
       Your customer support email is <strong><%= current_store.customer_support_email %>.</strong>
     </p>
     <%= link_to_with_icon 'edit', Spree.t(:edit), spree.edit_emails_admin_store_path, class: 'btn btn-light' %>
@@ -13,11 +13,9 @@
     <%= form_for current_store, url: spree.admin_store_path, as: :store do |f| %>
       <div class="form-group">
         <%= f.label :customer_support_email, 'Customer support email' %>
-        <%= f.email_field :customer_support_email, class: 'form-control', required: true %>
-      </div>
-      <div class="d-flex justify-content-between">
-        <%= turbo_save_button_tag %>
+        <%= f.email_field :customer_support_email, class: 'form-input', required: true %>
       </div>
+      <%= turbo_save_button_tag %>
     <% end %>
   <% end %>
 <% end %>

data/app/views/spree/admin/dashboard/setup_tasks/_setup_payment_method.html.erb

@@ -1,6 +1,10 @@
-<% if done %>
-  <%= Spree.t('admin.store_setup_tasks.payment_methods.done', link: spree.admin_payment_methods_path).html_safe %>
+  <% if done %>
+  <p>
+    <%= Spree.t('admin.store_setup_tasks.payment_methods.done', link: spree.admin_payment_methods_path).html_safe %>
+  </p>
 <% else %>
   <p><%= Spree.t('admin.store_setup_tasks.payment_methods.copy') %></p>
-  <%= link_to Spree.t('admin.store_setup_tasks.payment_methods.setup'), spree.admin_payment_methods_path, class: 'btn btn-primary', data: { turbo_frame: '_top' } %>
+  <div>
+    <%= link_to Spree.t('admin.store_setup_tasks.payment_methods.setup'), spree.admin_payment_methods_path, class: 'btn btn-primary', data: { turbo_frame: '_top' } %>
+  </div>
 <% end %>

data/app/views/spree/admin/dashboard/setup_tasks/_setup_taxes_collection.html.erb

@@ -1,6 +1,8 @@
 <% if current_store.setup_task_done?(:setup_taxes_collection) %>
-  <%= Spree.t('admin.store_setup_tasks.taxes.done', link: spree.admin_tax_rates_path).html_safe %>
+  <p><%= Spree.t('admin.store_setup_tasks.taxes.done', link: spree.admin_tax_rates_path).html_safe %></p>
 <% else %>
   <p><%= Spree.t('admin.store_setup_tasks.taxes.copy') %></p>
-  <%= link_to Spree.t('admin.store_setup_tasks.taxes.setup'), spree.admin_tax_rates_path, class: 'btn btn-primary', data: { turbo_frame: '_top' } %>
+  <div>
+    <%= link_to Spree.t('admin.store_setup_tasks.taxes.setup'), spree.admin_tax_rates_path, class: 'btn btn-primary', data: { turbo_frame: '_top' } %>
+  </div>
 <% end %>

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

@@ -1,28 +1,28 @@
-<div class="row pt-4">
-  <div class="col-12">
+<div class="grid grid-cols-12 gap-6 pt-6">
+  <div class="col-span-12">
     <h2 class="page-header-title">
       <%= Spree.t('admin.dashboard.hi') %> <%= try_spree_current_user.first_name %>!
     </h2>
-    <p>
+    <p class="mb-4">
       <%= Spree.t('admin.dashboard.whats_happening_on', store_name: current_store.name).html_safe %>
     </p>
   </div>
 </div>
 
-<div class="row">
-  <div class="col-lg-8">
-    <div class="mb-2 d-flex gap-2">
+<div class="grid grid-cols-12 gap-6">
+  <div class="col-span-12 lg:col-span-8">
+    <div class="mb-2 flex gap-2">
       <%= form_tag spree.admin_dashboard_analytics_path, method: :get, data: { turbo_frame: :analytics } do %>
         <%= hidden_field_tag :vendor_id, @vendor.id if @vendor.present? %>
         <%= render 'spree/admin/shared/calendar_range_picker',
           date_from_value: params[:date_from] || 1.month.ago.end_of_day,
           date_to_value: params[:date_to] || Time.zone.now.beginning_of_day,
-          css_classes: "btn btn-sm border rounded-lg hover-light d-inline-flex align-items-center h-100 dropdown-toggle" %>
+          css_classes: "btn btn-sm btn-light rounded-xl hover:bg-gray-25 inline-flex items-center h-full dropdown-toggle bg-transparent" %>
       <% end %>
     </div>
     <%= render 'analytics' %>
   </div>
-  <div class="col-lg-4">
+  <div class="col-span-12 lg:col-span-4">
     <%= render 'sidebar' %>
     <%= render_admin_partials(:dashboard_sidebar_partials) %>
   </div>

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

@@ -1,6 +1,6 @@
-<div class="form-group mb-3">
+<div class="form-group mb-4">
   <%= f.label :attachment, Spree.t(:filename) %>
-  <%= f.file_field :attachment, required: true, class: "form-control w-100" %>
+  <%= f.file_field :attachment, required: true, class: "form-input w-full" %>
 </div>
 <%= f.error_message_on :attachment %>
 

data/app/views/spree/admin/digital_assets/_table.html.erb

@@ -17,7 +17,7 @@
         <td colspan="4">
           <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(:no_resource_found, resource: Spree.t(:digital_assets)) %>
@@ -25,7 +25,7 @@
               <%= link_to_with_icon "plus",
               Spree.t(:add_one),
               spree.new_admin_product_digital_asset_path(@product),
-              class: "btn btn-light ml-3",
+              class: "btn btn-light ml-12",
               data: {
                 turbo_frame: "dialog",
                 action: 'dialog#open',

data/app/views/spree/admin/errors/403.html.erb

@@ -3,8 +3,8 @@
 <% end %>
 
 <div class="page-container py-12">
-  <div class="not-found-page text-center pt-5">
-    <h1 class="display-4 text-primary">403</h1>
+  <div class="not-found-page text-center pt-12">
+    <h1 class="display-4 text-zinc-950">403</h1>
     <p class="display-5"><%= Spree.t(:forbidden) %></p>
     <p class="display-6"><%= Spree.t(:forbidden_message) %></p>
     <%= link_to Spree.t("admin.back_to_dashboard"),

data/app/views/spree/admin/errors/404.html.erb

@@ -3,8 +3,8 @@
 <% end %>
 
 <div class="page-container py-12">
-  <div class="not-found-page text-center pt-5">
-    <h1 class="display-4 text-primary">404</h1>
+  <div class="not-found-page text-center pt-12">
+    <h1 class="display-4 text-zinc-950">404</h1>
     <p class="display-5"><%= Spree.t(:page_not_found) %></p>
     <p class="display-6"><%= Spree.t(:page_not_found_message) %></p>
     <%= link_to Spree.t("admin.back_to_dashboard"),

data/app/views/spree/admin/errors/422.html.erb

@@ -3,8 +3,8 @@
 <% end %>
 
 <div class="page-container py-12">
-  <div class="not-found-page text-center pt-5">
-    <h1 class="display-4 text-primary">422</h1>
+  <div class="not-found-page text-center pt-12">
+    <h1 class="display-4 text-zinc-950">422</h1>
     <p class="display-5"><%= Spree.t(:unprocessable_entity) %></p>
     <p class="display-6"><%= Spree.t(:unprocessable_entity_message) %></p>
     <%= link_to Spree.t("admin.back_to_dashboard"),

data/app/views/spree/admin/errors/500.html.erb

@@ -3,8 +3,8 @@
 <% end %>
 
 <div class="page-container py-12">
-  <div class="not-found-page text-center pt-5">
-    <h1 class="display-4 text-primary">500</h1>
+  <div class="not-found-page text-center pt-12">
+    <h1 class="display-4 text-zinc-950">500</h1>
     <p class="display-5"><%= Spree.t(:internal_server_error) %></p>
     <p class="display-6"><%= Spree.t(:internal_server_error_message) %></p>
     <%= link_to Spree.t("admin.back_to_dashboard"),

data/app/views/spree/admin/errors/503.html.erb

@@ -3,8 +3,8 @@
 <% end %>
 
 <div class="page-container py-12">
-  <div class="not-found-page text-center pt-5">
-    <h1 class="display-4 text-primary">503</h1>
+  <div class="not-found-page text-center pt-12">
+    <h1 class="display-4 text-zinc-950">503</h1>
     <p class="display-5"><%= Spree.t(:service_unavailable) %></p>
     <p class="display-6"><%= Spree.t(:service_unavailable_message) %></p>
     <%= link_to Spree.t("admin.back_to_dashboard"),

data/app/views/spree/admin/exports/_export.html.erb

@@ -19,7 +19,7 @@
     <% end %>
   </td>
 
-  <td class="w-25">
+  <td class="w-1/4">
     <% if export.user %>
       <span>
         <%= export.user.name %>

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

@@ -14,21 +14,19 @@
         <%= f.radio_button :record_selection, 'filtered', class: 'custom-control-input' %>
         <%= f.label :record_selection, for: :export_record_selection_filtered, class: 'custom-control-label' do %>
           <%= Spree.t(:filtered_records) %>
-          <br />
-          <span class="text-muted font-weight-normal mr-1">
-            <%= Spree.t('admin.export_only_filtered_records') %>
-          </span>
         <% end %>
+        <span class="text-gray-600 font-normal ml-7 mt-2">
+          <%= Spree.t('admin.export_only_filtered_records') %>
+        </span>
       </div>
-      <div class="custom-control custom-radio mt-3">
+      <div class="custom-control custom-radio mt-4">
         <%= f.radio_button :record_selection, 'all', class: 'custom-control-input' %>
         <%= f.label :record_selection, for: :export_record_selection_all, class: 'custom-control-label' do %>
           <%= Spree.t(:all) %>
-          <br />
-          <span class="text-muted font-weight-normal mr-1">
-            <%= Spree.t('admin.export_all') %>
-          </span>
         <% end %>
+        <span class="text-gray-600 font-normal ml-7 mt-2">
+          <%= Spree.t('admin.export_all') %>
+        </span>
       </div>
     </div>
     <div class="dialog-footer">

data/app/views/spree/admin/gift_card_batches/_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(:gift_card_batch) %>
@@ -6,8 +6,8 @@
   </div>
 
   <div class="card-body">
-    <%= f.spree_text_field :prefix, disabled: f.object.persisted?, label: Spree.t('admin.gift_card_batches.prefix') %>
-    <%= f.spree_number_field :amount, required: true, disabled: f.object.persisted? %>
+    <%= f.spree_text_field :prefix, disabled: f.object.persisted?, label: Spree.t('admin.gift_card_batches.prefix'), autofocus: true %>
+    <%= f.spree_money_field :amount, currency: f.object.currency, required: true, disabled: f.object.persisted? %>
     <%= f.spree_select :currency, options_for_select(supported_currency_options, f.object.currency), { label: Spree.t(:currency), autocomplete: true } %>
     <%= f.spree_number_field :codes_count, required: true, min: 1, max: Spree::Config[:gift_card_batch_limit], label: Spree.t('admin.gift_card_batches.codes_count') %>
     <%= f.spree_date_field :expires_at, disabled: f.object.persisted?, help: 'Gift cards will expire after this date.' %>

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

@@ -10,28 +10,28 @@
   } do |f| %>
     <%= hidden_field_tag :frame_name, frame_name if frame_name.present? %>
 
-    <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: :code_i_cont, label: Spree.t(:code) %>
       <%= render "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="gift-card-filters-drawer">
+  <%= drawer(id: 'gift-card-filters-drawer', controller_name: 'dialog') do %>
     <%= drawer_header(Spree.t(:filter), 'dialog') %>
     <div class="drawer-body">
     <% if params[:user_id].blank? %>
       <div class="form-group">
         <%= f.label :users_email_eq, Spree.t(:email) %>
-        <%= f.text_field :users_email_eq, class: "form-control", data: {filters_target: :input} %>
+        <%= f.text_field :users_email_eq, class: "form-input", data: {filters_target: :input} %>
       </div>
     <% end %>
 
     <div class="form-group">
       <%= f.label :batch_prefix_eq, Spree.t('admin.gift_card_batches.prefix') %>
-      <%= f.text_field :batch_prefix_eq, class: "form-control", data: {filters_target: :input} %>
+      <%= f.text_field :batch_prefix_eq, class: "form-input", data: {filters_target: :input} %>
     </div>
 
     <%= render_admin_partials(:gift_cards_filters_partials, f: f) %>
@@ -45,7 +45,7 @@
         <% end %>
       </div>
     </div>
-  </dialog>
+  <% end %>
 
   <%= render "spree/admin/shared/filter_badge_template" %>
 

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

@@ -1,10 +1,10 @@
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-body">
     <% unless f.object.persisted? %>
-      <%= f.spree_text_field :code, required: true, help_bubble: Spree.t('admin.gift_cards.code_help_text') %>
+      <%= f.spree_text_field :code, required: true, help_bubble: Spree.t('admin.gift_cards.code_help_text'), autofocus: true %>
     <% end %>
 
-    <%= f.spree_number_field :amount, required: true %>
+    <%= f.spree_money_field :amount, currency: f.object.currency, required: true %>
     <%= f.spree_select :currency, options_for_select(supported_currency_options, f.object.currency), { label: Spree.t(:currency), autocomplete: true }, { disabled: f.object.persisted? } %>
 
     <div class="form-group">

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

@@ -1,8 +1,8 @@
 <% link = @user.present? ? spree.admin_user_gift_card_path(gift_card, user_id: @user.id) : spree.admin_gift_card_path(gift_card) %>
 
 <tr id="<%= spree_dom_id gift_card %>" data-controller="row-link">
-  <td class="w-25 py-0">
-    <%= link_to gift_card.code.upcase, link, class: 'font-weight-bold d-block w-100 h-100 py-2', data: { 'turbo-frame': '_top', row_link_target: :link } %>
+  <td class="w-1/4 py-0">
+    <%= link_to gift_card.code.upcase, link, class: 'font-bold block w-full h-full py-2', data: { 'turbo-frame': '_top', row_link_target: :link } %>
   </td>
   <td class="w-10 cursor-pointer" data-action="click->row-link#openLink"><%= gift_card.display_amount %></td>
   <td class="w-10 cursor-pointer" data-action="click->row-link#openLink"><%= gift_card.display_amount_used %></td>
@@ -12,7 +12,7 @@
     <% if gift_card.expires_at.present? %>
       <%= spree_date(gift_card.expires_at) %>
     <% else %>
-      <span class="text-muted">
+      <span class="text-gray-600">
         <%= Spree.t(:not_available) %>
       </span>
     <% end %></td>
@@ -20,7 +20,7 @@
     <% if gift_card.user.present? %>
       <%= gift_card.user.email %>
     <% else %>
-      <span class="text-muted">
+      <span class="text-gray-600">
         <%= Spree.t(:not_available) %>
       </span>
     <% end %>

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

@@ -1,7 +1,7 @@
 <% if @collection.any? %>
   <div class="table-responsive" id="listing_gift_cards">
     <table class="table">
-      <thead class="text-muted">
+      <thead class="text-gray-600">
         <tr>
           <th scope="col"><%= Spree.t(:code) %></th>
           <th scope="col"><%= Spree.t(:amount) %></th>

data/app/views/spree/admin/gift_cards/_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">Show:</span>
+    <span class="text-gray-600 font-normal">Show:</span>
     <%= gift_cards_filter_dropdown_value %>
   <% end %>
   <%= dropdown_menu do %>

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

@@ -1,7 +1,7 @@
 <%= turbo_frame_tag :gift_card_settings do %>
   <%= form_for [:admin, @user, @object] do |f| %>
     <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>
@@ -10,7 +10,7 @@
         <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @object } %>
         <%= render 'form', 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_gift_card_path(@object), class: 'btn btn-light' %>