spree_admin 5.2.6 → 5.3.0.rc1

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

@@ -1,5 +1,5 @@
 <tr>
-  <td scope="row p-0" class="w-50">
+  <td scope="row p-0" class="w-1/2">
     <%= render 'spree/admin/variants/variant', variant: stock_item.variant %>
   </td>
   <td class="w-20">
@@ -14,8 +14,8 @@
        <%= form_for stock_item,
                url: spree.admin_stock_item_path(stock_item),
                method: :put,
-               html: { data: { controller: 'auto-submit'}, class: 'd-flex align-items-center justify-content-center' } do |f| %>
-        <div class="custom-control custom-checkbox">
+               html: { data: { controller: 'auto-submit'}, class: 'flex items-center justify-center' } do |f| %>
+        <div class="custom-control form-checkbox">
           <%= f.check_box :backorderable, class: 'custom-control-input', id: "stock_item_backorderable_#{stock_item.id}", data: { action: 'auto-submit#submit' } %>
           <label class="custom-control-label" for="stock_item_backorderable_<%= stock_item.id %>"><span></span></label>
         </div>
@@ -30,9 +30,9 @@
         <%= form_for stock_item,
                     url: spree.admin_stock_item_path(stock_item),
                     method: :put,
-                    html: { class: 'd-flex' } do |f| %>
+                    html: { class: 'flex' } do |f| %>
 
-          <%= f.number_field :count_on_hand, class: 'form-control mr-2', required: true, min: 0 %>
+          <%= f.number_field :count_on_hand, class: 'form-input mr-2', required: true, min: 0 %>
           <%= turbo_save_button_tag Spree.t('actions.update'), class: 'btn btn-primary' %>
         <% end %>
       <% end %>

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

@@ -12,4 +12,4 @@
 
 <%= render_admin_partials(:stock_items_header_partials) %>
 
-<%= render 'spree/admin/shared/index_table', new_object_url: nil %>
+<%= render_table @collection, :stock_items, edit_object_url: nil %>

data/app/views/spree/admin/stock_locations/_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(:general_settings) %>
@@ -12,7 +12,7 @@
     <% end %>
   </div>
 </div>
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title">
       <%= Spree.t(:address) %>

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

@@ -12,12 +12,12 @@
   <% end %>
   <td class="actions">
     <% if can? :edit, stock_location %>
-      <div class="d-flex justify-content-end align-items-center">
+      <div class="flex justify-end items-center">
         <div><%= link_to_edit stock_location, data: { row_link_target: 'link', turbo_frame: '_top' } %></div>
 
         <% if !stock_location.default? && can?(:mark_as_default, Spree::StockLocation) %>
           <%= dropdown do %>
-            <%= dropdown_toggle class: 'btn-sm h-100' do %>
+            <%= dropdown_toggle class: 'btn-sm h-full' do %>
               <%= icon('dots-vertical', class: 'mr-0') %>
             <% end %>
             <%= dropdown_menu do %>

data/app/views/spree/admin/stock_transfers/_destination_movement_form.html.erb

@@ -1,24 +1,24 @@
 <% variant_id = f.object.variant&.id || 'VARIANT_ID' %>
 <% location_id ||= 'DESTINATION_ID' %>
 
-<div class="d-flex align-items-center justify-content-between nested-form-wrapper" data-new-record="true">
+<div class="flex items-center justify-between nested-form-wrapper" data-new-record="true">
   <%= f.hidden_field :variant_id, value: variant_id %>
   <%= f.hidden_field :stock_item_id %>
   <%= f.hidden_field :location_id, data: { stock_transfer_target: "destinationInput" }, value: location_id %>
-  <div class="d-flex align-items-center gap-2">
+  <div class="flex items-center gap-2">
     <% if f.object.variant.present? %>
       <%= render 'spree/admin/shared/product_image', object: f.object.variant %>
     <% else %>
       VARIANT_IMAGE
     <% end %>
-    <div class="d-flex flex-column align-items-start justify-content-center">
+    <div class="flex flex-col items-start justify-center">
       <% if f.object.variant.present? %>
         <%= f.object.variant.name %>
         <% if f.object.variant.sku.present? %>
