From a8b7d9f54a331f245016c9bb45196a3d3a6768ee Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Thu, 12 Feb 2026 13:50:03 +0100
Subject: [PATCH] Enhance toggle fields styling and layout

Updated the "Query Insights Source" toggle components for better UI consistency and accessibility. Added new styles for toggle switches and improved layout alignment to ensure a cohesive design throughout the page.
---
 frontend/src/pages/TargetsPage.jsx | 21 ++++++---
 frontend/src/styles.css            | 69 ++++++++++++++++++++++++++++--
 2 files changed, 80 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/TargetsPage.jsx b/frontend/src/pages/TargetsPage.jsx
index dd55c3d..66b4415 100644
--- a/frontend/src/pages/TargetsPage.jsx
+++ b/frontend/src/pages/TargetsPage.jsx
@@ -200,7 +200,7 @@ export function TargetsPage() {
                 If you see "rejected SSL upgrade", switch to <code>disable</code>.
               </small>
             </div>
-            <div className="field">
+            <div className="field field-full toggle-field">
               <label>Query Insights Source</label>
               <label className="toggle-check">
                 <input
@@ -208,11 +208,14 @@ export function TargetsPage() {
                   checked={!!form.use_pg_stat_statements}
                   onChange={(e) => setForm({ ...form, use_pg_stat_statements: e.target.checked })}
                 />
-                <span>Use pg_stat_statements for this target</span>
+                <span className="toggle-ui" aria-hidden="true" />
+                <span className="toggle-copy">
+                  <strong>Use pg_stat_statements for this target</strong>
+                  <small>Disable this if the extension is unavailable on the target.</small>
+                </span>
               </label>
-              <small>Disable this if the extension is unavailable on the target.</small>
             </div>
-            <div className="field submit-field">
+            <div className="field submit-field field-full">
               <div className="form-actions">
                 <button type="button" className="secondary-btn" onClick={testConnection} disabled={testState.loading}>
                   {testState.loading ? "Testing..." : "Test connection"}
@@ -263,7 +266,7 @@ export function TargetsPage() {
                 <option value="require">require</option>
               </select>
             </div>
-            <div className="field">
+            <div className="field field-full toggle-field">
               <label>Query Insights Source</label>
               <label className="toggle-check">
                 <input
@@ -271,10 +274,14 @@ export function TargetsPage() {
                   checked={!!editForm.use_pg_stat_statements}
                   onChange={(e) => setEditForm({ ...editForm, use_pg_stat_statements: e.target.checked })}
                 />
-                <span>Use pg_stat_statements for this target</span>
+                <span className="toggle-ui" aria-hidden="true" />
+                <span className="toggle-copy">
+                  <strong>Use pg_stat_statements for this target</strong>
+                  <small>Disable this if the extension is unavailable on the target.</small>
+                </span>
               </label>
             </div>
-            <div className="field submit-field">
+            <div className="field submit-field field-full">
               <div className="form-actions">
                 <button type="button" className="secondary-btn" onClick={cancelEdit}>Cancel</button>
                 <button className="primary-btn" disabled={saveState.loading}>{saveState.loading ? "Saving..." : "Save changes"}</button>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 4f483f5..019d212 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -250,18 +250,75 @@ button {
 }
 
 .toggle-check {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   font-size: 14px;
   color: #d7e6fb;
   cursor: pointer;
+  border: 1px solid #2e5d95;
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: linear-gradient(180deg, #102a50, #0d2344);
 }
 
 .toggle-check input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+
+.toggle-ui {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  border-radius: 999px;
+  border: 1px solid #3f6ea9;
+  background: #0c1f3f;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.toggle-ui::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
   width: 16px;
   height: 16px;
-  accent-color: #27bbf3;
+  border-radius: 999px;
+  background: #b8d2ef;
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+
+.toggle-check input[type="checkbox"]:checked + .toggle-ui {
+  background: linear-gradient(180deg, #1a67a8, #145386);
+  border-color: #53c7f4;
+}
+
+.toggle-check input[type="checkbox"]:checked + .toggle-ui::after {
+  transform: translateX(18px);
+  background: #ecf8ff;
+}
+
+.toggle-copy {
+  display: grid;
+  gap: 2px;
+}
+
+.toggle-copy strong {
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.toggle-copy small {
+  color: #93acd0;
+  font-size: 12px;
+}
+
+.toggle-field {
+  margin-top: 2px;
 }
 
 .tips p {
@@ -670,12 +727,18 @@ button {
 
 .submit-field {
   align-self: end;
+  margin-top: 2px;
 }
 
 .form-actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
+  width: 100%;
+}
+
+.field-full {
+  grid-column: 1 / -1;
 }
 
 .secondary-btn {