format refactored admin templates

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lib/berrypod_web/live/admin/newsletter.ex

@@ -205,7 +205,10 @@ defmodule BerrypodWeb.Admin.Newsletter do
           </div>
           <button
             phx-click="toggle_enabled"
-            class={["admin-switch", if(@newsletter_enabled, do: "admin-switch-on", else: "admin-switch-off")]}
+            class={[
+              "admin-switch",
+              if(@newsletter_enabled, do: "admin-switch-on", else: "admin-switch-off")
+            ]}
             role="switch"
             aria-checked={to_string(@newsletter_enabled)}
             aria-label="Toggle newsletter signups"
@@ -231,10 +234,18 @@ defmodule BerrypodWeb.Admin.Newsletter do
       </div>
 
       <div class="admin-row" style="--admin-row-gap: 0.75rem;">
-        <.link navigate={~p"/admin/newsletter?tab=subscribers"} class="admin-link" style="font-weight: 500;">
+        <.link
+          navigate={~p"/admin/newsletter?tab=subscribers"}
+          class="admin-link"
+          style="font-weight: 500;"
+        >
           View subscribers
         </.link>
-        <.link navigate={~p"/admin/newsletter?tab=campaigns"} class="admin-link" style="font-weight: 500;">
+        <.link
+          navigate={~p"/admin/newsletter?tab=campaigns"}
+          class="admin-link"
+          style="font-weight: 500;"
+        >
           View campaigns
         </.link>
       </div>
@@ -328,7 +339,9 @@ defmodule BerrypodWeb.Admin.Newsletter do
       <div :if={@subscriber_count == 0} class="admin-empty-state">
         <.icon name="hero-envelope" class="admin-empty-state-icon" />
         <p class="admin-empty-state-title">No subscribers yet</p>