-          <span class="text-muted"><strong><%= Spree.t(:sku) %>:</strong> <%= f.object.variant.sku %></span>
+          <span class="text-gray-600"><strong><%= Spree.t(:sku) %>:</strong> <%= f.object.variant.sku %></span>
         <% end %>
 
-        <span class="text-muted">
+        <span class="text-gray-600">
           <%= "(#{f.object.variant.options_text})" if f.object.variant.options_text.present? %>
         </span>
       <% else %>
@@ -26,8 +26,8 @@
       <% end %>
     </div>
   </div>
-  <div class="d-flex align-items-center gap-2">
-    <%= f.number_field :quantity, class: 'form-control w-auto', value: f.object.quantity.zero? ? 1 : f.object.quantity, required: true, min: 1, data: { action: "stock-transfer#updateQuantity", variant_id: variant_id } %>
+  <div class="flex items-center gap-2">
+    <%= f.number_field :quantity, class: 'form-input w-auto', value: f.object.quantity.zero? ? 1 : f.object.quantity, required: true, min: 1, data: { action: "stock-transfer#updateQuantity", variant_id: variant_id } %>
     <%= button_tag class: 'btn btn-sm btn-danger', type: :button, data: { action: 'stock-transfer#remove', variant_id: variant_id } do %>
       <%= icon('trash', class: 'icon icon-trash') %>
       <%= Spree.t(:remove) %>

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

@@ -1,18 +1,18 @@
 <%= 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: :number_cont, label: Spree.t(:number) %>
-      <%= 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="stock-transfers-filters-drawer">
+  <%= drawer(id: 'stock-transfers-filters-drawer', controller_name: 'dialog') do %>
     <%= drawer_header(Spree.t(:filter), 'dialog') %>
     <div class="drawer-body">
     <div class="form-group">
       <%= f.label :reference_cont, Spree.t(:reference) %>
-      <%= f.text_field :reference_cont, include_blank: true, size: 15, class: "form-control", data: { filters_target: :input } %>
+      <%= f.text_field :reference_cont, include_blank: true, size: 15, class: "form-input", data: { filters_target: :input } %>
     </div>
     <div class="form-group">
       <%= f.label :source_location_id_eq, Spree.t(:source) %>
@@ -42,7 +42,7 @@
         <%= button Spree.t(:search), "search" %>
       </div>
     </div>
-  </dialog>
+  <% end %>
 
   <%= render "spree/admin/shared/filter_badge_template" %>
   <div data-filters-target="badgesContainer" class="filter-badges-container"></div>

data/app/views/spree/admin/stock_transfers/_new_variant_modal.html.erb

@@ -1,8 +1,8 @@
-<dialog class="dialog" data-dialog-target="dialog" id="stock_transfer_dialog" data-controller="search-picker">
+<%= dialog(id: 'stock_transfer_dialog', data: { controller: 'search-picker' }) do %>
   <%= dialog_header(Spree.t(:add_variant)) %>
   <div class="dialog-body">
     <%= form_with url: spree.admin_variants_search_path, method: :post, data: { controller: 'auto-submit', turbo_frame: '_top' } do |form| %>
-      <%= form.search_field :q, value: params[:q], class: 'form-control', data: { search_picker_target: :search, action: 'auto-submit#submit' }, autofocus: true %>
+      <%= form.search_field :q, value: params[:q], class: 'form-input', data: { search_picker_target: :search, action: 'auto-submit#submit' }, autofocus: true %>
       <%= form.hidden_field :param_name, value: 'stock_transfer' %>
       <%= form.hidden_field :all, value: true %>
       <%= form.hidden_field :eligible, value: true %>
@@ -12,7 +12,7 @@
   </div>
   <div class="dialog-body">
     <div id="variants_search_results" class="search-results" data-search-picker-target="results">
-      <p class="text-muted text-center py-5">
+      <p class="text-gray-600 text-center py-12">
         <%= Spree.t(:start_typing_to_search_for_variants) %>
       </p>
     </div>
