Restyle new series page to match dashboard layout
Use dashboard/main-column/section structure with consistent
section header. Scope series-note bottom margin to panel only
so the form fields sit tighter.

Assisted-by: Claude Opus 4.6 via Claude Code
change yupqzyrxwqpwlkqsxvyuuxkuopqonkww
commit 7678f85dded0d83c86654ca774d808c66cdcc337
author Alpha Chen <alpha@kejadlen.dev>
date
parent vtwmwvyy
diff --git a/lib/ketchup/views/series/new.rb b/lib/ketchup/views/series/new.rb
index 459817f..6abc3a4 100644
--- a/lib/ketchup/views/series/new.rb
+++ b/lib/ketchup/views/series/new.rb
@@ -14,38 +14,46 @@ module Views
 
       def view_template
         render Layout.new(current_user: @current_user, title: "New Series — Ketchup", active_view: :new) do
-          div(class: "wrapper flow") do
-            h1 { "New Series" }
-
-            form(method: "post", action: "/series") do
-              input(type: "hidden", name: "_csrf", value: @csrf.call("/series"))
-              div(class: "field") do
-                label(for: "series-note-editor") { "Note" }
-                div(id: "series-note-editor", class: "series-note series-note--editable")
-              end
-
-              div(class: "field") do
-                label(for: "interval_count") { "Repeat every" }
-                div(class: "interval") do
-                  input(
-                    type: "number", id: "interval_count", name: "interval_count",
-                    min: 1, value: 1, required: true
-                  )
-                  select(id: "interval_unit", name: "interval_unit", required: true) do
-                    Views::INTERVAL_OPTIONS.each { |val, label| option(value: val) { label } }
+          div(class: "dashboard") do
+            div(class: "main-column") do
+              section(class: "section") do
+                div(class: "section-header") do
+                  h2(class: "section-title") do
+                    span(class: "section-title-text") { "New series" }
                   end
                 end
-              end
 
-              div(class: "field") do
-                label(for: "first_due_date") { "First due date" }
-                input(
-                  type: "date", id: "first_due_date", name: "first_due_date",
-                  value: Date.today.to_s, required: true
-                )
-              end
+                form(method: "post", action: "/series", class: "new-series-form") do
+                  input(type: "hidden", name: "_csrf", value: @csrf.call("/series"))
+                  div(class: "field") do
+                    label(for: "series-note-editor") { "Note" }
+                    div(id: "series-note-editor", class: "series-note series-note--editable")
+                  end
 
-              button(type: "submit", id: "create-series-btn", disabled: true) { "Create" }
+                  div(class: "field") do
+                    label(for: "interval_count") { "Repeat every" }
+                    div(class: "interval") do
+                      input(
+                        type: "number", id: "interval_count", name: "interval_count",
+                        min: 1, value: 1, required: true
+                      )
+                      select(id: "interval_unit", name: "interval_unit", required: true) do
+                        Views::INTERVAL_OPTIONS.each { |val, label| option(value: val) { label } }
+                      end
+                    end
+                  end
+
+                  div(class: "field") do
+                    label(for: "first_due_date") { "First due date" }
+                    input(
+                      type: "date", id: "first_due_date", name: "first_due_date",
+                      value: Date.today.to_s, required: true
+                    )
+                  end
+
+                  button(type: "submit", id: "create-series-btn", disabled: true) { "Create" }
+                end
+              end
             end
           end
         end
diff --git a/public/css/app.css b/public/css/app.css
index e9b3564..eb95c95 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -433,12 +433,15 @@ h2 { font-size: var(--step-0); font-weight: 600; }
 
 .series-note {
   color: #444;
-  margin-block-end: var(--space-m);
   line-height: 1.4;
   border: 1px solid transparent;
   border-radius: 4px;
 }
 
+.panel .series-note {
+  margin-block-end: var(--space-m);
+}
+
 .series-note--editable {
   border-color: #ddd;
 }