"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

@@ -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>{" "}
+                    <Link className="table-link" to={`/targets/${t.id}`}>Details</Link>{" "}
-                    {canManage && <button onClick={() => deleteTarget(t.id)}>Delete</button>}
+                    {canManage && <button className="danger-btn" onClick={() => deleteTarget(t.id)}>Delete</button>}
                   </td>
                 </tr>
               ))}

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;