@@ -21,4 +21,4 @@
     <%= dialog_discard_button %>
     <%= button_tag Spree.t(:add_selected_variant), class: "btn btn-primary text-center", disabled: true, data: { search_picker_target: :submit, action: 'stock-transfer#add search-picker#closeAndClear dialog#close' } %>
   </div>
-</dialog>
+<% end %>

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

@@ -1,11 +1,11 @@
 <tr id="<%= spree_dom_id stock_transfer %>" data-controller="row-link" class="cursor-pointer">
   <td scope="row" data-action="click->row-link#openLink"><%= stock_transfer.number %></td>
-  <td class="text-truncate" data-action="click->row-link#openLink"><%= stock_transfer.reference.presence %></td>
+  <td class="truncate" data-action="click->row-link#openLink"><%= stock_transfer.reference.presence %></td>
   <td data-action="click->row-link#openLink"><%= stock_transfer.source_location&.display_name.presence || Spree.t(:none) %></td>
   <td data-action="click->row-link#openLink"><%= stock_transfer.destination_location.display_name %></td>
   <td data-action="click->row-link#openLink"><%= stock_transfer.destination_movements.size %></td>
   <td data-action="click->row-link#openLink"><%= spree_time_ago(stock_transfer.created_at) %></td>
   <td class="actions" data-action="click->row-link#openLink">
-    <%= link_to '', admin_stock_transfer_path(stock_transfer), data: { row_link_target: 'link' }, class: 'd-none' %>
+    <%= link_to '', admin_stock_transfer_path(stock_transfer), data: { row_link_target: 'link' }, class: 'hidden' %>
   </td>
 </tr>

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

@@ -13,4 +13,4 @@
 
 <%= render_admin_partials(:stock_transfers_header_partials) %>
 
-<%= render 'spree/admin/shared/index_table' %>
+<%= render_table @collection, :stock_transfers %>

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

@@ -14,10 +14,10 @@
   <%= form_with model: [:admin, @stock_transfer] do |f| %>
     <%= render 'spree/admin/stock_transfers/new_variant_template', f: f %>
     <% stock_locations = available_stock_locations.to_tom_select_json %>
-    <div class="card mb-4">
+    <div class="card mb-12">
       <div class="card-body" >
-        <div class="row">
-          <div class="form-group col-12 col-lg-6">
+        <div class="grid grid-cols-12 gap-6">
+          <div class="form-group col-span-12 lg:col-span-6">
             <%= f.label :source_location_id, Spree.t(:origin), class: 'form-label' %>
             <%= tom_select_tag "stock_transfer[source_location_id]",
               empty_option: Spree.t(:none),
@@ -28,7 +28,7 @@
                 action: 'stock-transfer#updateSourceLocation'
               } %>
           </div>
-          <div class="form-group col-12 col-lg-6">
+          <div class="form-group col-span-12 lg:col-span-6">
             <%= f.label :destination_location_id, Spree.t(:destination), class: 'form-label' %>
             <%= tom_select_tag "stock_transfer[destination_location_id]",
               options: stock_locations,
@@ -42,12 +42,12 @@
         </div>
         <div class="form-group">
           <%= f.label :reference, class: 'form-label' %>
-          <%= f.text_field :reference, class: 'form-control' %>
+          <%= f.text_field :reference, class: 'form-input' %>
         </div>
       </div>
     </div>
-    <div class="card mb-4">
-      <div class="card-header d-flex align-items-center justify-content-between">
+    <div class="card mb-12">
+      <div class="card-header flex items-center justify-between">
         <h5 class="card-title">
           <%= Spree.t(:products) %>
         </h5>
@@ -60,10 +60,10 @@
         </span>
       </div>
       <div class="card-body p-0" style="min-height: 300px">
-        <div class="d-flex flex-column gap-3 overflow-y-auto overflow-x-hidden p-3" style="max-height: 300px">
+        <div class="flex flex-col gap-6 overflow-y-auto overflow-x-hidden p-6" style="max-height: 300px">
           <%= f.fields_for :stock_movements do |smf| %>
             <% if smf.object.errors[:quantity].present? %>
