feat: update styling for sensitive actions module to enhance UI consistency

webapp/src/components/SettingsPage.tsx

@@ -338,8 +338,7 @@ export default function SettingsPage(props: SettingsPageProps) {
         </div>
       </section>
 
-      <section className="card settings-module">
+      <section className="settings-module sensitive-actions-module">
-        <h3>{t('txt_recovery_code_and_api_key')}</h3>
         <div className="sensitive-actions-grid">
           <div className="sensitive-action">
             <div>

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-radius: .5rem;
-  border-color: var(--line-soft);
+  border-width: 1px;
-  background: var(--panel-soft);
+  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'] .backup-recommendation-dav-item {
-:root[data-theme='dark'] .restore-progress-current,
-:root[data-theme='dark'] .restore-progress-elapsed {
   background: var(--panel-soft);
 }
 
@@ -989,6 +994,10 @@ h4 {
     padding: 12px;
   }
 
+  .sensitive-actions-module {
+    padding: 0;
+  }
+
   .card {
     padding: 12px;
   }

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 {

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;
+  @apply border;
-  border-color: var(--line-soft);
+  border-radius: .5rem;
-  background: color-mix(in srgb, var(--surface) 74%, transparent);
+  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;
+  @apply mb-0 mt-2.5 border p-3;
-  border-color: var(--line-soft);
+  border-radius: .5rem;
-  background: color-mix(in srgb, var(--surface) 84%, transparent);
+  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);
+  border: 1px solid var(--line);
-  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
+  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-radius: .5rem;
-  border: 1px solid #d7e2f1;
+  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;
+  @apply mt-3 px-3 py-2.5;
-  background: #f8fbff;
+  border-radius: .5rem;
-  border: 1px solid #d7e2f1;
+  background: var(--panel);
+  border: 1px solid var(--line);
 }
 
 .restore-progress-current strong {

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;
+    padding: 23px .875rem;
-    border-radius: 12px;
+    border-radius: .5rem;
   }
 
   .settings-module .sensitive-action h4 {