refactor: Style (#247)

* refactor: apply same style to all settings sections

* refactor: only assign developer_mode through store mutation

* refactor: remove useless credit mention

* refactor: remove menu bar background layer

* refactor: use same CSS style for both "no mod" messages

For both local and thunderstore mods views.

* fix: toggleDeveloperMode does not affect menu style by default

* feat: adjust TS mod hint i18n regression

1 files changed, 8 insertions, 9 deletions

diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index 08f9b85f..60208879 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -51,6 +51,7 @@ export interface FlightCoreStore {
 
 let notification_handle: NotificationHandle;
 
+
 export const store = createStore<FlightCoreStore>({
     modules: {
         search: searchModule,
@@ -87,13 +88,18 @@ export const store = createStore<FlightCoreStore>({
         checkNorthstarUpdates(state) {
             _get_northstar_version_number(state);
         },
-        toggleDeveloperMode(state) {
+        toggleDeveloperMode(state, affectMenuStyle = false) {
             state.developer_mode = !state.developer_mode;
 
             // Reset tab when closing dev mode.
             if (!state.developer_mode) {
                 store.commit('updateCurrentTab', Tabs.PLAY);
             }
+
+            let menu_bar_handle = document.querySelector('#fc_menu-bar');
+            if (affectMenuStyle && menu_bar_handle !== null) {
+                menu_bar_handle.classList.toggle('developer_build');
+            }
         },
         initialize(state) {
             _initializeApp(state);
@@ -331,14 +337,7 @@ export const store = createStore<FlightCoreStore>({
 async function _initializeApp(state: any) {
     // Enable dev mode directly if application is in debug mode
     if (await invoke("is_debug_mode")) {
-        state.developer_mode = true;
-
-        // Make menubar striped if debug build
-        let menu_bar_handle = document.querySelector('#fc_menu-bar');
-        console.log(menu_bar_handle);
-        if (menu_bar_handle !== null) {
-            menu_bar_handle.classList.toggle('developer_build');
-        }
+        store.commit('toggleDeveloperMode', true);
     } else {
         // Disable context menu in release build.
         document.addEventListener('contextmenu', event => event.preventDefault());