-              <div class="alert alert-danger w-100 mb-0">
+              <div class="alert alert-danger w-full mb-0">
                 <% details = smf.object.errors.details[:quantity].first %>
                 <% error_message = smf.object.errors.generate_message(:quantity, :less_than_or_equal_to, {count: -details[:count], value: details[:value]}) %>
                 <%= smf.object.errors.full_message(:quantity, error_message) %>

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

@@ -5,17 +5,17 @@
 <% content_for :title do %>
   <%= @stock_transfer.number %>
 <% end %>
-<div class="row">
-  <div class="col-lg-8">
-    <div class="card mb-4">
-      <div class="card-header d-flex align-items-center justify-content-between">
+<div class="grid grid-cols-12 gap-4">
+  <div class="col-span-12 lg:col-span-8">
+    <div class="card mb-12">
+      <div class="card-header flex items-center justify-between">
         <h5 class="card-title">
           <%= Spree.t(:products) %>
         </h5>
       </div>
       <div class="card-body p-0" style="min-height: 300px">
-        <div class="d-block overflow-y-auto overflow-x-hidden" style="max-height: 300px">
-          <div class="table-responsive rounded bg-white">
+        <div class="block overflow-y-auto overflow-x-hidden" style="max-height: 300px">
+          <div class="table-responsive rounded-lg  bg-white">
             <table class="table sortable">
               <thead>
                 <tr>
@@ -33,22 +33,22 @@
       </div>
     </div>
   </div>
-  <div class="col-lg-4">
-    <div class="card mb-4">
-      <div class="card-header d-flex align-items-center justify-content-between">
+  <div class="col-span-12 lg:col-span-4">
+    <div class="card mb-12">
+      <div class="card-header flex items-center justify-between">
         <h5 class="card-title">
           <%= Spree.t(:details) %>
         </h5>
       </div>
       <div class="card-body">
         <ul class="list-group">
-          <li class="list-group-item d-flex justify-content-between">
+          <li class="list-group-item flex justify-between">
             <%= Spree.t(:origin) %> <span><%= @stock_transfer.source_location&.display_name.presence || Spree.t(:none) %></span>
           </li>
-          <li class="list-group-item d-flex justify-content-between">
+          <li class="list-group-item flex justify-between">
             <%= Spree.t(:destination) %> <span><%= @stock_transfer.destination_location.display_name %></span>
           </li>
-          <li class="list-group-item d-flex justify-content-between">
+          <li class="list-group-item flex justify-between">
             <%= Spree.t(:reference) %> <span><%= @stock_transfer.reference %></span>
           </li>
         </ul>

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

@@ -6,7 +6,7 @@
 <%= render 'spree/admin/shared/error_messages', target: @store_credit_category %>
 
 <%= form_for [:admin, @store_credit_category] do |f| %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-body">
       <%= render 'form', f: f %>
     </div>

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

@@ -6,7 +6,7 @@
 <%= render 'spree/admin/shared/error_messages', target: @store_credit_category %>
 
 <%= form_for [:admin, @store_credit_category] do |f| %>
-  <div class="card mb-4">
+  <div class="card mb-6">
     <div class="card-body">
       <%= render 'form', f: f %>
     </div>

data/app/views/spree/admin/store_credit_events/_store_credit_event.html.erb

@@ -18,7 +18,7 @@
     <% if store_credit_event.order %>
       <%= link_to store_credit_event.order.number, spree.edit_admin_order_path(store_credit_event.order) %>
     <% else %>
-      <span class="text-muted">
+      <span class="text-gray-600">
         <%= Spree.t(:not_available) %>
       </span>
     <% end %>

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

@@ -1,3 +1,3 @@
-<%= f.spree_number_field :amount, label: Spree.t(:amount), min: 0.01, step: 0.01, required: true, disabled: !f.object.editable? %>
+<%= f.spree_money_field :amount, label: Spree.t(:amount), currency: f.object.currency, required: true, disabled: !f.object.editable? %>
 <%= f.spree_select :currency, options_for_select(supported_currency_options, f.object.currency), { label: Spree.t(:currency), autocomplete: true }, { data: { enable_button_target: 'input', store_form_target: 'currency' } } %>
 <%= f.spree_text_area :memo %>

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

