Make it prettier

src/global.css

@@ -117,33 +117,50 @@ textarea {
 }
 
 /* --- Copy-button style adjustments --- */
-.copy-button {
+.copy-button, .copy-firefox, .copy-chrome {
-  padding: 8px;
+  padding: 6px;
   color: var(--accent-color);                   /* Changed: Accent color instead of gray */
-  border-radius: 4px;
   transition: all 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.copy-button:hover {
+.copy-button:hover, .copy-firefox:hover, .copy-chrome:hover {
   background: var(--hover-bg-color);            /* Changed: Hover bg darker */
+  border-radius: 8px;
 }
-.copy-button:active {
+.copy-button:active, .copy-firefox:active, .copy-chrome:active {
   background: var(--active-bg-color);           /* Changed: Active state even darker */
 }
-.copy-button img {
+.copy-button img, .copy-firefox img, .copy-chrome img {
   width: 20px;
   height: 20px;
 }
 /* Copy feedback unchanged (Green stands out in dark mode as well) */
-.copy-button.copied {
+.copy-button.copied, .copy-firefox.copied, .copy-chrome.copied {
   background: var(--success-color);
   color: white;                                 /* Ensures contrast */
 }
+
+.copy-textbox, .firefox-textbox, .chrome-textbox {
+  padding: 6px 10px;
+  border: 1px solid var(--input-border-color);
+  border-radius: 4px;
+  background: var(--input-bg-color);
+  color: var(--text-color);
+  font-size: 14px;
+  width: 220px;
+  cursor: pointer;
+}
+
+.copy-textbox:focus, .firefox-textbox:focus, .chrome-textbox:focus {
+  outline: none;
+  border-color: var(--accent-color);
+}
+
 .settings-title {
   margin-top: 36px;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
   font-size: 20px;
 }
 .settings-links-container {
@@ -153,3 +170,41 @@ textarea {
   align-items: center;
   gap: 32px;
 }
+@media (max-width: 500px) {
+  .settings-links-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 32px;
+  }
+}
+
+.browser-link-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.browser-instruction {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: normal;
+}
+
+
+.form-table {
+  font-size: 14px;
+  margin: 16px auto;
+  text-align: left;
+}
+.form-table td {
+  padding: 8px 6px;
+  border: 1px solid var(--input-border-color);
+}
+.form-table td:first-child {
+  background-color: var(--input-bg-color);
+  width: 100px;
+}

src/main.ts

@@ -25,26 +25,54 @@ function noSearchDefaultPageRender() {
             <img src="/clipboard.svg" alt="Copy" />
           </button>
         </div>
-        <h3 class="settings-title">Search Settings Links</h3>
+        <h3 class="settings-title">How to add Bang! Search Engine</h3>
+        <p style="margin-bottom: 8px; font-size: 14px;">
+          Below are links to the search engine settings in your browser.
+            <br />
+          Copy the URL for the browser engine you are using & paste it into a new tab.
+            <br />
+          From there you should see an option to add a search engine. Copy the link above
+          & fill out the form as follows.
+        </p>
+        <table class="form-table">
+          <tr>
+            <td><b>Name:</b></td>
+            <td>Bang!</td>
+          </tr>
+          <tr>
+            <td><b>Engine URL:</b></td>
+            <td>https://bang.gbrown.org?q=%s</td>
+          </tr>
+          <tr>
+            <td><b>Alias:</b></td>
+            <td>@bang</td>
+          </tr>
+        </table>
         <div class="settings-links-container">
-          <h3>
+          <div class="browser-link-container">
-            <a href="about:preferences#search" target="_blank">
+            <img src="/firefox.svg" alt="Firefox" width="24" />
-              <img
+            <input
-                src="/firefox.svg"
+              type="text"
-                alt="Firefox"
+              readonly value="about:preferences#search" 
-                width="30"
+              class="firefox-textbox" 
-              />
+              title="Click to copy Firefox settings URL"
-            </a>
+            />
-          </h3>
+            <button class="copy-firefox">
-          <h3>
+              <img src="/clipboard.svg" alt="Copy" />
-            <a href="chrome://settings/searchEngines" target="_blank">
+            </button>
-              <img
+          </div>
-                src="/chrome.svg"
+          <div class="browser-link-container">
-                alt="Chrome"
+            <img src="/chrome.svg" alt="Chrome" width="24" />
-                width="30"
+            <input
-              />
+              type="text"
-            </a>
+              readonly value="chrome://settings/searchEngines" 
-          </h3>
+              class="chrome-textbox"
+              title="Click to copy Chrome settings URL"
+            />
+            <button class="copy-chrome">
+              <img src="/clipboard.svg" alt="Copy" />
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -53,15 +81,36 @@ function noSearchDefaultPageRender() {
   const copyButton = app.querySelector<HTMLButtonElement>(".copy-button")!;
   const copyIcon = copyButton.querySelector("img")!;
   const urlInput = app.querySelector<HTMLInputElement>(".url-input")!;
+  const copyFirefox = app.querySelector<HTMLInputElement>(".copy-firefox")!;
+  const copyFirefoxIcon = copyFirefox.querySelector("img")!;
+  const firefoxInput =  app.querySelector<HTMLInputElement>(".firefox-textbox")!;
+  const copyChrome = app.querySelector<HTMLInputElement>(".copy-chrome")!;
+  const copyChromeIcon = copyChrome.querySelector("img")!;
+  const chromeInput =  app.querySelector<HTMLInputElement>(".chrome-textbox")!;
 
   copyButton.addEventListener("click", async () => {
     await navigator.clipboard.writeText(urlInput.value);
     copyIcon.src = "/clipboard-check.svg";
-
     setTimeout(() => {
       copyIcon.src = "/clipboard.svg";
     }, 2000);
   });
+
+  copyFirefox.addEventListener("click", async () => {
+    await navigator.clipboard.writeText(firefoxInput.value);
+    copyFirefoxIcon.src = "/clipboard-check.svg";
+    setTimeout(() => {
+      copyFirefoxIcon.src = "/clipboard.svg";
+    }, 2000);
+  });
+
+  copyChrome.addEventListener("click", async () => {
+    await navigator.clipboard.writeText(chromeInput.value);
+    copyChromeIcon.src = "/clipboard-check.svg";
+    setTimeout(() => {
+      copyChromeIcon.src = "/clipboard.svg";
+    }, 2000);
+  });
 }
 
 const LS_DEFAULT_BANG = localStorage.getItem("default-bang") ?? "sg";