Improve defaults and style for stages

1 files changed, 88 insertions, 77 deletions

diff --git a/Map/Presentation/Preferences/TemplatesPreferencesView.swift b/Map/Presentation/Preferences/TemplatesPreferencesView.swift
index 806c22b..42db1a3 100644
--- a/Map/Presentation/Preferences/TemplatesPreferencesView.swift
+++ b/Map/Presentation/Preferences/TemplatesPreferencesView.swift
@@ -86,95 +86,106 @@ struct TemplatesPreferencesView: View {
   @State private var newTemplateName = ""
 
   var body: some View {
-    HStack(spacing: 0) {
-      VStack(alignment: .leading, spacing: 8) {
-        HStack {
-          Text("Templates")
-            .font(.headline)
-
-          Spacer()
-
-          Button(action: { showingAddSheet = true }) {
-            Image(systemName: "plus")
-          }
-          .buttonStyle(.borderless)
-
-          Button(action: removeTemplate) {
-            Image(systemName: "minus")
-          }
-          .buttonStyle(.borderless)
-          .disabled(selectedTemplate == nil)
-        }
-
-        List(templates, selection: $selectedTemplate) { template in
-          Text(template.name)
-            .tag(template)
-        }
-        .listStyle(.sidebar)
-      }
-      .frame(width: 200)
-
-      Divider()
-
-      VStack(alignment: .leading, spacing: 8) {
-        if let selected = selectedTemplate {
+    VStack(alignment: .leading, spacing: Dimensions.Spacing.regular) {
+      Text("preferences.templates.title")
+        .font(.Theme.Title.emphasized)
+        .lineSpacing(Dimensions.LineHeight.title - Dimensions.FontSize.title)
+      Text("preferences.templates.explanation")
+        .font(.Theme.Body.regular)
+        .kerning(Dimensions.Kerning.body)
+        .lineSpacing(Dimensions.LineHeight.body - Dimensions.FontSize.body)
+        .padding(.top, Dimensions.Spacing.loose)
+        .padding(.bottom, Dimensions.Spacing.regular)
+      HStack(spacing: 0) {
+        VStack(alignment: .leading, spacing: 8) {
           HStack {
-            Text("Template: \(selected.name)")
+            Text("Templates")
               .font(.headline)
+            
             Spacer()
+            
+            Button(action: { showingAddSheet = true }) {
+              Image(systemName: "plus")
+            }
+            .buttonStyle(.borderless)
+            
+            Button(action: removeTemplate) {
+              Image(systemName: "minus")
+            }
+            .buttonStyle(.borderless)
+            .disabled(selectedTemplate == nil)
           }
-
-          SimpleTextEditor(text: $templateText)
-            .onChange(of: templateText) { _, newValue in
-              updateSelectedTemplate(newValue)
+          
+          List(templates, selection: $selectedTemplate) { template in
+            Text(template.name)
+              .tag(template)
+          }
+          .listStyle(.sidebar)
+        }
+        .frame(width: 200)
+        
+        Divider()
+        
+        VStack(alignment: .leading, spacing: 8) {
+          if let selected = selectedTemplate {
+            HStack {
+              Text("Template: \(selected.name)")
+                .font(.headline)
+              Spacer()
             }
-        } else {
-          VStack {
-            Spacer()
-            Text("Select a template to edit")
-              .foregroundColor(.secondary)
-            Spacer()
+            
+            SimpleTextEditor(text: $templateText)
+              .onChange(of: templateText) { _, newValue in
+                updateSelectedTemplate(newValue)
+              }
+          } else {
+            VStack {
+              Spacer()
+              Text("Select a template to edit")
+                .foregroundColor(.secondary)
+              Spacer()
+            }
+            .frame(maxWidth: .infinity, maxHeight: .infinity)
           }
-          .frame(maxWidth: .infinity, maxHeight: .infinity)
         }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .padding(.leading)
       }
-      .frame(maxWidth: .infinity, maxHeight: .infinity)
-      .padding(.leading)
-    }
-    .padding()
-    .onAppear {
-      loadTemplates()
-    }
-    .onChange(of: selectedTemplate) { _, newSelection in
-      if let template = newSelection {
-        templateText = template.content
+      .padding()
+      .onAppear {
+        loadTemplates()
       }
-    }
-    .sheet(isPresented: $showingAddSheet) {
-      VStack(spacing: 16) {
-        Text("Add New Template")
-          .font(.headline)
-
-        TextField("Template Name", text: $newTemplateName)
-          .textFieldStyle(.roundedBorder)
-
-        HStack {
-          Button("Cancel") {
-            showingAddSheet = false
-            newTemplateName = ""
-          }
-
-          Spacer()
-
-          Button("Add") {
-            addTemplate()
+      .onChange(of: selectedTemplate) { _, newSelection in
+        if let template = newSelection {
+          templateText = template.content
+        }
+      }
+      .sheet(isPresented: $showingAddSheet) {
+        VStack(spacing: 16) {
+          Text("Add New Template")
+            .font(.headline)
+          
+          TextField("Template Name", text: $newTemplateName)
+            .textFieldStyle(.roundedBorder)
+          
+          HStack {
+            Button("Cancel") {
+              showingAddSheet = false
+              newTemplateName = ""
+            }
+            
+            Spacer()
+            
+            Button("Add") {
+              addTemplate()
+            }
+            .disabled(newTemplateName.isEmpty)
           }
-          .disabled(newTemplateName.isEmpty)
         }
+        .frame(width: 300, height: 120)
       }
-      .padding()
-      .frame(width: 300, height: 120)
-    }
+    }.padding(.vertical, Dimensions.Spacing.loose)
+      .padding(.horizontal, Dimensions.Spacing.indulgent)
   }
 
   private func loadTemplates() {