From f04318f76afd8ee1df4fe47bfb2d080d2983efb0 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Mon, 6 Apr 2026 20:01:23 +0200
Subject: [PATCH] - Updated the AdminReferenceValueTypesPage to enhance text
 alignment and styling for form fields. - Refactored
 ProfileReferenceValuesPage to apply consistent styling for form elements and
 improve layout. - Adjusted button styles for better visual consistency across
 the forms.

---
 .../pages/AdminReferenceValueTypesPage.jsx    | 112 +++++++------
 .../src/pages/ProfileReferenceValuesPage.jsx  | 150 +++++++++---------
 2 files changed, 137 insertions(+), 125 deletions(-)

diff --git a/frontend/src/pages/AdminReferenceValueTypesPage.jsx b/frontend/src/pages/AdminReferenceValueTypesPage.jsx
index 725bbc2..7317762 100644
--- a/frontend/src/pages/AdminReferenceValueTypesPage.jsx
+++ b/frontend/src/pages/AdminReferenceValueTypesPage.jsx
@@ -149,7 +149,7 @@ export default function AdminReferenceValueTypesPage() {
   }
 
   return (
-    <div className="page">
+    <div className="page" style={{ textAlign: 'left' }}>
       <div className="page-header" style={{ marginBottom: 16 }}>
         <h1 style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 22, margin: 0 }}>
           <Gauge size={26} color="var(--accent)" />
@@ -199,9 +199,9 @@ export default function AdminReferenceValueTypesPage() {
               <X size={16} />
             </button>
           </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-            <div>
-              <label className="form-label" htmlFor="ref-admin-key">
+          <div>
+            <div className="settings-page__field">
+              <label className="settings-page__field-label" htmlFor="ref-admin-key">
                 Technischer Schlüssel (key)
               </label>
               <input
@@ -213,12 +213,12 @@ export default function AdminReferenceValueTypesPage() {
                 placeholder="z. B. max_heart_rate"
                 autoComplete="off"
               />
-              <p style={{ fontSize: 12, color: 'var(--text3)', margin: '6px 0 0' }}>
+              <p style={{ fontSize: 12, color: 'var(--text3)', margin: '4px 0 0', textAlign: 'left' }}>
                 Kleinbuchstaben, Ziffern, Unterstriche; nach Anlage nicht änderbar.
               </p>
             </div>
-            <div>
-              <label className="form-label" htmlFor="ref-admin-label">
+            <div className="settings-page__field">
+              <label className="settings-page__field-label" htmlFor="ref-admin-label">
                 Anzeigename
               </label>
               <input
@@ -229,8 +229,8 @@ export default function AdminReferenceValueTypesPage() {
                 placeholder="z. B. Maximale Herzfrequenz"
               />
             </div>
-            <div>
-              <label className="form-label" htmlFor="ref-admin-desc">
+            <div className="settings-page__field">
+              <label className="settings-page__field-label" htmlFor="ref-admin-desc">
                 Beschreibung
               </label>
               <textarea
@@ -242,44 +242,56 @@ export default function AdminReferenceValueTypesPage() {
                 placeholder="Kurze Erklärung für Nutzer und Admins"
               />
             </div>
-            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-              <div style={{ flex: '1 1 160px' }}>
-                <label className="form-label" htmlFor="ref-admin-unit">
-                  Standard-Einheit
-                </label>
-                <input
-                  id="ref-admin-unit"
-                  className="form-input"
-                  value={form.default_unit}
-                  onChange={(e) => setForm((f) => ({ ...f, default_unit: e.target.value }))}
-                  placeholder="bpm, Stufe, …"
-                />
-              </div>
-              <div style={{ flex: '0 0 120px' }}>
-                <label className="form-label" htmlFor="ref-admin-sort">
-                  Sortierung
-                </label>
-                <input
-                  id="ref-admin-sort"
-                  type="number"
-                  className="form-input"
-                  value={form.sort_order}
-                  onChange={(e) => setForm((f) => ({ ...f, sort_order: e.target.value }))}
-                />
-              </div>
-              <div style={{ flex: '0 0 140px', alignSelf: 'flex-end', paddingBottom: 4 }}>
-                <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 14 }}>
-                  <input
-                    type="checkbox"
-                    checked={form.active}
-                    onChange={(e) => setForm((f) => ({ ...f, active: e.target.checked }))}
-                  />
-                  Aktiv (nutzer sichtbar)
-                </label>
-              </div>
+            <div className="settings-page__field">
+              <label className="settings-page__field-label" htmlFor="ref-admin-unit">
+                Standard-Einheit
+              </label>
+              <input
+                id="ref-admin-unit"
+                className="form-input"
+                value={form.default_unit}
+                onChange={(e) => setForm((f) => ({ ...f, default_unit: e.target.value }))}
+                placeholder="bpm, Stufe, …"
+              />
             </div>
-            <div>
-              <label className="form-label" htmlFor="ref-admin-meta">
+            <div className="settings-page__field">
+              <label className="settings-page__field-label" htmlFor="ref-admin-sort">
+                Sortierung
+              </label>
+              <input
+                id="ref-admin-sort"
+                type="number"
+                className="form-input"
+                value={form.sort_order}
+                onChange={(e) => setForm((f) => ({ ...f, sort_order: e.target.value }))}
+              />
+            </div>
+            <div className="settings-page__field">
+              <span className="settings-page__field-label">Sichtbarkeit</span>
+              <label
+                htmlFor="ref-admin-active"
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 10,
+                  justifyContent: 'flex-start',
+                  cursor: 'pointer',
+                  fontSize: 14,
+                  color: 'var(--text1)',
+                  textAlign: 'left',
+                }}
+              >
+                <input
+                  id="ref-admin-active"
+                  type="checkbox"
+                  checked={form.active}
+                  onChange={(e) => setForm((f) => ({ ...f, active: e.target.checked }))}
+                />
+                Aktiv (für Nutzer sichtbar)
+              </label>
+            </div>
+            <div className="settings-page__field" style={{ borderBottom: 'none' }}>
+              <label className="settings-page__field-label" htmlFor="ref-admin-meta">
                 Metadaten (JSON-Objekt)
               </label>
               <textarea
