spree_admin 5.1.8 → 5.2.0.rc2

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

@@ -1,14 +1,12 @@
-<%= turbo_frame_tag :dialog_modal do %>
+<%= 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| %>
-    <div class="modal-content">
-      <%= modal_header(Spree.t(:update_shipping_address)) %>
-      <div class="modal-body d-flex flex-col gap-3">
-        <%= render 'form', address: @address, f: f %>
-      </div>
-      <div class="modal-footer">
-        <%= modal_discard_button %>
-        <%= turbo_save_button_tag Spree.t('actions.update') %>
-      </div>
+    <%= dialog_header(Spree.t(:update_shipping_address)) %>
+    <div class="dialog-body d-flex flex-col gap-3">
+      <%= render 'form', address: @address, f: f %>
+    </div>
+    <div class="dialog-footer">
+      <%= dialog_discard_button %>
+      <%= turbo_save_button_tag Spree.t('actions.update') %>
     </div>
   <% end %>
 <% end %>

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

@@ -1,14 +1,12 @@
-<%= turbo_frame_tag :dialog_modal do %>
+<%= turbo_frame_tag :dialog do %>
   <%= form_for @address, url: spree.admin_order_shipping_address_path(@order), data: {turbo_frame: :_top}, method: :post do |f| %>
-    <div class="modal-content">
-      <%= modal_header(Spree.t(:new_shipping_address)) %>
-      <div class="modal-body d-flex flex-col gap-3">
-        <%= render 'form', address: @address, f: f%>
-      </div>
-      <div class="modal-footer">
-        <%= modal_discard_button %>
-        <%= turbo_save_button_tag Spree.t('actions.save') %>
-      </div>
+    <%= dialog_header(Spree.t(:new_shipping_address)) %>
+    <div class="dialog-body d-flex flex-col gap-3">
+      <%= render 'form', address: @address, f: f%>
+    </div>
+    <div class="dialog-footer">
+      <%= dialog_discard_button %>
+      <%= turbo_save_button_tag Spree.t('actions.save') %>
     </div>
   <% end %>
 <% end %>

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

@@ -1,14 +1,12 @@
-<%= turbo_stream.update :dialog_modal do %>
+<%= 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| %>
-    <div class="modal-content">
-      <%= modal_header(Spree.t(:update_shipping_address)) %>
-      <div class="modal-body d-flex flex-col gap-3">
-        <%= render 'form', address: @address, f: f %>
-      </div>
-      <div class="modal-footer">
-        <%= modal_discard_button %>
-        <%= turbo_save_button_tag Spree.t('actions.update') %>
-      </div>
+    <%= dialog_header(Spree.t(:update_shipping_address)) %>
+    <div class="dialog-body d-flex flex-col gap-3">
+      <%= render 'form', address: @address, f: f %>
+    </div>
+    <div class="dialog-footer">
+      <%= dialog_discard_button %>
+      <%= turbo_save_button_tag Spree.t('actions.update') %>
     </div>
   <% end %>
 <% end %>

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

@@ -1,3 +1,3 @@
-<%= turbo_frame_tag :dialog_modal do %>
+<%= turbo_frame_tag :dialog do %>
   <%= render 'spree/admin/orders/user/form', order: @order, user: @user %>
 <% end %>

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

@@ -23,7 +23,7 @@
           <%= 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>" } %>
         <% 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-light w-100" %>
+        <%= link_to Spree.t(:create_new), spree.new_admin_order_user_path(@order, show_form: true), class: "btn btn-secondary w-100" %>
       </div>
     <% end %>
   </div>

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

@@ -8,23 +8,20 @@
   </h6>
   <div class="px-3 pb-5 mb-5 edit-block" style="margin-bottom: 6rem;">
     <%= form_for @page_block, url: spree.admin_page_section_block_path(@page_block.section, @page_block), data: { controller: 'auto-submit' }, as: :page_block do |f| %>
-      <div data-controller="bootstrap-tabs">
+      <div data-controller="tabs">
         <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
           <li class="nav-item" role="presentation">
-            <button class="btn nav-link w-100 <%= tab_selected == :content ? 'active' : '' %>" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="<%= tab_selected == :content %>" data-action="bootstrap-tabs#change" data-bootstrap-tabs-tab-param="content">Content</button>
+            <button class="btn nav-link w-100 <%= tab_selected == :content ? 'active' : '' %>" id="pills-home-tab" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-home" aria-selected="<%= tab_selected == :content %>">Content</button>
           </li>
           <li class="nav-item" role="presentation">
