improve UI of region settings

dist/index.js

@@ -5611,7 +5611,7 @@
       this.connectionModel = connectionModel2;
       this.chatListModel = chatListModel2;
       this.fileTransferModel = fileTransferModel2;
-      this.BUILD = "Build 26.04.09.B";
+      this.BUILD = "Build 26.04.09.C";
       // DRAG & DROP
       this.draggedObject = new State(void 0);
       // SUGGESTIONS
@@ -6842,7 +6842,7 @@
         ),
         detailView,
         new State(""),
-        false,
+        true,
         settingsViewModel2.selectedModalPage
       )), /* @__PURE__ */ createElement("button", { "on:click": settingsViewModel2.hideSettingsModal }, coreViewModel2.translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))
     );
@@ -6884,19 +6884,21 @@
     )));
   }
   function SettingsRegionalPane(coreViewModel2, settingsViewModel2) {
-    return /* @__PURE__ */ createElement("div", { class: "slide-up" }, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.settings.pages.regional), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "calendar_month"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.settings.firstDayOfWeekLabel), /* @__PURE__ */ createElement("select", { "bind:value": settingsViewModel2.firstDayOfWeek }, ...coreViewModel2.translations.regional.weekdays.full.map(
+    return /* @__PURE__ */ createElement("div", { class: "slide-up" }, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.settings.pages.regional), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.settings.language), OptionButtonList(
-      (weekdayName, i) => Option(
+      new ListState(
-        weekdayName,
+        Object.values(Languages).map(
-        i.toString(),
+          (x) => [languageNames[x], x]
-        i.toString() == settingsViewModel2.firstDayOfWeek.value
+        )
-      )
+      ),
-    )), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "language"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.settings.language), /* @__PURE__ */ createElement("select", { "bind:value": settingsViewModel2.language }, ...[...Object.values(Languages)].map(
+      settingsViewModel2.language
-      (language, i) => Option(
+    ), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.settings.firstDayOfWeekLabel), OptionButtonList(
-        languageNames[language],
+      new ListState(
-        language,
+        coreViewModel2.translations.regional.weekdays.full.map(
-        language == settingsViewModel2.language.value
+          (x, i) => [x, i.toString()]
-      )
+        )
-    )), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))));
+      ),
+      settingsViewModel2.firstDayOfWeek
+    ));
   }
   function SettingsAppearancePane(coreViewModel2, settingsViewModel2) {
     return /* @__PURE__ */ createElement("div", { class: "slide-up" }, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.settings.pages.appearance), /* @__PURE__ */ createElement("hr", null), OptionButtonList(

src/View/Modals/settingsModal.tsx

@@ -49,7 +49,7 @@ export function SettingsModal(
                         ),
                         detailView,
                         new React.State(""),
-                        false,
+                        true,
                         settingsViewModel.selectedModalPage,
                     )}
                 </main>
@@ -133,46 +133,28 @@ function SettingsRegionalPane(
     return (
         <div class="slide-up">
             <h2>{coreViewModel.translations.settings.pages.regional}</h2>
+
             <hr></hr>
-            <label class="tile flex-no">
+            <h3>{coreViewModel.translations.settings.language}</h3>
-                <span class="icon">calendar_month</span>
+            {OptionButtonList(
-                <div>
+                new React.ListState<[string, string]>(
-                    <span>
+                    Object.values(Languages).map(
-                        {
+                        (x) => [languageNames[x], x],
-                            coreViewModel.translations.settings
+                    ),
-                                .firstDayOfWeekLabel
+                ),
-                        }
+                settingsViewModel.language,
-                    </span>
+            )}
-                    <select bind:value={settingsViewModel.firstDayOfWeek}>
+
-                        {...coreViewModel.translations.regional.weekdays.full.map(
+            <hr></hr>
-                            (weekdayName, i) =>
+            <h3>{coreViewModel.translations.settings.firstDayOfWeekLabel}</h3>
-                                Option(
+            {OptionButtonList(
-                                    weekdayName,
+                new React.ListState<[string, string]>(
-                                    i.toString(),
+                    coreViewModel.translations.regional.weekdays.full.map(
-                                    i.toString() ==
+                        (x, i) => [x, i.toString()],
-                                        settingsViewModel.firstDayOfWeek.value,
+                    ),
-                                ),
+                ),
-                        )}
+                settingsViewModel.firstDayOfWeek,
-                    </select>
+            )}
-                    <span class="icon">arrow_drop_down</span>
-                </div>
-            </label>
-            <label class="tile flex-no">
-                <span class="icon">language</span>
-                <div>
-                    <span>{coreViewModel.translations.settings.language}</span>
-                    <select bind:value={settingsViewModel.language}>
-                        {...[...Object.values(Languages)].map((language, i) =>
-                            Option(
-                                languageNames[language],
-                                language,
-                                language == settingsViewModel.language.value,
-                            ),
-                        )}
-                    </select>
-                    <span class="icon">arrow_drop_down</span>
-                </div>
-            </label>
         </div>
     );
 }

src/ViewModel/Global/coreViewModel.ts

@@ -7,7 +7,7 @@ import ChatListModel from "../../Model/Chat/chatListModel";
 import FileTransferModel from "../../Model/Global/fileTransferModel";
 
 export default class CoreViewModel {
-    readonly BUILD = "Build 26.04.09.C";
+    readonly BUILD = "Build 26.04.09.D";
 
     translations: Translations;
 

src/colors.css

@@ -60,7 +60,6 @@ body[theme="dark"] [color]:not([color="standard"]).tile {
     --surface-active: hsl(var(--hue), 100%, var(--active-luma));
 
     --text-normal: hsl(var(--hue), 100%, var(--text-luma));
-
 }
 
 /* fill */