@@ -1,7 +1,7 @@
 <%= turbo_frame_tag :store_credit_details do %>
   <%= form_for @store_credit, url: spree.admin_user_store_credit_path(@user, @store_credit), method: :put do |f| %>
     <div class="card">
-      <div class="card-header d-flex justify-content-between align-items-center">
+      <div class="card-header flex justify-between items-center">
         <h5 class="card-title">
           <%= Spree.t(:details) %>
         </h5>

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

@@ -8,10 +8,10 @@
 <% end %>
 
 <%= form_for @store_credit, url: spree.admin_user_store_credits_path(@user, @store_credit) 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: @store_credit } %>
-      <div class="card mb-4">
+      <div class="card mb-6">
         <div class="card-header">
           <h5 class="card-title">
             <%= Spree.t(:store_credits) %>

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

@@ -4,8 +4,8 @@
   <%= @store_credit.display_amount %>
 <% end %>
 
-<div class="row">
-  <div class="col-lg-8">
+<div class="grid grid-cols-12 gap-4">
+  <div class="col-span-12 lg:col-span-8">
     <div class="card">
       <div class="card-header">
         <h5 class="card-title">
@@ -31,10 +31,10 @@
     </div>
   </div>
 
-  <div class="col-lg-4">
+  <div class="col-span-12 lg:col-span-4">
     <%= turbo_frame_tag :store_credit_details do %>
       <div class="card">
-        <div class="card-header d-flex justify-content-between align-items-center">
+        <div class="card-header flex justify-between items-center">
           <h5 class="card-title">
             <%= Spree.t(:details) %>
           </h5>
@@ -45,8 +45,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(:customer) %>
               </span>
               <span>
@@ -54,8 +54,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_by) %>
               </span>
               <% if @store_credit.created_by %>
@@ -63,14 +63,14 @@
                   <%= link_to @store_credit.created_by.email, spree.admin_admin_user_path(@store_credit.created_by) %>
                 </span>
               <% else %>
-                <span class="text-muted">
+                <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_at) %>
               </span>
 
@@ -79,8 +79,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(:amount) %>
               </span>
 
@@ -89,8 +89,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(:authorized) %>
               </span>
 
@@ -99,8 +99,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(:used) %>
               </span>
 
@@ -109,8 +109,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>
 
@@ -119,8 +119,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>
 
@@ -129,8 +129,8 @@
               </span>
             </li>
 
-            <li class="list-group-item d-flex flex-column justify-content-between align-items-start">
-              <span class="text-muted mb-2">
+            <li class="list-group-item flex flex-col justify-between items-start">
+              <span class="text-gray-600 mb-1">
                 <%= Spree.t(:memo) %>
               </span>
 

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

@@ -2,10 +2,10 @@
   <%= turbo_save_button_tag Spree.t('actions.update'), class: 'btn btn-primary', form: "edit_store_#{current_store.id}", data: { admin_target: 'save' } %>
 <% end %>
 
-<%= render partial: 'spree/admin/shared/error_messages', locals: { target: @store }, class: 'mb-5 pb-5' %>
+<%= render partial: 'spree/admin/shared/error_messages', locals: { target: @store }, class: 'mb-12 pb-12' %>
 
-<div class="row">
-  <div class="col-lg-6 offset-lg-3">
+<div class="grid grid-cols-12 gap-16">
+  <div class="col-span-12 lg:col-span-6 lg:col-start-4">
     <%= form_for current_store, url: spree.admin_store_path(section: params[:section]), method: :patch do |f| %>
       <%= render partial: 'spree/admin/stores/form/basic', locals: { f: f } if params[:section].blank? || params[:section] == 'general-settings' %>
       <%= render partial: 'spree/admin/stores/form/emails', locals: { f: f } if params[:section] == 'emails' %>

data/app/views/spree/admin/stores/edit_emails.html.erb

@@ -1,10 +1,10 @@
-<%= turbo_frame_tag :set_customer_support_email, class: 'w-100' do %>
+<%= turbo_frame_tag :set_customer_support_email, class: 'w-full' do %>
   <%= form_for current_store, url: spree.admin_store_path, as: :store do |f| %>
     <div class="form-group">
       <%= f.label :customer_support_email, Spree.t(:customer_support_email) %>