-            <button class="btn nav-link w-100 <%= tab_selected == :design ? 'active' : '' %>" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="<%= tab_selected == :design %>" data-action="bootstrap-tabs#change" data-bootstrap-tabs-tab-param="design">Design</button>
+            <button class="btn nav-link w-100 <%= tab_selected == :design ? 'active' : '' %>" id="pills-profile-tab" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-profile" aria-selected="<%= tab_selected == :design %>">Design</button>
           </li>
         </ul>
-        <%= hidden_field_tag :tab_selected, tab_selected, data: { bootstrap_tabs_target: "input" } %>
-      </div>
-      <div class="tab-content" id="pills-tabContent">
-        <div class="tab-pane fade <%= tab_selected == :content ? 'show active' : '' %>" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
-          <%= render "spree/admin/page_blocks/forms/#{@page_block.type.demodulize.underscore}", f: f  %>
+        <div data-tabs-target="panel" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" class="animate__animated animate__fadeIn" <%= 'hidden' unless tab_selected == :content %>>
+          <%= render "spree/admin/page_blocks/forms/#{@page_block.form_partial_name}", f: f  %>
           <%= render 'spree/admin/page_blocks/form_tab_buttons', tab: :content %>
         </div>
-        <div class="tab-pane fade <%= tab_selected == :design ? 'show active' : '' %>" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
+        <div data-tabs-target="panel" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" class="animate__animated animate__fadeIn" <%= 'hidden' unless tab_selected == :design %>>
           <%= render 'spree/admin/page_sections/fields/top_padding', f: f %>
           <%= render 'spree/admin/page_sections/fields/bottom_padding', f: f %>
           <% if @page_block.respond_to?(:preferred_text_color) %>

data/app/views/spree/admin/page_blocks/forms/_image.html.erb

@@ -1,5 +1,8 @@
 <%= render 'active_storage/upload_form', form: f, field_name: :asset, width: 512, height: 512, auto_submit: true %>
-
+<div class="mt-2 form-group">
+  <%= f.label :preferred_image_alt, Spree.t(:alt_text) %>
+  <%= f.text_field :preferred_image_alt, data: { action: 'auto-submit#submit' }, class: 'form-control' %>
+</div>
 <% content_for(:design_tab) do %>
   <%= render 'spree/admin/page_builder/labeled_range_input',
     f: f, field: :preferred_height, min: 1, max: 1024, unit: 'px', _label: 'Max image height on desktop'

data/app/views/spree/admin/page_blocks/forms/_metafields.html.erb

@@ -0,0 +1,35 @@
+<div class="form-group">
+  <div class="mb-2">
+    <label class="form-label"><%= Spree.t(:metafields) %></label>
+    <div class="p-1 border rounded d-flex flex-column gap-1 mb-3"
+         data-controller="sortable-auto-submit" 
+         data-sortable-auto-submit-handle-value=".handle"
+    >
+      <%= hidden_field_tag "#{f.object_name}[preferred_metafield_definition_ids][]", "" %>
+      <% selected_keys = f.object.preferred_metafield_definition_ids.map(&:to_s) %>
+      <% sorted_definitions = f.object.available_metafield_definitions.sort_by { |definition| selected_keys.index(definition.id.to_s) || selected_keys.length } %>
+      <% sorted_definitions.each do |definition| %>
+        <div class="rounded hover-light pl-2 pr-1 py-1 d-flex align-items-center justify-content-between"
+             id="<%= spree_dom_id(definition) %>"
+        >
+          <div class="custom-control custom-checkbox flex-grow-1 d-flex">
+            <input type="checkbox"
+                  class="custom-control-input"
+                  name="<%= "#{f.object_name}[preferred_metafield_definition_ids][]" %>"
+                  id="<%= "#{f.object_name}_preferred_metafield_definition_ids_#{definition.id}" %>"
+                  value="<%= definition.id %>"
+                  data-action="change->auto-submit#submit"
+                  <%= 'checked' if selected_keys.include?(definition.id.to_s) %>>
+            <label class="custom-control-label flex-grow-1" for="<%= "#{f.object_name}_preferred_metafield_definition_ids_#{definition.id}" %>" data-controller="tooltip">
+              <%= definition.name %>
+              <%= tooltip(definition.full_key) %>
+            </label>
+          </div>
+          <button class="btn btn-sm pr-0 handle hover-gray h-100 mr-1 px-1" type="button">
+            <%= icon('grip-vertical', class: 'mr-0') %>
+          </button>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/page_builder/_add_block.html.erb

