Merge pull request #5594 from solidusio/elia/panel-title

[admin] Reduce the size of the panels title

admin/app/assets/stylesheets/solidus_admin/dark.css

@@ -9,4 +9,5 @@ html {
 
 main img {
   filter: invert(100%) hue-rotate(-180deg);
+  background-color: #fff;
 }

admin/app/assets/stylesheets/solidus_admin/dimmed.css

@@ -8,4 +8,5 @@ html {
 
 main img {
   filter: invert(91%) brightness(1.5) contrast(1.5) hue-rotate(-180deg);
+  background-color: #ddd;
 }

admin/app/components/solidus_admin/ui/button/component.rb

@@ -78,7 +78,7 @@ def initialize(
 
     @attributes[:class] = [
       'justify-start items-center justify-center gap-1 inline-flex rounded',
-      'focus:ring focus:ring-gray-300 focus:ring-0.5 focus:bg-white focus:ring-offset-0 [&:focus-visible]:outline-none',
+      'focus:ring focus:ring-gray-300 focus:ring-0.5 focus:ring-offset-0 [&:focus-visible]:outline-none',
       SIZES.fetch(size.to_sym),
       (TEXT_PADDINGS.fetch(size.to_sym) if @text),
       SCHEMES.fetch(scheme.to_sym),

admin/app/components/solidus_admin/ui/panel/component.html.erb

@@ -22,29 +22,18 @@
   <% end %>
 
   <% if @title %>
-    <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
+    <%= render_section do %>
       <h2>
-        <span class="font-semibold text-xl"><%= @title %></span>
+        <span class="font-semibold text-base"><%= @title %></span>
         <%= render component("ui/toggletip").new(text: @title_hint) if @title_hint %>
       </h2>
-    </section>
+    <% end %>
   <% end %>
 
   <% sections.each do |section| %>
     <%= section %>
   <% end %>
 
-  <% if content.present? %>
-    <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
-      <%= content %>
-    </section>
-  <% end %>
-
-  <% if action? %>
-    <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
-      <div class="flex justify-between items-center">
-        <%= action %>
-      </div>
-    </section>
-  <% end %>
+  <%= render_section { content } if content.present? %>
+  <%= render_section { tag.div(action, class: "flex justify-between items-center") } if action? %>
 </div>

admin/app/components/solidus_admin/ui/panel/component.rb

@@ -10,13 +10,8 @@ class SolidusAdmin::UI::Panel::Component < SolidusAdmin::BaseComponent
     )
   }
 
-  renders_many :sections, ->(wide: false, high: false, **args, &block) do
-    tag.section(**args, class: "
-      border-gray-100 border-t w-full first-of-type:border-t-0
-      #{'px-6' unless wide}
-      #{'py-6' unless high}
-      #{args[:class]}
-    ", &block)
+  renders_many :sections, ->(**args, &block) do
+    render_section(**args, &block)
   end
 
   renders_many :menus, ->(name, url, **args) do
@@ -33,4 +28,13 @@ def initialize(title: nil, title_hint: nil)
     @title = title
     @title_hint = title_hint
   end
+
+  def render_section(wide: false, high: false, **args, &block)
+    tag.section(**args, class: "
+      border-gray-100 border-t w-full first-of-type:border-t-0
+      #{'px-6' unless wide}
+      #{'py-4' unless high}
+      #{args[:class]}
+    ", &block)
+  end
 end