From 4081e039709ea1e88a8644f1efdb6d43b8958477 Mon Sep 17 00:00:00 2001
From: Daniel Volz <mail@danielvolz.org>
Date: Fri, 16 Jan 2026 20:32:39 +0100
Subject: [PATCH] fix(ui): improve Export/Import section layout (#24)

* fix(ui): improve Export/Import section layout and styling

- Redesign as two-column card layout with icons
- Remove CAPSLOCK from labels
- Add proper descriptions for export and import sections
- Improve checkbox and button styling
- Make responsive for mobile

* fix(ui): clean up Export/Import section design

- Remove ugly folder icons
- Replace hint text box with info tooltip on title
- Cleaner h3 styling with uppercase letters
- Better visual hierarchy
---
 frontend/src/App.tsx      | 43 +++++++-----------
 frontend/src/i18n/de.json | 12 +++--
 frontend/src/i18n/en.json | 12 +++--
 frontend/src/styles.css   | 94 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 127 insertions(+), 34 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ebe98cc..1c796a9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2412,15 +2412,18 @@ function AppContent() {
 								{/* Export/Import Section */}
 								<article className="card">
 									<div className="card-head">
-										<h2>{t('exportImport.title')}</h2>
+										<h2>
+											{t('exportImport.title')}
+											<span className="info-tooltip" data-tooltip={t('exportImport.description')}>ⓘ</span>
+										</h2>
 									</div>
 									<div className="setting-section">
-										<p className="hint-text" style={{marginBottom: "16px"}}>{t('exportImport.description')}</p>
-										
-										{/* Export */}
-										<div className="setting-group" style={{marginBottom: "24px"}}>
-											<div className="export-controls">
-												<label className="checkbox-label" style={{marginBottom: "12px", display: "flex", alignItems: "center", gap: "8px"}}>
+										<div className="export-import-grid">
+											{/* Export */}
+											<div className="export-import-card">
+												<h3>{t('exportImport.exportTitle')}</h3>
+												<p className="export-import-desc">{t('exportImport.exportDesc')}</p>
+												<label className="export-import-checkbox">
 													<input
 														type="checkbox"
 														checked={includeSensitiveData}
@@ -2429,7 +2432,7 @@ function AppContent() {
 													<span>{t('exportImport.includeSensitive')}</span>
 												</label>
 												{includeSensitiveData && (
-													<p className="hint-text warning-text" style={{marginBottom: "12px", color: "var(--warning)", fontSize: "0.85rem"}}>
+													<p className="export-import-warning">
 														⚠️ {t('exportImport.sensitiveWarning')}
 													</p>
 												)}
@@ -2438,34 +2441,22 @@ function AppContent() {
 													className="secondary"
 													onClick={handleExport}
 													disabled={exporting}
-													style={{marginRight: "12px"}}
 												>
 													{exporting ? t('exportImport.exporting') : t('exportImport.export')}
 												</button>
 											</div>
-										</div>
-										
-										{/* Import */}
-										<div className="setting-group">
-											<div className="import-controls">
-												<label className="secondary" style={{
-													cursor: "pointer",
-													display: "inline-block",
-													padding: "0.7rem 1.25rem",
-													borderRadius: "var(--btn-radius)",
-													background: "var(--bg-tertiary)",
-													color: "var(--text-primary)",
-													border: "1px solid var(--border-secondary)",
-													fontWeight: 600,
-													fontSize: "0.9rem"
-												}}>
+											
+											{/* Import */}
+											<div className="export-import-card">
+												<h3>{t('exportImport.importTitle')}</h3>
+												<p className="export-import-desc">{t('exportImport.importDesc')}</p>
+												<label className="export-import-file-btn">
 													{importing ? t('exportImport.importing') : t('exportImport.import')}
 													<input
 														type="file"
 														accept=".json,application/json"
 														onChange={handleImportFileSelect}
 														disabled={importing}
-														style={{display: "none"}}
 													/>
 												</label>
 											</div>
diff --git a/frontend/src/i18n/de.json b/frontend/src/i18n/de.json
index 23621dd..3e618e4 100644
--- a/frontend/src/i18n/de.json
+++ b/frontend/src/i18n/de.json
@@ -351,14 +351,18 @@
   },
   "exportImport": {
     "title": "Daten Export / Import",
-    "description": "Exportiere deine Daten zur Sicherung oder Übertragung auf ein anderes Gerät. Import ersetzt ALLE deine bestehenden Daten.",
+    "description": "Sichere deine Daten oder übertrage sie auf ein anderes Gerät.",
+    "exportTitle": "Export",
+    "exportDesc": "Lade alle deine Daten als JSON-Datei herunter.",
+    "importTitle": "Import",
+    "importDesc": "Stelle Daten aus einer Sicherung wieder her. Dies ersetzt alle bestehenden Daten.",
     "export": "Daten exportieren",
     "exporting": "Exportiere...",
-    "import": "Daten importieren",
+    "import": "Datei auswählen",
     "importing": "Importiere...",
     "selectFile": "Datei auswählen",
-    "includeSensitive": "Sensible Daten einschließen",
-    "sensitiveWarning": "Warnung: Dies fügt Benachrichtigungs-URLs (können Passwörter enthalten) im Klartext in die Exportdatei ein.",
+    "includeSensitive": "Sensible Daten einschließen (Benachrichtigungs-URLs)",
+    "sensitiveWarning": "Benachrichtigungs-URLs können Passwörter enthalten und werden im Klartext gespeichert.",
     "confirmImport": "Alle Daten ersetzen?",
     "confirmImportMessage": "Dies löscht dauerhaft alle deine aktuellen Medikamente, Einnahmehistorie, Einstellungen und Teilen-Links und ersetzt sie durch die importierten Daten.",
     "confirmImportWarning": "Diese Aktion kann nicht rückgängig gemacht werden!",
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 644439c..3df1aca 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -353,14 +353,18 @@
   },
   "exportImport": {
     "title": "Data Export / Import",
-    "description": "Export your data for backup or transfer to another device. Import will replace ALL your existing data.",
+    "description": "Backup your data or transfer it to another device.",
+    "exportTitle": "Export",
+    "exportDesc": "Download all your data as a JSON file.",
+    "importTitle": "Import",
+    "importDesc": "Restore data from a backup file. This will replace all existing data.",
     "export": "Export Data",
     "exporting": "Exporting...",
-    "import": "Import Data",
+    "import": "Select File",
     "importing": "Importing...",
     "selectFile": "Select File",
-    "includeSensitive": "Include sensitive data",
-    "sensitiveWarning": "Warning: This will include notification URLs (may contain passwords) in plain text in the export file.",
+    "includeSensitive": "Include sensitive data (notification URLs)",
+    "sensitiveWarning": "Notification URLs may contain passwords and will be stored in plain text.",
     "confirmImport": "Replace All Data?",
     "confirmImportMessage": "This will permanently delete all your current medications, dose history, settings, and share links, then replace them with the imported data.",
     "confirmImportWarning": "This action cannot be undone!",
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 008cfee..7a18fef 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -3977,3 +3977,97 @@ h3 .reminder-icon.info-tooltip {
   margin-top: 0.5rem;
   width: 100%;
 }
+
+/* Export/Import Section */
+.export-import-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+}
+
+@media (max-width: 640px) {
+  .export-import-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.export-import-card {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--card-radius);
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.export-import-card h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.export-import-desc {
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  margin: 0;
+  line-height: 1.5;
+  flex: 1;
+}
+
+.export-import-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  text-transform: none !important;
+}
+
+.export-import-checkbox input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.export-import-warning {
+  font-size: 0.8rem;
+  color: var(--warning);
+  margin: 0;
+  padding: 0.5rem;
+  background: rgba(234, 179, 8, 0.1);
+  border-radius: 4px;
+  line-height: 1.4;
+}
+
+.export-import-card button,
+.export-import-file-btn {
+  margin-top: auto;
+  align-self: flex-start;
+}
+
+.export-import-file-btn {
+  cursor: pointer;
+  display: inline-block;
+  padding: 0.7rem 1.25rem;
+  border-radius: var(--btn-radius);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: all 0.2s ease;
+}
+
+.export-import-file-btn:hover {
+  background: var(--bg-hover);
+  border-color: var(--border-primary);
+}
+
+.export-import-file-btn input {
+  display: none;
+}