@@ -1,11 +1,12 @@
 <%= form_for section.blocks.new, url: spree.admin_page_section_blocks_path(section), html: { class: 'list-group-item sidebar-page-block px-0 py-1 border-0 rounded'}, data: { controller: 'block-form', block_form_target: :form } do |f| %>
   <%= f.hidden_field :type, data: { block_form_target: 'type' } %>
 
-  <button class="btn btn-sm btn-link d-flex-inline" data-toggle="dropdown">
-    <%= icon("circle-plus") %>
-    Add block
-  </button>
-  <div class="dropdown-menu p-1">
+  <%= dropdown do %>
+    <%= dropdown_toggle class: 'btn-sm btn-secondary d-flex-inline' do %>
+      <%= icon("circle-plus") %>
+      Add block
+    <% end %>
+    <%= dropdown_menu direction: 'top-left' do %>
     <% section.available_blocks_to_add.each do |block_class| %>
       <a href="#" class="dropdown-item btn-sm"
           data-action="click->block-form#addBlock"
@@ -16,5 +17,6 @@
         <%= block_instance.display_name.presence || block_class.to_s.demodulize.titleize %>
       </a>
     <% end %>
-  </div>
+    <% end %>
+  <% end %>
 <% end %>

data/app/views/spree/admin/page_builder/_header.html.erb

@@ -1,17 +1,19 @@
 <header id="page-builder-header" class="fixed-top">
   <nav class="navbar navbar-expand-lg">
-    <%= link_to spree.admin_themes_path, class: 'btn hover-gray with-tip px-2', title: Spree.t('admin.back_to_dashboard') do %>
-      <%= icon('x', class: 'mr-0') %>
-    <% end %>
+    <div data-controller="tooltip">
+      <% back_url = @page.custom? ? spree.admin_pages_path : spree.admin_themes_path %>
+      <%= link_to back_url, class: 'btn hover-gray px-2' do %>
+        <%= icon('x', class: 'mr-0') %>
+      <% end %>
+      <%= tooltip(Spree.t('admin.back_to_dashboard')) %>
+    </div>
     <% if @page.custom? %>
       <div class="px-3">
         <span class="text-muted mr-1"><%= I18n.t('activerecord.models.spree/page.one') %>:</span>
         <strong><%= @page.display_name %></strong>
       </div>
 
-      <span data-toggle="modal" data-target="#modal">
-        <%= link_to_with_icon 'settings', Spree.t(:settings), spree.edit_admin_page_path(@page.id), class: 'btn btn-light', data: { turbo_frame: 'dialog_modal' } %>
-      </span>
+      <%= link_to_with_icon 'settings', Spree.t(:settings), spree.edit_admin_page_path(@page.id), class: 'btn btn-light', data: { turbo_frame: 'dialog', action: 'dialog#open' } %>
     <% else %>
       <div class="px-3">
         <span class="text-muted mr-1"><%= Spree.t(:theme) %>:</span>
@@ -32,10 +34,10 @@
 
       <ul class="nav nav-pills" role="tablist">
         <li class="nav-item" role="presentation">
-          <button class="nav-link active with-tip"
-                        title="Page sections"
-                        data-toggle="tab"
-                        data-target="#sections"
+          <button class="nav-link active"
+                        data-controller="tooltip"
+                        data-tabs-target="tab"
+                        data-action="click->tabs#select"
                         type="button"
                         role="tab"
                         aria-controls="sections"
@@ -43,13 +45,14 @@
                         data-trigger="hover"
                         id="sidebar-icon-page">
             <%= icon 'section', class: 'mr-0' %>
+            <%= tooltip("Page sections") %>
           </button>
         </li>
         <li class="nav-item" role="presentation">
-          <button class="nav-link with-tip"
-                  title="<%= Spree.t(:theme) %>"
-                  data-toggle="tab"
-                  data-target="#colors"
+          <button class="nav-link"
+                  data-controller="tooltip"
+                  data-tabs-target="tab"
+                  data-action="click->tabs#select"
                   type="button"
                   role="tab"
                   aria-controls="theme"
@@ -57,14 +60,15 @@
                   data-trigger="hover"
                   id="sidebar-icon-colors">
             <%= icon 'palette', class: 'mr-0' %>
