From d5bf9cc4b4d869e8c96ca7f818b4fc5db593f248 Mon Sep 17 00:00:00 2001
From: Nathan Schneider <n@nathanschneider.info>
Date: Tue, 13 May 2025 07:36:53 -0600
Subject: [PATCH] UI improvements: added light gray background to top three
 regions and made Templates section foldable by clicking header

---
 .../layouts/_default/builder.html             | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/themes/dispute-protocol-theme/layouts/_default/builder.html b/themes/dispute-protocol-theme/layouts/_default/builder.html
index 9040110..ff02c83 100644
--- a/themes/dispute-protocol-theme/layouts/_default/builder.html
+++ b/themes/dispute-protocol-theme/layouts/_default/builder.html
@@ -1,11 +1,20 @@
 {{ define "main" }}
+<style>
+  /* Direct inline style for gray backgrounds */
+  .protocol-metadata,
+  .protocol-template-selector,
+  .protocol-template-selector .stage-header,
+  .template-body {
+    background-color: #f5f5f5 !important;
+  }
+</style>
 <div class="builder-container">
   <h1>{{ .Title }}</h1>
   {{ .Content }}
   
   <div id="protocol-builder" class="builder">
     <div class="builder-main">
-      <div class="protocol-metadata">
+      <div class="protocol-metadata" style="background-color: #efefef !important;">
         <div class="metadata-field">
           <h2>Community Name</h2>
           <input type="text" id="community-name" name="community-name" placeholder="Enter your community name...">
@@ -17,14 +26,14 @@
         </div>
       </div>
       
-      <div class="protocol-template-selector">
-        <div class="stage-header" id="template-header">
+      <div class="protocol-template-selector" style="background-color: #efefef !important;">
+        <div class="stage-header" style="background-color: #efefef !important;">
           <div class="stage-header-content">
-            <h2>Select a Template</h2>
+            <h2>Templates</h2>
           </div>
           <button type="button" class="toggle-btn" aria-label="Toggle section" onclick="toggleTemplateSection(this)">+</button>
         </div>
-        <div class="template-body" style="display: none;">
+        <div class="template-body" style="display: none; background-color: #efefef !important;">
           <div class="template-options">
             <div class="template-option" data-template-id="">
               <button class="template-select-btn">Create Your Own Protocol</button>
@@ -174,15 +183,13 @@ function toggleTemplateSection(button) {
     body.style.display = 'block';
     button.textContent = '-';
   }
-  
-  // Prevent event from propagating
-  event.stopPropagation();
 }
 
 // Make headers also toggle sections
 document.addEventListener('DOMContentLoaded', function() {
-  const headers = document.querySelectorAll('.stage-header-content');
-  headers.forEach(header => {
+  // Add click handler to all stage headers
+  const stageHeaders = document.querySelectorAll('.stage-section .stage-header-content');
+  stageHeaders.forEach(header => {
     header.addEventListener('click', function() {
       const stageHeader = this.closest('.stage-header');
       const toggleButton = stageHeader.querySelector('.toggle-btn');
@@ -190,14 +197,16 @@ document.addEventListener('DOMContentLoaded', function() {
     });
   });
   
-  // Make template header also toggle section
-  const templateHeader = document.querySelector('#template-header .stage-header-content');
+  // Add click handler to the template header
+  const templateHeader = document.querySelector('.protocol-template-selector .stage-header-content');
   if (templateHeader) {
     templateHeader.addEventListener('click', function() {
-      const header = this.closest('#template-header');
-      const toggleButton = header.querySelector('.toggle-btn');
+      const toggleButton = document.querySelector('.protocol-template-selector .toggle-btn');
       toggleButton.click();
     });
+    
+    // Templates should be closed by default
+    // (No auto-opening code)
   }
 
   // Textarea auto-resizing is now handled by the script in head.html