-        <p class="admin-empty-state-text">Subscribers will appear here when people sign up via your shop.</p>
+        <p class="admin-empty-state-text">
+          Subscribers will appear here when people sign up via your shop.
+        </p>
       </div>
     </div>
     """

lib/berrypod_web/live/admin/order_show.ex

@@ -48,7 +48,10 @@ defmodule BerrypodWeb.Admin.OrderShow do
       </div>
     </.header>
 
-    <div class="admin-grid" style="--admin-grid-min: 20rem; --admin-grid-gap: 1.5rem; margin-top: 1.5rem;">
+    <div
+      class="admin-grid"
+      style="--admin-grid-min: 20rem; --admin-grid-gap: 1.5rem; margin-top: 1.5rem;"
+    >
       <%!-- order info --%>
       <div class="admin-card">
         <div class="admin-card-body">

lib/berrypod_web/live/admin/settings.ex

@@ -593,7 +593,12 @@ defmodule BerrypodWeb.Admin.Settings do
       <p class="admin-section-desc" style="margin-top: 0;">
         To accept payments, connect your Stripe account by entering your secret key.
         You can find it in your
-        <a href="https://dashboard.stripe.com/apikeys" target="_blank" rel="noopener" class="admin-link">
+        <a
+          href="https://dashboard.stripe.com/apikeys"
+          target="_blank"
+          rel="noopener"
+          class="admin-link"
+        >
           Stripe dashboard
         </a>
         under Developers &rarr; API keys.
@@ -631,7 +636,9 @@ defmodule BerrypodWeb.Admin.Settings do
         </div>
         <div class="admin-dl-row">
           <dt class="admin-dl-term">Webhook URL</dt>
-          <dd class="admin-dl-value"><code style="font-size: 0.75rem; word-break: break-all;">{@stripe_webhook_url}</code></dd>
+          <dd class="admin-dl-value">
+            <code style="font-size: 0.75rem; word-break: break-all;">{@stripe_webhook_url}</code>
+          </dd>
         </div>
         <div class="admin-dl-row">
           <dt class="admin-dl-term">Webhook secret</dt>
@@ -670,7 +677,11 @@ defmodule BerrypodWeb.Admin.Settings do
         </.form>
       <% else %>
         <div style="border-top: 1px solid var(--t-surface-sunken); padding-top: 0.75rem;">
-          <button phx-click="toggle_stripe_advanced" class="admin-link-subtle admin-row" style="--admin-row-gap: 0.25rem;">
+          <button
+            phx-click="toggle_stripe_advanced"
+            class="admin-link-subtle admin-row"
+            style="--admin-row-gap: 0.25rem;"
+          >
             <.icon
               name={if @advanced_open, do: "hero-chevron-down-mini", else: "hero-chevron-right-mini"}
               class="size-4"

lib/berrypod_web/live/admin/theme/index.html.heex

@@ -218,7 +218,11 @@
             
 <!-- Logo Size Slider -->
             <%= if @logo_image do %>
-              <form phx-change="update_setting" phx-value-field="logo_size" style="margin-top: 0.75rem;">
+              <form
+                phx-change="update_setting"
+                phx-value-field="logo_size"
+                style="margin-top: 0.75rem;"
+              >
                 <div class="theme-slider-header">
                   <span class="theme-slider-label">Logo size</span>
                   <span class="theme-slider-value">{@theme_settings.logo_size}px</span>
@@ -668,7 +672,13 @@
           <!-- Typography Group -->
           <div class="theme-group">
             <div class="theme-group-header">
-              <svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <svg
+                class="theme-group-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
                 <polyline points="4 7 4 4 20 4 20 7"></polyline>
                 <line x1="9" y1="20" x2="15" y2="20"></line>
                 <line x1="12" y1="4" x2="12" y2="20"></line>
@@ -685,7 +695,10 @@
                     phx-click="update_setting"
                     phx-value-field="typography"
                     phx-value-setting_value={typo}
-                    class={["theme-chip", @theme_settings.typography == typo && "theme-chip-active"]}
+                    class={[
+                      "theme-chip",
+                      @theme_settings.typography == typo && "theme-chip-active"
+                    ]}
                   >
                     {typo}
                   </button>
@@ -702,7 +715,10 @@
                     phx-click="update_setting"
                     phx-value-field="font_size"
                     phx-value-setting_value={value}
-                    class={["theme-chip", @theme_settings.font_size == value && "theme-chip-active"]}
+                    class={[
+                      "theme-chip",
+                      @theme_settings.font_size == value && "theme-chip-active"
+                    ]}
                   >
                     {label}
                   </button>
@@ -719,7 +735,10 @@
                     phx-click="update_setting"
                     phx-value-field="heading_weight"
                     phx-value-setting_value={value}
-                    class={["theme-chip", @theme_settings.heading_weight == value && "theme-chip-active"]}
+                    class={[
+                      "theme-chip",
+                      @theme_settings.heading_weight == value && "theme-chip-active"
+                    ]}
                   >
                     {label}
                   </button>
@@ -731,7 +750,13 @@
 <!-- Colours Group -->
           <div class="theme-group">
             <div class="theme-group-header">
-              <svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <svg
+                class="theme-group-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
                 <circle cx="12" cy="12" r="10"></circle>
                 <circle cx="12" cy="12" r="3"></circle>
               </svg>
@@ -759,7 +784,13 @@
 <!-- Layout Group -->
           <div class="theme-group">
             <div class="theme-group-header">
-              <svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <svg
+                class="theme-group-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
                 <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                 <line x1="3" y1="9" x2="21" y2="9"></line>
                 <line x1="9" y1="21" x2="9" y2="9"></line>
@@ -776,7 +807,10 @@
                     phx-click="update_setting"
                     phx-value-field="grid_columns"
                     phx-value-setting_value={cols}
-                    class={["theme-chip", @theme_settings.grid_columns == cols && "theme-chip-active"]}
+                    class={[
+                      "theme-chip",
+                      @theme_settings.grid_columns == cols && "theme-chip-active"
+                    ]}
                   >
                     {cols} columns
                   </button>
@@ -793,7 +827,10 @@
                     phx-click="update_setting"
                     phx-value-field="density"
                     phx-value-setting_value={density}
-                    class={["theme-chip", @theme_settings.density == density && "theme-chip-active"]}
+                    class={[
+                      "theme-chip",
+                      @theme_settings.density == density && "theme-chip-active"
+                    ]}
                   >
                     {density}
                   </button>
@@ -810,7 +847,10 @@
                     phx-click="update_setting"
                     phx-value-field="header_layout"
                     phx-value-setting_value={layout}
-                    class={["theme-chip", @theme_settings.header_layout == layout && "theme-chip-active"]}
+                    class={[
+                      "theme-chip",
+                      @theme_settings.header_layout == layout && "theme-chip-active"
+                    ]}
                   >
                     {layout}
                   </button>
@@ -848,7 +888,13 @@
 <!-- Shape Group -->
           <div style="margin-bottom: 1rem;">
             <div class="theme-group-header">
-              <svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <svg
+                class="theme-group-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
                 <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
               </svg>
               <span class="theme-group-title">Shape</span>
@@ -880,7 +926,10 @@
                     phx-click="update_setting"
                     phx-value-field="card_shadow"
                     phx-value-setting_value={value}
-                    class={["theme-chip", @theme_settings.card_shadow == value && "theme-chip-active"]}
+                    class={[
+                      "theme-chip",
+                      @theme_settings.card_shadow == value && "theme-chip-active"
+                    ]}
                   >
                     {label}
                   </button>
@@ -897,7 +946,10 @@
                     phx-click="update_setting"
                     phx-value-field="button_style"
                     phx-value-setting_value={value}
-                    class={["theme-chip", @theme_settings.button_style == value && "theme-chip-active"]}
+                    class={[
+                      "theme-chip",
+                      @theme_settings.button_style == value && "theme-chip-active"
+                    ]}
                   >
                     {label}
                   </button>
@@ -909,7 +961,13 @@
 <!-- Products Group -->
           <div class="theme-group">
             <div class="theme-group-header">
-              <svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <svg
+                class="theme-group-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
                 <rect x="3" y="3" width="7" height="7"></rect>
                 <rect x="14" y="3" width="7" height="7"></rect>
                 <rect x="14" y="14" width="7" height="7"></rect>
@@ -927,7 +985,10 @@
                     phx-click="update_setting"
                     phx-value-field="layout_width"
                     phx-value-setting_value={width}
-                    class={["theme-chip", @theme_settings.layout_width == width && "theme-chip-active"]}
+                    class={[
+                      "theme-chip",
+                      @theme_settings.layout_width == width && "theme-chip-active"
+                    ]}
                   >
                     {width}
                   </button>
@@ -944,7 +1005,10 @@
                     phx-click="update_setting"
                     phx-value-field="image_aspect_ratio"
                     phx-value-setting_value={value}
-                    class={["theme-chip", @theme_settings.image_aspect_ratio == value && "theme-chip-active"]}
+                    class={[
+                      "theme-chip",
+                      @theme_settings.image_aspect_ratio == value && "theme-chip-active"
+                    ]}
                   >
                     {label}
                   </button>
@@ -961,7 +1025,10 @@
                     phx-click="update_setting"
                     phx-value-field="product_text_align"
                     phx-value-setting_value={value}
-                    class={["theme-chip", @theme_settings.product_text_align == value && "theme-chip-active"]}
+                    class={[
+                      "theme-chip",
+                      @theme_settings.product_text_align == value && "theme-chip-active"
+                    ]}
                   >
                     {label}
                   </button>
@@ -999,7 +1066,13 @@
 <!-- Product Page Group -->
           <div style="margin-bottom: 1rem;">
             <div class="theme-group-header">
-              <svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <svg
+                class="theme-group-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
                 <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                 <line x1="3" y1="9" x2="21" y2="9"></line>
               </svg>
@@ -1106,7 +1179,13 @@
           <div class="theme-browser-dot theme-browser-dot-max"></div>
         </div>
         <div class="theme-browser-url">
-          <svg class="theme-browser-url-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <svg
+            class="theme-browser-url-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
             <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
             <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
           </svg>