+            <%= tooltip(Spree.t(:theme)) %>
           </button>
         </li>
         <li class="nav-item" role="presentation">
-          <button class="nav-link with-tip"
-                title="Fonts"
+          <button class="nav-link"
+                data-controller="tooltip"
                 type="button"
-                data-toggle="tab"
-                data-target="#fonts"
+                data-tabs-target="tab"
+                data-action="click->tabs#select"
                 type="button"
                 role="tab"
                 aria-controls="fonts"
@@ -72,6 +76,7 @@
                 data-trigger="hover"
                 id="sidebar-icon-fonts">
             <%= icon 'typography', class: 'mr-0' %>
+            <%= tooltip("Fonts") %>
           </button>
         </li>
       </ul>
@@ -79,23 +84,25 @@
 
     <ul class="nav nav-pills ml-auto" role="tablist">
       <li class="nav-item" role="presentation">
-        <button class="nav-link with-tip" type="button"
-                title="Mobile"
+        <button class="nav-link" type="button"
+                data-controller="tooltip"
                 data-trigger="hover"
                 data-action="click->page-builder#setResponsiveBreakpoint"
                 data-page-builder-target="mobileButton"
                 data-page-builder-breakpoint-param="mobile">
           <%= icon 'device-mobile', class: 'mr-0' %>
+          <%= tooltip("Mobile") %>
         </button>
       </li>
       <li class="nav-item" role="presentation">
-        <button class="nav-link active with-tip" type="button" 
-                title="Desktop"
+        <button class="nav-link active" type="button"
+                data-controller="tooltip"
                 data-action="click->page-builder#setResponsiveBreakpoint"
                 data-page-builder-breakpoint-param="desktop"
                 data-trigger="hover"
                 data-page-builder-target="desktopButton">
           <%= icon 'device-laptop', class: 'mr-0' %>
+          <%= tooltip("Desktop") %>
         </button>
       </li>
     </ul>

data/app/views/spree/admin/page_builder/_pages_dropdown.html.erb

@@ -1,17 +1,17 @@
-<div class="dropdown h-100" id="pages_dropdown">
-  <button class="btn btn-light" type="button" data-toggle="dropdown" aria-expanded="false">
+<%= dropdown id: 'pages_dropdown' do %>
+  <%= dropdown_toggle class: 'btn-light' do %>
     <span class="d-flex align-items-center pr-5">
       <%= icon @page.icon_name, class: 'mr-2' %>
       <%= @page.display_name %>
     </span>
     <%= icon 'selector', class: 'mr-0 ml-2 mb-0 text-muted' %>
-  </button>
-  <div class="dropdown-menu" style="min-width: 300px">
+  <% end %>
+  <%= dropdown_menu direction: 'left', style: 'min-width: 250px' do %>
     <% @theme.pages.standard.order(name: :asc).find_all(&:customizable?).each do |page| %>
       <%= active_link_to spree.edit_admin_theme_path(@theme, theme_preview_id: @theme_preview.id, page_id: page.id), class: 'dropdown-item', active: @page == page, data: { turbo_prefetch: false } do %>
         <%= icon page.icon_name, class: 'mr-2' %>
         <%= page.display_name %>
       <% end %>
     <% end %>
-  </div>
-</div>
+  <% end %>
+<% end %>

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

@@ -1,13 +1,13 @@
-<aside id="page-builder-sidebar">
-  <div class="tab-content mb5">
-    <div class="tab-pane fade show active" id="sections" role="tabpanel" aria-labelledby="sidebar-icon-page">
+<aside id="page-builder-sidebar" class="overflow-y-auto">
+  <div class="mb5">
+    <div data-tabs-target="panel" id="sections" role="tabpanel" aria-labelledby="sidebar-icon-page" class="animate__animated animate__fadeIn">
       <%= render 'spree/admin/page_builder/sidebar_sections' %>
       <%= render 'spree/admin/page_builder/sidebar_sections_toolbar' %>
     </div>
-    <div class="tab-pane fade" role="tabpanel" aria-labelledby="sidebar-icon-colors" id="colors">
+    <div data-tabs-target="panel" role="tabpanel" aria-labelledby="sidebar-icon-colors" id="colors" hidden class="animate__animated animate__fadeIn">
       <%= render 'spree/admin/page_builder/sidebar_colors' %>
     </div>
