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

6 files changed, 102 insertions, 83 deletions

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 86a1bb37..f80e000d 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -93,8 +93,20 @@ export default {
   top: 0;
   width: 100%;
   height: var(--fc-menu_height);
-  background-image: radial-gradient(transparent 1px);
-  backdrop-filter: saturate(50%) blur(4px);
+}
+
+#fc__menu_bar::before {
+    position: absolute;
+    content: "";
+    inset: 0; /* same as { top: 0; right: 0; bottom: 0; left: 0; } */
+    background-image: linear-gradient(to bottom, red, orange);
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 1s linear;
+}
+
+#fc__menu_bar:hover::before {
+    opacity: 1;
 }
 
 /* Borders reset */
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());
diff --git a/src-vue/src/style.css b/src-vue/src/style.css
index 4401ac96..0366b0ed 100644
--- a/src-vue/src/style.css
+++ b/src-vue/src/style.css
@@ -41,3 +41,8 @@ body {
     height: 100%;
     color: white;
 }
+
+.noModMessage {
+    color: white;
+    margin: 30px 15px;
+}
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index 9a92865d..e526f821 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -3,17 +3,18 @@
         <el-scrollbar>
             <div class="fc_settings__container">
                 <!-- Game folder location -->
-                <h3>{{ $t('settings.manage_install') }}</h3>
-                <el-input
-                    v-model="$store.state.game_path"
-                    class="w-50 m-2"
-                    :placeholder="$t('settings.choose_folder')"
-                    @click="updateGamePath"
-                >
-                    <template #prepend>
-                        <el-button icon="Folder" @click="updateGamePath"/>
-                    </template>
-                </el-input>
+                <div class="fc_parameter__panel">
+                    <h3>{{ $t('settings.manage_install') }}</h3>
+                    <el-input
+                        v-model="$store.state.game_path"
+                        :placeholder="$t('settings.choose_folder')"
+                        @click="updateGamePath"
+                    >
+                        <template #prepend>
+                            <el-button icon="Folder" @click="updateGamePath"/>
+                        </template>
+                    </el-input>
+                </div>
 
                 <!-- Thunderstore mods per page configuration -->
                 <div class="fc_parameter__panel">
@@ -40,25 +41,30 @@
                     <language-selector/>
                 </div>
 
-                <h3>{{ $t('settings.repair.title') }}</h3>
-                <el-button type="primary" @click="openRepairWindow">
-                    {{ $t('settings.repair.open_window') }}
-                </el-button>
+                <!-- Repair window -->
+                <div class="fc_parameter__panel">
+                    <h3>{{ $t('settings.repair.title') }}</h3>
+                    <el-button type="primary" @click="openRepairWindow">
+                        {{ $t('settings.repair.open_window') }}
+                    </el-button>
+                </div>
 
-                <h3>{{ $t('settings.about') }}</h3>
+                <!-- About section -->
+                <div class="fc_parameter__panel">
+                    <h3>{{ $t('settings.about') }}</h3>
+                    <div class="fc_northstar__version" @click="activateDeveloperMode">
+                        {{ $t('settings.flightcore_version') }} {{ flightcoreVersion === '' ? 'Unknown version' : `${flightcoreVersion}` }}
+                    </div>
+                </div>
 
-                <div class="fc_northstar__version" @click="activateDeveloperMode">
-                    {{ $t('settings.flightcore_version') }} {{ flightcoreVersion === '' ? 'Unknown version' : `${flightcoreVersion}` }}
+                <!-- Testing section -->
+                <div class="fc_parameter__panel">
+                    <h3>{{ $t('settings.testing') }}</h3>
+                    <span>
+                        {{ $t('settings.enable_test_channels') }}
+                        <el-switch v-model="enableReleasesSwitch"></el-switch>
+                    </span>
                 </div>
-                <br />
-                <br />
-                UI design inspired by <el-link :underline="false" target="_blank" href="https://github.com/TFORevive/tforevive_launcher/" type="primary">TFORevive Launcher</el-link> (not yet public)
-
-                <h3>{{ $t('settings.testing') }}</h3>
-                <span>
-                    {{ $t('settings.enable_test_channels') }}
-                    <el-switch v-model="enableReleasesSwitch"></el-switch>
-                </span>
             </div>
         </el-scrollbar>
     </div>
