Enhance button configuration UI: add styling for "Add Button" group and adjust layout for improved usability.

Author: MaxITService

popup-page-styles/popup-base.css

@@ -18,6 +18,7 @@ These rules set up the basic typography, spacing, and color scheme for the inter
     --bg-color: #f9f9f9; /* Very light gray for background */
     --text-color: #333; /* Dark gray for primary text */
     --separator-color: #bbb; /* Medium gray for separators */
+    --primary-color-faded: rgba(122, 92, 200, 0.05);
     --hover-bg-color: #e6e6e6; /* Light gray on hover */
     --transition-duration: 0.3s; /* Standard transition duration */
     --transition-duration-release: 0.4s; /* Slower transition duration for release */
@@ -140,3 +141,4 @@ h2:hover {
     transition: color var(--transition-duration-release) ease;
 }
 
+

popup-page-styles/popup-buttons.css

@@ -63,6 +63,25 @@ button.danger:hover {
 /* 2. Custom Buttons Section                                                 */
 /* ------------------------------------------------------------------------- */
 
+/* Group for the "Add Button" form controls */
+.add-button-group {
+    border: 1px dashed var(--primary-color);
+    padding: 12px;
+    margin-bottom: 16px;
+    border-radius: 8px;
+    background-color: var(--primary-color-faded);
+}
+
+/* Adjust margins for rows inside the group to avoid double margins */
+.add-button-group .row {
+    margin-bottom: 8px;
+}
+
+/* Remove margin from the last row inside the group */
+.add-button-group .row:last-child {
+    margin-bottom: 0;
+}
+
 /* Container for the custom button list */
 #buttonCardsList {
     border: 1px solid var(--border-color);

popup-page-styles/popup-theme.css

@@ -22,6 +22,7 @@ body.dark-theme {
     --bg-color: #222;
     --text-color: #eee;
     --separator-color: #666;
+    --primary-color-faded: rgba(154, 121, 211, 0.1);
     --hover-bg-color: #333;
     --section-header-bg: #2a2a2a;
     --manual-bg: #1e1e1e;

popup.html

@@ -120,46 +120,50 @@ <h2>Profile</h2>
       <!-- Button Configuration via button cards (buttons have their UI - each on card that is added dynamically) -->
       <section class="section">
         <h2>Button Configuration</h2>
-        <div class="row">
-          <input
-            type="text"
-            id="buttonIcon"
-            placeholder="✨"
-            class="emoji-input"
-            title="Button icon that will be clickable in the chat interface, or you may have text here or multiple emojis. (Emoji menu Win+. Or you may ask AI for them and copy)"
-            aria-label="Button icon"
-          />
+        <div class="add-button-group">
+          <div class="row">
+            <input
+              type="text"
+              id="buttonIcon"
+              placeholder="✨"
+              class="emoji-input"
+              title="Button icon that will be clickable in the chat interface, or you may have text here or multiple emojis. (Emoji menu Win+. Or you may ask AI for them and copy)"
+              aria-label="Button icon"
+            />
 
-          <textarea
-            id="buttonText"
-            placeholder="Button Template Text To be Inserted"
-            class="text-input"
-            rows="1"
-            title="This will be inserting text into the chat input when the button is clicked, into textbox after your text"
-            aria-label="Button template text"
-          ></textarea>
-          <label
-            class="checkbox-row"
-            for="buttonAutoSendToggle"
-            title="If checked, clicking the new button will automatically send the prompt. This setting can be overridden by the global auto-send toggle below."
-          >
-            <input type="checkbox" id="buttonAutoSendToggle" checked />
-            <span>Auto-send</span>
-          </label>
+            <textarea
+              id="buttonText"
+              placeholder="Button Template Text To be Inserted"
+              class="text-input"
+              rows="1"
+              title="This will be inserting text into the chat input when the button is clicked, into textbox after your text"
+              aria-label="Button template text"
+            ></textarea>
+            <label
+              class="checkbox-row"
+              for="buttonAutoSendToggle"
+              title="If checked, clicking the new button will automatically send the prompt. This setting can be overridden by the global auto-send toggle below."
+            >
+              <input type="checkbox" id="buttonAutoSendToggle" checked />
+              <span>Auto-send</span>
+            </label>
+          </div>
+          <div class="row">
+            <button
+              id="addButton"
+              title="Add a new prompt button using the icon, text, and auto-send setting from above."
+            >
+              Add Button
+            </button>
+            <button
+              id="clearText"
+              title="Clear the icon and text fields for adding a new button."
+            >
+              Clear Text
+            </button>
+          </div>
         </div>
         <div class="row">
-          <button
-            id="addButton"
-            title="Add a new prompt button using the icon, text, and auto-send setting from above."
-          >
-            Add Button
-          </button>
-          <button
-            id="clearText"
-            title="Clear the icon and text fields for adding a new button."
-          >
-            Clear Text
-          </button>
           <button
             id="addSeparator"
             title="Add a visual separator to the button list to organize your prompts."