-    <div class="tab-pane fade" role="tabpanel" aria-labelledby="sidebar-icon-fonts" id="fonts">
+    <div data-tabs-target="panel" role="tabpanel" aria-labelledby="sidebar-icon-fonts" id="fonts" hidden class="animate__animated animate__fadeIn">
       <%= render 'spree/admin/page_builder/sidebar_fonts' %>
     </div>
   </div>

data/app/views/spree/admin/page_builder/_sidebar_colors.html.erb

@@ -4,79 +4,81 @@
   </h6>
 
   <%= form_for @theme_preview, as: :theme, url: spree.admin_theme_path(@theme_preview), method: :put, data: { 'page-builder-target': 'form' } do |f| %>
-    <ul class="nav nav-pills nav-fill m-3" id="pills-tab" role="tablist">
-      <li class="nav-item" role="presentation">
-        <button class="btn nav-link w-100 active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Color scheme</button>
-      </li>
-      <li class="nav-item" role="presentation">
-        <button class="btn nav-link w-100" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Elements</button>
-      </li>
-    </ul>
-    <div class="tab-content" id="pills-tabContent">
-      <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
-        <div class="px-3 py-2" data-controller="color-palette">
-          <% color_palettes.each do |color_palette| %>
-            <%#= render 'spree/admin/page_builder/color_palette',
-              active: color_palette_active?(color_palette),
-              primary_color: color_palette[:primary_color],
-              text_color: color_palette[:text_color],
-              border_color: color_palette[:border_color],
-              button_background_color: color_palette[:button_background_color],
-              button_text_color: color_palette[:button_text_color],
-              background_color: color_palette[:background_color]
-            %>
-          <% end %>
+    <div data-controller="tabs">
+      <ul class="nav nav-pills nav-fill m-3" id="pills-tab" role="tablist">
+        <li class="nav-item" role="presentation">
+          <button class="btn nav-link w-100 active" id="pills-home-tab" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Color scheme</button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="btn nav-link w-100" id="pills-profile-tab" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Elements</button>
+        </li>
+      </ul>
+      <div id="pills-tabContent">
+        <div data-tabs-target="panel" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" class="animate__animated animate__fadeIn">
+          <div class="px-3 py-2" data-controller="color-palette">
+            <% color_palettes.each do |color_palette| %>
+              <%#= render 'spree/admin/page_builder/color_palette',
+                active: color_palette_active?(color_palette),
+                primary_color: color_palette[:primary_color],
+                text_color: color_palette[:text_color],
+                border_color: color_palette[:border_color],
+                button_background_color: color_palette[:button_background_color],
+                button_text_color: color_palette[:button_text_color],
+                background_color: color_palette[:background_color]
+              %>
+            <% end %>
 
-          <%# <hr class="my-4 bg-light" /> %>
+            <%# <hr class="my-4 bg-light" /> %>
 
