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, 13 deletions

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;

 }