diff --git a/webapp/src/components/SettingsPage.tsx b/webapp/src/components/SettingsPage.tsx index 450ee6d..740a089 100644 --- a/webapp/src/components/SettingsPage.tsx +++ b/webapp/src/components/SettingsPage.tsx @@ -338,8 +338,7 @@ export default function SettingsPage(props: SettingsPageProps) { -
-

{t('txt_recovery_code_and_api_key')}

+
diff --git a/webapp/src/styles.css b/webapp/src/styles.css index ddfd6c2..c3daa0f 100644 --- a/webapp/src/styles.css +++ b/webapp/src/styles.css @@ -698,6 +698,13 @@ h4 { margin-bottom: 12px; } +.sensitive-actions-module { + padding: 0; + background: transparent; + border: 0; + box-shadow: none; +} + .sensitive-action, .recovery-code-card, .api-key-warning-panel, @@ -705,9 +712,10 @@ h4 { .backup-recommendation-dav-item, .restore-progress-current, .restore-progress-elapsed { - border-radius: var(--radius-md); - border-color: var(--line-soft); - background: var(--panel-soft); + border-radius: .5rem; + border-width: 1px; + border-color: var(--line); + background: var(--panel); } .status-ok, @@ -812,13 +820,10 @@ h4 { :root[data-theme='dark'] .app-main, :root[data-theme='dark'] .app-side, :root[data-theme='dark'] .mobile-tabbar, -:root[data-theme='dark'] .sensitive-action, :root[data-theme='dark'] .backup-recommendations-summary, :root[data-theme='dark'] .backup-browser-path, :root[data-theme='dark'] .backup-browser-empty, -:root[data-theme='dark'] .backup-recommendation-dav-item, -:root[data-theme='dark'] .restore-progress-current, -:root[data-theme='dark'] .restore-progress-elapsed { +:root[data-theme='dark'] .backup-recommendation-dav-item { background: var(--panel-soft); } @@ -989,6 +994,10 @@ h4 { padding: 12px; } + .sensitive-actions-module { + padding: 0; + } + .card { padding: 12px; } diff --git a/webapp/src/styles/dark.css b/webapp/src/styles/dark.css index ac01f60..35ae007 100644 --- a/webapp/src/styles/dark.css +++ b/webapp/src/styles/dark.css @@ -281,7 +281,7 @@ :root[data-theme='dark'] .restore-progress-card, :root[data-theme='dark'] .restore-progress-current, :root[data-theme='dark'] .restore-progress-elapsed { - border-color: var(--line-soft); + border-color: var(--line); } :root[data-theme='dark'] .import-summary-table th { diff --git a/webapp/src/styles/management.css b/webapp/src/styles/management.css index 86e5946..2220d65 100644 --- a/webapp/src/styles/management.css +++ b/webapp/src/styles/management.css @@ -505,6 +505,13 @@ @apply min-w-0; } +.sensitive-actions-module { + @apply min-w-0 p-0; + background: transparent; + border: 0; + box-shadow: none; +} + .settings-module h3 { @apply mb-4 mt-0 text-base font-extrabold; color: var(--text); @@ -533,9 +540,12 @@ } .sensitive-action { - @apply rounded-lg border p-3.5; - border-color: var(--line-soft); - background: color-mix(in srgb, var(--surface) 74%, transparent); + @apply border; + border-radius: .5rem; + border-width: 1px; + padding: 23px .875rem; + border-color: var(--line); + background: var(--panel); } .sensitive-action h4 { @@ -544,9 +554,11 @@ } .recovery-code-card { - @apply mb-0 mt-2.5 rounded-lg border p-3; - border-color: var(--line-soft); - background: color-mix(in srgb, var(--surface) 84%, transparent); + @apply mb-0 mt-2.5 border p-3; + border-radius: .5rem; + border-width: 1px; + border-color: var(--line); + background: var(--panel); } .recovery-code-value { @@ -560,8 +572,8 @@ .api-key-warning-panel { @apply mb-3.5 mt-3; - border: 1px solid color-mix(in srgb, var(--danger) 24%, transparent); - background: color-mix(in srgb, var(--danger) 7%, var(--surface)); + border: 1px solid var(--line); + background: var(--panel); } .api-key-warning-title { @@ -760,10 +772,11 @@ } .restore-progress-elapsed { - @apply shrink-0 rounded-[10px] px-2 py-1.5 text-center text-[13px] font-semibold; + @apply shrink-0 px-2 py-1.5 text-center text-[13px] font-semibold; min-width: 88px; - background: #f8fbff; - border: 1px solid #d7e2f1; + border-radius: .5rem; + background: var(--panel); + border: 1px solid var(--line); color: #475569; } @@ -779,9 +792,10 @@ } .restore-progress-current { - @apply mt-3 rounded-[10px] px-3 py-2.5; - background: #f8fbff; - border: 1px solid #d7e2f1; + @apply mt-3 px-3 py-2.5; + border-radius: .5rem; + background: var(--panel); + border: 1px solid var(--line); } .restore-progress-current strong { diff --git a/webapp/src/styles/responsive.css b/webapp/src/styles/responsive.css index b5225b5..1c22f64 100644 --- a/webapp/src/styles/responsive.css +++ b/webapp/src/styles/responsive.css @@ -845,6 +845,10 @@ border-radius: 14px; } + .sensitive-actions-module { + padding: 0; + } + .settings-module h3 { margin-bottom: 8px; font-size: 15px; @@ -920,8 +924,8 @@ } .settings-module .sensitive-action { - padding: 10px; - border-radius: 12px; + padding: 23px .875rem; + border-radius: .5rem; } .settings-module .sensitive-action h4 {