@@ -288,16 +300,16 @@ export default function AdminReferenceValueTypesPage() {
                 rows={5}
                 value={form.metadata_json}
                 onChange={(e) => setForm((f) => ({ ...f, metadata_json: e.target.value }))}
-                placeholder='{}'
+                placeholder="{}"
                 spellCheck={false}
               />
             </div>
-            <div style={{ display: 'flex', gap: 8 }}>
-              <button type="button" className="btn btn-primary" onClick={handleSave}>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
+              <button type="button" className="btn btn-primary btn-full" onClick={handleSave}>
                 <Save size={16} style={{ marginRight: 6 }} />
                 Speichern
               </button>
-              <button type="button" className="btn btn-secondary" onClick={closeForm}>
+              <button type="button" className="btn btn-secondary btn-full" onClick={closeForm}>
                 Abbrechen
               </button>
             </div>
diff --git a/frontend/src/pages/ProfileReferenceValuesPage.jsx b/frontend/src/pages/ProfileReferenceValuesPage.jsx
index 021b8d0..fe502be 100644
--- a/frontend/src/pages/ProfileReferenceValuesPage.jsx
+++ b/frontend/src/pages/ProfileReferenceValuesPage.jsx
@@ -174,7 +174,7 @@ export default function ProfileReferenceValuesPage() {
   }
 
   return (
-    <div style={{ paddingBottom: 88 }}>
+    <div style={{ paddingBottom: 88, textAlign: 'left' }}>
       <div style={{ marginBottom: 16 }}>
         <Link
           to="/settings"
@@ -216,24 +216,26 @@ export default function ProfileReferenceValuesPage() {
         <>
           <div className="card section-gap">
             <div className="card-title">Referenztyp</div>
-            <label className="form-label" htmlFor="ref-type-select">
-              Wähle einen Kennwert
-            </label>
-            <select
-              id="ref-type-select"
-              className="form-input"
-              value={selectedKey}
-              onChange={(e) => {
-                setSelectedKey(e.target.value)
-                setEditingId(null)
-              }}
-            >
-              {types.map((t) => (
-                <option key={t.key} value={t.key}>
-                  {t.label}
-                </option>
-              ))}
-            </select>
+            <div className="settings-page__field" style={{ borderBottom: 'none', paddingTop: 0 }}>
+              <label className="settings-page__field-label" htmlFor="ref-type-select">
+                Wähle einen Kennwert
+              </label>
+              <select
+                id="ref-type-select"
+                className="form-input"
+                value={selectedKey}
+                onChange={(e) => {
+                  setSelectedKey(e.target.value)
+                  setEditingId(null)
+                }}
+              >
+                {types.map((t) => (
+                  <option key={t.key} value={t.key}>
+                    {t.label}
+                  </option>
+                ))}
+              </select>
+            </div>
             {selectedType?.description && (
               <p style={{ fontSize: 13, color: 'var(--text2)', marginTop: 10, lineHeight: 1.5 }}>
                 {selectedType.description}
@@ -247,66 +249,64 @@ export default function ProfileReferenceValuesPage() {
               {editingId ? 'Eintrag bearbeiten' : 'Neuer Eintrag'}
             </div>
             <form onSubmit={handleSubmit}>
-              <div className="form-row" style={{ flexDirection: 'column', gap: 12 }}>
-                <div>
-                  <label className="form-label" htmlFor="ref-date">
-                    Datum
-                  </label>
-                  <input
-                    id="ref-date"
-                    type="date"
-                    className="form-input"
-                    required
-                    value={form.effective_date}
-                    onChange={(e) => setForm((f) => ({ ...f, effective_date: e.target.value }))}
-                  />
-                </div>
-                <div>
-                  <label className="form-label" htmlFor="ref-value">
-                    Wert
-                  </label>
-                  <input
-                    id="ref-value"
-                    type="text"
-                    className="form-input"
-                    placeholder="Zahl oder Text (z. B. 178 oder mittel)"
-                    value={form.value}
-                    onChange={(e) => setForm((f) => ({ ...f, value: e.target.value }))}
-                  />
-                </div>
-                <div>
-                  <label className="form-label" htmlFor="ref-unit">
-                    Einheit
-                  </label>
-                  <input
-                    id="ref-unit"
-                    type="text"
-                    className="form-input"
-                    placeholder={selectedType?.default_unit || 'z. B. bpm'}
-                    value={form.unit}
-                    onChange={(e) => setForm((f) => ({ ...f, unit: e.target.value }))}
-                  />
-                </div>
-                <div>
-                  <label className="form-label" htmlFor="ref-notes">
-                    Notiz (optional)
-                  </label>
-                  <textarea
-                    id="ref-notes"
-                    className="form-input"
-                    rows={2}
-                    value={form.notes}
-                    onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
-                    placeholder="Kontext, Messmethode …"
-                  />
-                </div>
+              <div className="settings-page__field">
+                <label className="settings-page__field-label" htmlFor="ref-date">
+                  Datum
+                </label>
+                <input
+                  id="ref-date"
+                  type="date"
+                  className="form-input"
+                  required
+                  value={form.effective_date}
+                  onChange={(e) => setForm((f) => ({ ...f, effective_date: e.target.value }))}
+                />
               </div>
-              <div style={{ display: 'flex', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
-                <button type="submit" className="btn btn-primary" style={{ flex: 1, minWidth: 120 }}>
+              <div className="settings-page__field">
+                <label className="settings-page__field-label" htmlFor="ref-value">
+                  Wert
+                </label>
+                <input
+                  id="ref-value"
+                  type="text"
+                  className="form-input"
+                  placeholder="Zahl oder Text (z. B. 178 oder mittel)"
+                  value={form.value}
+                  onChange={(e) => setForm((f) => ({ ...f, value: e.target.value }))}
+                />
+              </div>
+              <div className="settings-page__field">
+                <label className="settings-page__field-label" htmlFor="ref-unit">
+                  Einheit
+                </label>
+                <input
+                  id="ref-unit"
+                  type="text"
+                  className="form-input"
+                  placeholder={selectedType?.default_unit || 'z. B. bpm'}
+                  value={form.unit}
+                  onChange={(e) => setForm((f) => ({ ...f, unit: e.target.value }))}
+                />
+              </div>
+              <div className="settings-page__field" style={{ borderBottom: 'none' }}>
+                <label className="settings-page__field-label" htmlFor="ref-notes">
+                  Notiz (optional)
+                </label>
+                <textarea
+                  id="ref-notes"
+                  className="form-input"
+                  rows={3}
+                  value={form.notes}
+                  onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
+                  placeholder="Kontext, Messmethode …"
+                />
+              </div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
+                <button type="submit" className="btn btn-primary btn-full">
                   {editingId ? 'Speichern' : 'Hinzufügen'}
                 </button>
                 {editingId && (
-                  <button type="button" className="btn btn-secondary" onClick={resetForm}>
+                  <button type="button" className="btn btn-secondary btn-full" onClick={resetForm}>
                     Abbrechen
                   </button>
                 )}