@@ -117,8 +123,8 @@ export default defineComponent({
     methods: {
         activateDeveloperMode() {
             this.developerModeClicks += 1;
-            if (this.developerModeClicks >= 6) {
-                this.$store.state.developer_mode = true;
+            if (this.developerModeClicks >= 6 && !this.$store.state.developer_mode) {
+                this.$store.commit('toggleDeveloperMode');
                 ElNotification({
                     title: this.$t('settings.dev_mode_enabled_title'),
                     message: this.$t('settings.dev_mode_enabled_text'),
@@ -180,7 +186,7 @@ h3:first-of-type {
 
 /* Parameter panel styles */
 .fc_parameter__panel {
-    margin: 30px 0;
+    margin-bottom: 30px;
 }
 
 .fc_parameter__panel h3 {
diff --git a/src-vue/src/views/mods/LocalModsView.vue b/src-vue/src/views/mods/LocalModsView.vue
index 4bc870fe..2cd253ae 100644
--- a/src-vue/src/views/mods/LocalModsView.vue
+++ b/src-vue/src/views/mods/LocalModsView.vue
@@ -1,33 +1,35 @@
 <template>
-    <el-scrollbar>
-        <div>
-            <p v-if="mods.length === 0">{{ $t('mods.local.no_mods') }}</p>
-            <el-card v-else shadow="hover" v-for="mod in mods" v-bind:key="mod.name">
-                <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled"
-                            :before-change="() => updateWhichModsEnabled(mod)" :loading="global_load_indicator" />
-                <el-popconfirm
-                    :title="$t('mods.local.delete_confirm')"
-                    :confirm-button-text="$t('generic.yes')"
-                    :cancel-button-text="$t('generic.no')"
-                    @confirm="deleteMod(mod)"
-                >
-                    <template #reference>
-                        <el-button type="danger">
-                            {{ $t('mods.local.delete') }}
-                        </el-button>
-                    </template>
-                </el-popconfirm>
-                {{ mod.name }}
-                <span v-if="mod.version != null">(v{{ mod.version }})</span>
-                <img
-                    v-if="mod.thunderstore_mod_string != null"
-                    :title="$t('mods.local.part_of_ts_mod')"
-                    src="/src/assets/thunderstore-icon.png"
-                    class="image"
-                    height="16"
-                />
-            </el-card>
-        </div>
+    <!-- Message displayed if no mod matched searched words -->
+    <div v-if="mods.length === 0" class="noModMessage">
+        {{ $t('mods.local.no_mods') }}
+    </div>
+
+    <el-scrollbar v-else>
+        <el-card shadow="hover" v-for="mod in mods" v-bind:key="mod.name">
+            <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled"
+                       :before-change="() => updateWhichModsEnabled(mod)" :loading="global_load_indicator" />
+            <el-popconfirm
+                :title="$t('mods.local.delete_confirm')"
+                :confirm-button-text="$t('generic.yes')"
+                :cancel-button-text="$t('generic.no')"
+                @confirm="deleteMod(mod)"
+            >
+                <template #reference>
+                    <el-button type="danger">
+                        {{ $t('mods.local.delete') }}
+                    </el-button>
+                </template>
+            </el-popconfirm>
+            {{ mod.name }}
+            <span v-if="mod.version != null">(v{{ mod.version }})</span>
+            <img
+                v-if="mod.thunderstore_mod_string != null"
+                :title="$t('mods.local.part_of_ts_mod')"
+                src="/src/assets/thunderstore-icon.png"
+                class="image"
+                height="16"
+            />
+        </el-card>
     </el-scrollbar>
 </template>
 
diff --git a/src-vue/src/views/mods/ThunderstoreModsView.vue b/src-vue/src/views/mods/ThunderstoreModsView.vue
index 0a0b9965..5a7270df 100644
--- a/src-vue/src/views/mods/ThunderstoreModsView.vue
+++ b/src-vue/src/views/mods/ThunderstoreModsView.vue
@@ -3,11 +3,17 @@
         <div v-if="mods.length === 0" class="fc__changelog__container">

             <el-progress :show-text="false" :percentage="50" :indeterminate="true" />

         </div>

+

+        <!-- Message displayed if no mod matched searched words -->

+        <div v-else-if="filteredMods.length === 0" class="noModMessage">

+            {{ $t('mods.online.no_match') }}<br/>

+            {{ $t('mods.online.try_another_search') }}

+        </div>

+

         <el-scrollbar v-else class="container" ref="scrollbar">

             <div class="card-container">

-                <div class="pagination_container">

+                <div class="pagination_container" v-if="shouldDisplayPagination">

                     <el-pagination

-                        v-if="shouldDisplayPagination"

                         :currentPage="currentPageIndex + 1"

                         layout="prev, pager, next"

                         :page-size="modsPerPage"

@@ -16,12 +22,6 @@
                     />

                 </div>

 

-                <!-- Message displayed if no mod matched searched words -->

-                <div v-if="filteredMods.length === 0" class="modMessage">

-                    {{ $t('mods.online.no_match') }}<br/>

-                    {{ $t('mods.online.try_another_search') }}

-                </div>

-

                 <!-- Mod cards -->

                 <thunderstore-mod-card v-for="mod of currentPageMods" v-bind:key="mod.name" :mod="mod" />

             </div>

@@ -199,11 +199,6 @@ export default defineComponent({
     margin: 0 0 0 10px !important;

 }

 

-.modMessage {

-    color: white;

-    margin: 20px 5px;

-}

-

 .card-container {

     margin: 0 auto;

 }