-      <%= f.email_field :customer_support_email, class: 'form-control', required: true %>
+      <%= f.email_field :customer_support_email, class: 'form-input', required: true %>
     </div>
-    <div class="d-flex justify-content-between">
+    <div class="flex justify-between">
       <%= turbo_save_button_tag %>
     </div>
   <% end %>

data/app/views/spree/admin/stores/form/_basic.html.erb

@@ -3,12 +3,12 @@
 <% end %>
 
 
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title"><%= Spree.t(:name) %> & <%= Spree.t(:logo) %></h5>
   </div>
   <div class="card-body">
-    <p class="text-muted">
+    <p class="text-gray-600">
       <%= Spree.t(:store_name_help) %>
     </p>
     <%= f.spree_text_field :name, required: true, autofocus: f.object.new_record? %>
@@ -17,28 +17,28 @@
   </div>
 </div>
 
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title"><%= Spree.t(:currencies) %> & <%= Spree.t(:translations) %></h5>
   </div>
   <div class="card-body">
     <%= f.spree_select :default_currency, currency_options(@store.default_currency), { label: Spree.t(:default_currency), autocomplete: true } %>
     <%= f.spree_select :supported_currencies, currency_options(@store.supported_currencies&.split(',')), { prompt: false, multiple: true, autocomplete: true } %>
-    <hr />
+    <hr class="my-6" />
     <%= f.spree_select :default_locale, options_from_collection_for_select(all_locales_options, :last, :first, @store.default_locale || I18n.locale), { autocomplete: true } %>
     <%= f.spree_select :supported_locales, options_from_collection_for_select(all_locales_options, :last, :first, @store.supported_locales&.split(',')), { multiple: true, autocomplete: true } %>
   </div>
 </div>
 
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title"><%= Spree.t(:standards_and_formats) %></h5>
   </div>
   <div class="card-body">
-    <p class="text-muted">
+    <p class="text-gray-600">
       <%= Spree.t(:standards_and_formats_help) %>
     </p>
-    <div class="form-group mb-3">
+    <div class="form-group mb-6">
       <%= label_tag :preferred_timezone, raw(Spree.t(:timezone) + required_span_tag) %>
       <%= time_zone_select :store, :preferred_timezone, nil, {}, { data: { controller: 'autocomplete-select' } } %>
     </div>
@@ -49,7 +49,7 @@
   </div>
 </div>
 
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title"><%= Spree.t(:phone) %> & <%= Spree.t(:address) %></h5>
   </div>
@@ -59,18 +59,27 @@
   </div>
 </div>
 
-<div class="card mb-4">
+<div class="card mb-6">
   <div class="card-header">
     <h5 class="card-title"><%= Spree.t(:digital_assets) %></h5>
   </div>
   <div class="card-body">
-    <p class="text-muted">
+    <p class="text-gray-600 mb-4">
       <%= Spree.t(:digital_assets_help) %>
     </p>
-    <%= f.spree_check_box :preferred_limit_digital_download_days %>
-    <%= f.spree_number_field :preferred_digital_asset_authorized_days, min: 1 %>
-    <%= f.spree_check_box :preferred_limit_digital_download_count %>
-    <%= f.spree_number_field :preferred_digital_asset_authorized_clicks, min: 1 %>
+    <div data-controller="reveal">
+      <%= f.spree_check_box :preferred_limit_digital_download_days, data: { action: 'reveal#toggle' } %>
+      <div data-reveal-target="item" <% unless f.object.preferred_limit_digital_download_days %>class="hidden"<% end %>>
+        <%= f.spree_number_field :preferred_digital_asset_authorized_days, min: 1 %>
+      </div>
+    </div>
+    <hr class="my-6" />
+    <div data-controller="reveal">
+      <%= f.spree_check_box :preferred_limit_digital_download_count, data: { action: 'reveal#toggle' } %>
+      <div data-reveal-target="item" <% unless f.object.preferred_limit_digital_download_count %>class="hidden"<% end %>>
+        <%= f.spree_number_field :preferred_digital_asset_authorized_clicks, min: 1 %>
+      </div>
+    </div>
   </div>
 </div>