From 834c5b42b02f7ecce0f75b1e91df69c6130d5d25 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Thu, 12 Feb 2026 11:14:38 +0100
Subject: [PATCH] "Enhance TargetsPage styling and form structure"

Improved the layout and styling of the TargetsPage by adding structured HTML elements and new CSS classes. Key changes include adding headers to the target creation form, styling buttons with primary and danger classes, and improving the table hover effects. These updates enhance readability, usability, and visual consistency.
---
 frontend/src/pages/TargetsPage.jsx | 16 +++++---
 frontend/src/styles.css            | 66 ++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/TargetsPage.jsx b/frontend/src/pages/TargetsPage.jsx
index 345e668..9bbcc31 100644
--- a/frontend/src/pages/TargetsPage.jsx
+++ b/frontend/src/pages/TargetsPage.jsx
@@ -61,11 +61,15 @@ export function TargetsPage() {
   };
 
   return (
-    <div>
+    <div className="targets-page">
       <h2>Targets Management</h2>
       {error && <div className="card error">{error}</div>}
       {canManage && (
-        <form className="card grid two" onSubmit={createTarget}>
+        <form className="card target-form grid two" onSubmit={createTarget}>
+          <div className="target-form-header">
+            <h3>Neues Target</h3>
+            <p>Verbindungsdaten fuer eine PostgreSQL-Instanz.</p>
+          </div>
           <div className="field">
             <label>Name</label>
             <input placeholder="z.B. Prod-DB" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
@@ -109,7 +113,7 @@ export function TargetsPage() {
           </div>
           <div className="field">
             <label>&nbsp;</label>
-            <button>Target anlegen</button>
+            <button className="primary-btn">Target anlegen</button>
           </div>
         </form>
       )}
@@ -127,7 +131,7 @@ export function TargetsPage() {
           </p>
         </div>
       )}
-      <div className="card">
+      <div className="card targets-table">
         {loading ? (
           <p>Lade Targets...</p>
         ) : (
@@ -147,8 +151,8 @@ export function TargetsPage() {
                   <td>{t.host}:{t.port}</td>
                   <td>{t.dbname}</td>
                   <td>
-                    <Link to={`/targets/${t.id}`}>Details</Link>{" "}
-                    {canManage && <button onClick={() => deleteTarget(t.id)}>Delete</button>}
+                    <Link className="table-link" to={`/targets/${t.id}`}>Details</Link>{" "}
+                    {canManage && <button className="danger-btn" onClick={() => deleteTarget(t.id)}>Delete</button>}
                   </td>
                 </tr>
               ))}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 5a5210d..23753c4 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -189,6 +189,62 @@ button {
   color: #bfd0ea;
 }
 
+.targets-page h2 {
+  margin-top: 4px;
+  margin-bottom: 16px;
+}
+
+.target-form {
+  position: relative;
+  padding-top: 56px;
+}
+
+.target-form-header {
+  position: absolute;
+  top: 14px;
+  left: 16px;
+}
+
+.target-form-header h3 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.target-form-header p {
+  margin: 2px 0 0 0;
+  color: #92a7cc;
+  font-size: 12px;
+}
+
+.primary-btn {
+  font-weight: 700;
+  border-color: #3e73d4;
+  background: linear-gradient(90deg, #2e7cd4, #265fb4);
+}
+
+.primary-btn:hover {
+  border-color: #6aa8ff;
+  filter: brightness(1.05);
+}
+
+.targets-table table tbody tr:hover {
+  background: #13234880;
+}
+
+.table-link {
+  font-weight: 600;
+}
+
+.danger-btn {
+  margin-left: 8px;
+  border-color: #7a2e43;
+  background: linear-gradient(180deg, #3a1724, #2b1019);
+}
+
+.danger-btn:hover {
+  border-color: #be3f63;
+}
+
 button {
   cursor: pointer;
 }
@@ -317,6 +373,16 @@ td {
   transition: background-color 9999s ease-out 0s;
 }
 
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+  -webkit-text-fill-color: #e5edf7;
+  -webkit-box-shadow: 0 0 0px 1000px #0f1933 inset;
+  transition: background-color 9999s ease-out 0s;
+}
+
 @keyframes loginEnter {
   from {
     opacity: 0;