From 30df150b6f8042070d938ce937c71372745cb8db Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Sat, 21 Mar 2026 06:50:12 +0100
Subject: [PATCH] refactor: make UsageBadge more subtle and better positioned

- Smaller font (0.65rem), more spacing (10px margin)
- Reduced opacity (0.6), hover effect (0.9)
- OK status now gray instead of green (less prominent)
- Position: right-aligned in headings (flex space-between)
- Buttons: badge on right side of main text, description below
- Much more discreet overall appearance

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/UsageBadge.css | 34 +++++++++++++++++---------
 frontend/src/pages/Analysis.jsx        |  8 +++---
 frontend/src/pages/SettingsPage.jsx    | 20 +++++++++------
 frontend/src/pages/WeightScreen.jsx    |  4 +--
 4 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/UsageBadge.css b/frontend/src/components/UsageBadge.css
index 8675461..0ee296d 100644
--- a/frontend/src/components/UsageBadge.css
+++ b/frontend/src/components/UsageBadge.css
@@ -1,43 +1,53 @@
 /**
- * UsageBadge Styles
+ * UsageBadge Styles - Dezente Version
  *
- * Small, visually distinct inline badge for usage indicators
+ * Sehr kleine, subtile Badge für Usage-Anzeige
  * Phase 3: Frontend Display
  */
 
 .usage-badge {
   display: inline-block;
-  font-size: 0.75rem;
+  font-size: 0.65rem;
   font-weight: 500;
-  padding: 2px 6px;
-  border-radius: 4px;
-  margin-left: 6px;
-  opacity: 0.8;
+  padding: 2px 5px;
+  border-radius: 3px;
+  margin-left: 10px;
+  opacity: 0.6;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
+  transition: opacity 0.2s;
+}
+
+.usage-badge:hover {
+  opacity: 0.9;
 }
 
 .usage-badge--ok {
-  color: var(--accent, #1D9E75);
-  background: rgba(29, 158, 117, 0.1);
+  color: var(--text3, #888);
+  background: rgba(136, 135, 128, 0.08);
 }
 
 .usage-badge--warning {
   color: #d97706;
-  background: rgba(217, 119, 6, 0.1);
+  background: rgba(217, 119, 6, 0.08);
 }
 
 .usage-badge--exceeded {
   color: var(--danger, #D85A30);
   background: rgba(216, 90, 48, 0.1);
   font-weight: 600;
+  opacity: 0.75;
+}
+
+.usage-badge--exceeded:hover {
+  opacity: 1;
 }
 
 /* Responsive: Even smaller on mobile */
 @media (max-width: 640px) {
   .usage-badge {
-    font-size: 0.7rem;
+    font-size: 0.6rem;
     padding: 1px 4px;
-    margin-left: 4px;
+    margin-left: 8px;
   }
 }
diff --git a/frontend/src/pages/Analysis.jsx b/frontend/src/pages/Analysis.jsx
index 6cf29aa..5e87962 100644
--- a/frontend/src/pages/Analysis.jsx
+++ b/frontend/src/pages/Analysis.jsx
@@ -240,8 +240,8 @@ export default function Analysis() {
             <div className="card" style={{marginBottom:16,borderColor:'var(--accent)',borderWidth:2}}>
               <div style={{display:'flex',alignItems:'flex-start',gap:12}}>
                 <div style={{flex:1}}>
-                  <div style={{fontWeight:700,fontSize:15,color:'var(--accent)'}}>
-                    🔬 Mehrstufige Gesamtanalyse
+                  <div style={{fontWeight:700,fontSize:15,color:'var(--accent)',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
+                    <span>🔬 Mehrstufige Gesamtanalyse</span>
                     {aiUsage && <UsageBadge {...aiUsage} />}
                   </div>
                   <div style={{fontSize:12,color:'var(--text2)',marginTop:3,lineHeight:1.5}}>
@@ -295,8 +295,8 @@ export default function Analysis() {
               <div key={p.id} className="card section-gap">
                 <div style={{display:'flex',alignItems:'flex-start',gap:12}}>
                   <div style={{flex:1}}>
-                    <div style={{fontWeight:600,fontSize:15}}>
-                      {SLUG_LABELS[p.slug]||p.name}
+                    <div style={{fontWeight:600,fontSize:15,display:'flex',alignItems:'center',justifyContent:'space-between'}}>
+                      <span>{SLUG_LABELS[p.slug]||p.name}</span>
                       {aiUsage && <UsageBadge {...aiUsage} />}
                     </div>
                     {p.description && <div style={{fontSize:12,color:'var(--text3)',marginTop:2}}>{p.description}</div>}
diff --git a/frontend/src/pages/SettingsPage.jsx b/frontend/src/pages/SettingsPage.jsx
index e893f46..d0e7d5e 100644
--- a/frontend/src/pages/SettingsPage.jsx
+++ b/frontend/src/pages/SettingsPage.jsx
@@ -379,17 +379,21 @@ export default function SettingsPage() {
             </div>
           )}
           {canExport && <>
-            <button className="btn btn-primary btn-full"
+            <button className="btn btn-primary btn-full" style={{position:'relative'}}
               onClick={()=>api.exportZip()}>
-              <Download size={14}/> ZIP exportieren
-              {exportUsage && <UsageBadge {...exportUsage} />}
-              <span style={{fontSize:11,opacity:0.8,marginLeft:6}}>— je eine CSV pro Kategorie</span>
+              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',width:'100%'}}>
+                <span><Download size={14}/> ZIP exportieren</span>
+                {exportUsage && <UsageBadge {...exportUsage} />}
+              </div>
+              <span style={{fontSize:11,opacity:0.8,display:'block',marginTop:2}}>je eine CSV pro Kategorie</span>
             </button>
-            <button className="btn btn-secondary btn-full"
+            <button className="btn btn-secondary btn-full" style={{position:'relative'}}
               onClick={()=>api.exportJson()}>
-              <Download size={14}/> JSON exportieren
-              {exportUsage && <UsageBadge {...exportUsage} />}
-              <span style={{fontSize:11,opacity:0.8,marginLeft:6}}>— maschinenlesbar, alles in einer Datei</span>
+              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',width:'100%'}}>
+                <span><Download size={14}/> JSON exportieren</span>
+                {exportUsage && <UsageBadge {...exportUsage} />}
+              </div>
+              <span style={{fontSize:11,opacity:0.8,display:'block',marginTop:2}}>maschinenlesbar, alles in einer Datei</span>
             </button>
           </>}
         </div>
diff --git a/frontend/src/pages/WeightScreen.jsx b/frontend/src/pages/WeightScreen.jsx
index f2e82e3..b74b8a1 100644
--- a/frontend/src/pages/WeightScreen.jsx
+++ b/frontend/src/pages/WeightScreen.jsx
@@ -69,8 +69,8 @@ export default function WeightScreen() {
 
       {/* Eingabe */}
       <div className="card section-gap">
-        <div className="card-title">
-          Eintrag hinzufügen
+        <div className="card-title" style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
+          <span>Eintrag hinzufügen</span>
           {weightUsage && <UsageBadge {...weightUsage} />}
         </div>
         <div className="form-row">