From c1c40361a7602fda57938e80505852971c77cbd6 Mon Sep 17 00:00:00 2001
From: Bobban Rydh <bobban@tooweb.se>
Date: Tue, 14 Jul 2026 00:57:36 +0200
Subject: [PATCH] Changed save settings button

---
 frontend/src/components/SettingsPage.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/SettingsPage.js b/frontend/src/components/SettingsPage.js
index 66ae8ab..577a505 100644
--- a/frontend/src/components/SettingsPage.js
+++ b/frontend/src/components/SettingsPage.js
@@ -60,7 +60,7 @@ function NotificationsTab() {
   }
 
   async function handleSave(e) {
-    e.preventDefault();
+    if (e) e.preventDefault();
     setSaving(true); setError(''); setSaved(false);
     try {
       await saveSettings({ gotify: { ...form, priority: Number(form.priority) }, ntfy: { ...ntfy, priority: Number(ntfy.priority) }, smtp: { ...smtp, port: Number(smtp.port) }, webhook, notifications: events });
@@ -113,13 +113,23 @@ function NotificationsTab() {
   if (loading) return <p className="hint">Loading…</p>;
 
   return (
+    <>
+    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, flexWrap: 'wrap', gap: 10 }}>
+      <p className="settings-desc" style={{ margin: 0 }}>Configure notification channels. All enabled channels receive the same events.</p>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+        {error && <span className="error" style={{ fontSize: 13 }}>{error}</span>}
+        {saved  && <span className="test-ok"  style={{ fontSize: 13 }}>✓ Settings saved</span>}
+        <button className="btn-primary" onClick={handleSave} disabled={saving}>
+          {saving ? 'Saving…' : 'Save Settings'}
+        </button>
+      </div>
+    </div>
     <div className="settings-grid">
     <section className="settings-section">
       <h3>Gotify Notifications</h3>
       <p className="settings-desc">
         Send a notification to a Gotify instance whenever a DNS record is added, updated, or deleted.
       </p>
-      {error && <p className="error" style={{ marginBottom: 12 }}>{error}</p>}
       <form onSubmit={handleSave} className="settings-form">
         <label className="toggle-row">
           <span>Enable notifications</span>
@@ -201,9 +211,6 @@ function NotificationsTab() {
           <button type="button" className="btn-secondary" onClick={handleTest} disabled={testing || !form.url || !form.token}>
             {testing ? 'Sending…' : 'Send Test'}
           </button>
-          <button type="submit" className="btn-primary" disabled={saving}>
-            {saving ? 'Saving…' : saved ? '✓ Saved' : 'Save Settings'}
-          </button>
         </div>
       </form>
     </section>
@@ -304,6 +311,7 @@ function NotificationsTab() {
       </p>
     </section>
     </div>
+    </>
   );
 }