web: settings reset confirmation, icons for small dialog

- cleaned up dialog i18n
- better red color
- made :active state visible for dialog buttons on mobile
- better body padding in small dialog
- better small dialog typing with optional values

web/src/routes/+layout.svelte

@@ -60,8 +60,9 @@
 
         --white: #ffffff;
         --gray: #75757e;
-        --red: #f92f2f;
-        --dark-red: #df0707;
+
+        --red: #ed2236;
+        --dark-red: #d61c2e;
         --green: #51cf5e;
         --blue: #2f8af9;
 
@@ -127,6 +128,7 @@
         --secondary: #e1e1e1;
 
         --gray: #818181;
+
         --blue: #2a7ce1;
         --green: #37aa42;
 
@@ -288,6 +290,10 @@
         background-color: var(--secondary);
     }
 
+    :global(.button.active:active) {
+        background-color: var(--button-active-hover);
+    }
+
     /* important is used because active class is toggled by state */
     /* and added to the end of the list, taking priority */
     :global(.active:focus-visible) {

web/src/routes/settings/advanced/+page.svelte

@@ -15,6 +15,6 @@
     />
 </SettingsCategory>
 
-<SettingsCategory sectionId="settings" title={$t("tabs.settings")}>
+<SettingsCategory sectionId="data" title={$t("settings.advanced.data")}>
     <ResetSettingsButton />
-</SettingsCategory>
+</SettingsCategory>