-          <%= render 'spree/admin/page_builder/color_picker', f: f,
-                        field: :preferred_primary_color, label: Spree.t("theme_settings.brand_color"),
-                        value: @theme_preview.preferred_primary_color, action: 'change->page-builder#refreshPreview' %>
-          <%= render 'spree/admin/page_builder/color_picker', f: f,
-                        field: :preferred_text_color, label: Spree.t("theme_settings.text_color"),
-                        value: @theme_preview.preferred_text_color, action: 'change->page-builder#refreshPreview' %>
-          <%= render 'spree/admin/page_builder/color_picker', f: f,
-                        field: :preferred_button_text_color, label: Spree.t("theme_settings.button_text_color"),
-                        value: @theme_preview.preferred_button_text_color, action: 'change->page-builder#refreshPreview' %>
-          <%= render 'spree/admin/page_builder/color_picker', f: f,
-                        field: :preferred_input_text_color, label: Spree.t("theme_settings.input_text_color"),
-                        value: @theme_preview.preferred_input_text_color, action: 'change->page-builder#refreshPreview' %>
-          <%= render 'spree/admin/page_builder/color_picker', f: f,
-                        field: :preferred_border_color, label: Spree.t("theme_settings.border_color"),
-                        value: @theme_preview.preferred_border_color, action: 'change->page-builder#refreshPreview' %>
-          <%= render 'spree/admin/page_builder/color_picker', f: f,
-                        field: :preferred_button_border_color, label: Spree.t("theme_settings.button_border_color"),
-                        value: @theme_preview.preferred_button_border_color, action: 'change->page-builder#refreshPreview', clear: true %>
-          <%= render 'spree/admin/page_builder/color_picker', f: f,
-                        field: :preferred_background_color, label: Spree.t("theme_settings.background_color"),
-                        value: @theme_preview.preferred_background_color, action: 'change->page-builder#refreshPreview' %>
-          <%= render 'spree/admin/page_builder/color_picker', f: f,
-                        field: :preferred_accent_color, label: Spree.t("theme_settings.accent_color"),
-                        value: @theme_preview.preferred_accent_color, action: 'change->page-builder#refreshPreview' %>
-          <%= render 'spree/admin/page_builder/color_picker', f: f,
-                        field: :preferred_danger_color, label: Spree.t("theme_settings.danger_color"),
-                        value: @theme_preview.preferred_danger_color, action: 'change->page-builder#refreshPreview' %>
-          <%= render 'spree/admin/page_builder/color_picker', f: f,
-                        field: :preferred_neutral_color, label: Spree.t("theme_settings.neutral_color"),
-                        value: @theme_preview.preferred_neutral_color, action: 'change->page-builder#refreshPreview' %>
-          <%= render 'spree/admin/page_builder/color_picker', f: f,
-                        field: :preferred_success_color, label: Spree.t("theme_settings.success_color"),
-                        value: @theme_preview.preferred_success_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_primary_color, label: Spree.t("theme_settings.brand_color"),
+                          value: @theme_preview.preferred_primary_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_text_color, label: Spree.t("theme_settings.text_color"),
+                          value: @theme_preview.preferred_text_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_button_text_color, label: Spree.t("theme_settings.button_text_color"),
+                          value: @theme_preview.preferred_button_text_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_input_text_color, label: Spree.t("theme_settings.input_text_color"),
+                          value: @theme_preview.preferred_input_text_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_border_color, label: Spree.t("theme_settings.border_color"),
+                          value: @theme_preview.preferred_border_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_button_border_color, label: Spree.t("theme_settings.button_border_color"),
+                          value: @theme_preview.preferred_button_border_color, action: 'change->page-builder#refreshPreview', clear: true %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_background_color, label: Spree.t("theme_settings.background_color"),
+                          value: @theme_preview.preferred_background_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_accent_color, label: Spree.t("theme_settings.accent_color"),
+                          value: @theme_preview.preferred_accent_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_danger_color, label: Spree.t("theme_settings.danger_color"),
+                          value: @theme_preview.preferred_danger_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_neutral_color, label: Spree.t("theme_settings.neutral_color"),
+                          value: @theme_preview.preferred_neutral_color, action: 'change->page-builder#refreshPreview' %>
+            <%= render 'spree/admin/page_builder/color_picker', f: f,
+                          field: :preferred_success_color, label: Spree.t("theme_settings.success_color"),
+                          value: @theme_preview.preferred_success_color, action: 'change->page-builder#refreshPreview' %>
+          </div>
         </div>
-      </div>
-      <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
-        <div class="px-3 py-2">
-          <%= render 'spree/admin/page_builder/range_input',
-            f: f, field: :preferred_button_border_radius, min: 0, max: 100, unit: 'px', action: 'change->page-builder#refreshPreview'
-          %>
-          <%= render 'spree/admin/page_builder/range_input',
-            f: f, field: :preferred_button_border_thickness, min: 0, max: 10, unit: 'px', action: 'change->page-builder#refreshPreview'
-          %>
-          <hr>
+        <div data-tabs-target="panel" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" hidden class="animate__animated animate__fadeIn">
+          <div class="px-3 py-2">
+            <%= render 'spree/admin/page_builder/range_input',
+              f: f, field: :preferred_button_border_radius, min: 0, max: 100, unit: 'px', action: 'change->page-builder#refreshPreview'
+            %>
+            <%= render 'spree/admin/page_builder/range_input',
+              f: f, field: :preferred_button_border_thickness, min: 0, max: 10, unit: 'px', action: 'change->page-builder#refreshPreview'
+            %>
+            <hr>
 
-          <%= render 'spree/admin/page_builder/range_input',
-            f: f, field: :preferred_input_border_radius, min: 0, max: 100, unit: 'px', action: 'change->page-builder#refreshPreview'
-          %>
+            <%= render 'spree/admin/page_builder/range_input',
+              f: f, field: :preferred_input_border_radius, min: 0, max: 100, unit: 'px', action: 'change->page-builder#refreshPreview'
+            %>
+          </div>
         </div>
       </div>
     </div>