fix: Consistent styling (#526)

src/assets/less/coloration.less

@@ -34,6 +34,15 @@ table, [class*='badge-'] {
   }
 }
 
+.navbar-nav.ml-auto .dropdown-item {
+  color: @text-faded;
+  background-color: transparent;
+
+  & > i {
+    color: @text-faded;
+  }
+}
+
 .dropdown-header {
   color: @dh-color;
 }
@@ -54,7 +63,7 @@ table, [class*='badge-'] {
 }
 
 .dropdown-item > i {
-  color: @dh-color;
+  color: @text-faded;
 }
 
 .router-link-exact-active.router-link-active,
@@ -132,6 +141,17 @@ li.nav-item.b-nav-dropdown:has(.active) {
   color: @badge-color;
 }
 
+.btn-outline-primary {
+  border-color: @primary-bg;
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    background-color: @primary-bg;
+    border-color: @primary-bg;
+  }
+}
+
 .btn-info {
   background-color: @info-bg;
   border-color: @info-bg;

src/assets/less/night.less

@@ -1,5 +1,6 @@
 .night {
   @text-color:        white;
+  @text-faded:        rgba(255, 255, 255, 0.5);
   @bg:                #222;
   @bg-darker:         #303030;
   @link-color:        #00bc8c;
@@ -26,7 +27,7 @@
 
   @stripe-bg:         #303030;
   @check-color:       #375a7f;
-  @tr-hover:          rgba(0,0,0,0.075);
+  @tr-hover:          rgba(0, 0, 0, 0.075);
 
   @panel-bg:          #2c2f33;
   @panel-bt-border:   @theme-primary;

src/assets/less/retro.less

@@ -1,5 +1,6 @@
 .retro {
   @text-color:        #39ff14;
+  @text-faded:        @text-color;
   @bg:                #000;
   @bg-darker:         #000;
   @link-color:        @text-color;

src/components/NoDataItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-list-group-item class="list-group-item-borderbottom py-1">
+  <b-list-group-item class="py-1" :class="{ 'list-group-item-borderbottom': !this.overrideBorder }">
     <span class="dim">
       <HubImg
         :src="loading"
@@ -21,7 +21,7 @@ import HubImg from '@/components/HubImg.vue';
 import loading from '@/assets/img/general/loading.svg';
 export default {
   name: 'NoDataItem',
-  props: ['text'],
+  props: ['text', 'overrideBorder'],
   data() {
     return {
       loading: loading,

src/components/modalDialogs/Settings.vue

@@ -86,7 +86,6 @@ export default {
   },
   methods: {
     updateComponentState(enabledComponents) {
-      console.log(enabledComponents);
       Object.keys(this.$store.getters.componentState).forEach((component) => {
         this.$store.commit('commitComponentDisplayMode', [component, enabledComponents.includes(component)]);
       });

src/components/panels/FissuresPanel.vue

@@ -5,11 +5,8 @@
         :style="styleObject"
         v-for="(fissure, index) in filteredFissures"
         :key="fissure.id"
-        v-bind:class="{
-          'list-group-item-borderless': index !== filteredFissures.length - 1,
-          'pb-0': index !== filteredFissures.length - 1,
-          'list-group-item-borderbottom': index === filteredFissures.length - 1,
-        }"
+        class="list-group-item-borderless"
+        :class="{ 'pb-0': index !== filteredFissures.length - 1 }"
       >
         <span class="pull-left">
           <HubImg
@@ -35,12 +32,27 @@
           />
         </span>
       </b-list-group-item>
-      <NoDataItem v-if="filteredFissures.length === 0" :text="headertext" />
+
+      <NoDataItem v-if="filteredFissures.length === 0" :text="headertext" :overrideBorder="true" />
+      <b-list-group-item class="list-group-item-borderbottom">
+        <b-form-group :label="$t('fissures.choice')" v-slot="{ ariaDescribedby }">
+          <b-form-radio-group
+            v-model="check"
+            :options="options"
+            :aria-describedby="ariaDescribedby"
+            button-variant="outline-primary"
+            size="sm"
+            name="radio-btn-outline"
+            buttons
+          ></b-form-radio-group>
+        </b-form-group>
+      </b-list-group-item>
     </b-list-group>
   </HubPanelWrap>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import TimeBadge from '@/components/TimeBadge.vue';
 import HubImg from '@/components/HubImg.vue';
 import NoDataItem from '@/components/NoDataItem.vue';
@@ -63,9 +75,20 @@ export default {
   name: 'Fissures',
   props: ['fissures'],
   computed: {
+    ...mapGetters({
+      fissureDisplays: 'fissureDisplays',
+    }),
     headertext() {
       return this.$t('fissures.header');
     },
+    check: {
+      get() {
+        return this.fissureDisplays;
+      },
+      set(value) {
+        this.$store.commit('commitFissureDisplaysState', [value]);
+      },
+    },
     filteredFissures: function () {
       const pState = [];
       Object.keys(this.$store.getters.fissurePlanetStates).forEach((p) => {
@@ -77,7 +100,13 @@ export default {
       return this.fissures
         .filter((fissure) => {
           const isFiltered = planets.test(fissure.node);
-          return (pState.length > 0 ? !isFiltered : true) && !fissure.expired;
+          let include = !fissure.expired;
+          if (fissure.isStorm) {
+            include = include && this.check.includes('storms');
+          } else {
+            include = include && this.check.includes('fissures');
+          }
+          return (pState.length > 0 ? !isFiltered : true) && include;
         })
         .sort((a, b) => {
           return a.isStorm && !b.isStorm ? 1 : !a.isStorm && b.isStorm ? -1 : a.tierNum - b.tierNum;
@@ -96,6 +125,11 @@ export default {
         'vertical-align': 'middle',
       },
       archwing,
+      options: [
+        { text: this.$t('fissures.header'), value: 'fissures' },
+        { text: this.$t('fissures.both'), value: 'fissures-storms' },
+        { text: this.$t('fissures.voidstorm'), value: 'storms' },
+      ],
     };
   },
   components: {

src/components/panels/TimePanel.vue

@@ -2,28 +2,22 @@
   <HubPanelWrap :title="headertext" class="time" :class="[(location || 'sol').toLowerCase()]">
     <b-list-group>
       <b-list-group-item :style="styleObject" class="list-group-item-borderbottom">
-        <div class="row">
-          <div class="col-md-9">
-            <span
-              class="pull-left"
-              v-bind:class="{
-                day: this.isDay,
-                night: this.isNight,
-                warm: this.isWarm,
-                cold: this.isCold,
-                fass: this.isFass,
-                vome: this.isVome,
-              }"
-            >
-              <span style="text-transform: capitalize">{{
-                time.state || time.active ? this.$t(`time.${(time.state || time.active).toLowerCase()}`) : display
-              }}</span>
-            </span>
-          </div>
-          <div class="col-md-3">
-            <TimeBadge :starttime="time.activation || now" :endtime="time.expiry" :interval="1000" />
-          </div>
-        </div>
+        <span
+          class="pull-left"
+          v-bind:class="{
+            day: this.isDay,
+            night: this.isNight,
+            warm: this.isWarm,
+            cold: this.isCold,
+            fass: this.isFass,
+            vome: this.isVome,
+          }"
+        >
+          <span style="text-transform: capitalize">{{
+            time.state || time.active ? this.$t(`time.${(time.state || time.active).toLowerCase()}`) : display
+          }}</span>
+        </span>
+        <TimeBadge class="pull-right" :starttime="time.activation || now" :endtime="time.expiry" :interval="1000" />
       </b-list-group-item>
     </b-list-group>
   </HubPanelWrap>

src/lang/cs.json

@@ -85,7 +85,9 @@
   },
   "fissures": {
     "header": "Fissury",
-    "voidstorm": "Void Storm"
+    "voidstorm": "Void Storm",
+    "choice": "Choose which fissures to show",
+    "both": "Both"
   },
   "invasions": {
     "header": "Invaze",

src/lang/de.json

@@ -85,7 +85,9 @@
   },
   "fissures": {
     "header": "Risse",
-    "voidstorm": "Void Storm"
+    "voidstorm": "Void Storm",
+    "choice": "Choose which fissures to show",
+    "both": "Both"
   },
   "invasions": {
     "header": "Invasionen",

src/lang/en.json

@@ -85,7 +85,9 @@
   },
   "fissures": {
     "header": "Fissures",
-    "voidstorm": "Void Storm"
+    "voidstorm": "Void Storm",
+    "choice": "Choose which fissures to show",
+    "both": "Both"
   },
   "invasions": {
     "header": "Invasions",

src/lang/es.json

@@ -85,7 +85,9 @@
   },
   "fissures": {
     "header": "Fisuras",
-    "voidstorm": "Void Storm"
+    "voidstorm": "Void Storm",
+    "choice": "Choose which fissures to show",
+    "both": "Both"
   },
   "invasions": {
     "header": "Invasiones",

src/lang/fr.json

@@ -85,7 +85,9 @@
   },
   "fissures": {
     "header": "Fissures",
-    "voidstorm": "Void Storm"
+    "voidstorm": "Void Storm",
+    "choice": "Choose which fissures to show",
+    "both": "Both"
   },
   "invasions": {
     "header": "Invasions",

src/lang/it.json

@@ -85,7 +85,9 @@
   },
   "fissures": {
     "header": "Fessure",
-    "voidstorm": "Void Storm"
+    "voidstorm": "Void Storm",
+    "choice": "Choose which fissures to show",
+    "both": "Both"
   },
   "invasions": {
     "header": "Invasioni",

src/lang/ko.json

@@ -85,7 +85,9 @@
   },
   "fissures": {
     "header": "균열",
-    "voidstorm": "보이드 폭풍"
+    "voidstorm": "보이드 폭풍",
+    "choice": "Choose which fissures to show",
+    "both": "Both"
   },
   "invasions": {
     "header": "침공",

src/lang/pl.json

@@ -85,7 +85,9 @@
   },
   "fissures": {
     "header": "Fissures",
-    "voidstorm": "Void Storm"
+    "voidstorm": "Void Storm",
+    "choice": "Choose which fissures to show",
+    "both": "Both"
   },
   "invasions": {
     "header": "Invasions",

src/lang/pt.json

@@ -85,7 +85,9 @@
   },
   "fissures": {
     "header": "Fissures",
-    "voidstorm": "Void Storm"
+    "voidstorm": "Void Storm",
+    "choice": "Choose which fissures to show",
+    "both": "Both"
   },
   "invasions": {
     "header": "Invasions",

src/lang/ru.json

@@ -85,7 +85,9 @@
   },
   "fissures": {
     "header": "Разрывы Бездны",
-    "voidstorm": "Void Storm"
+    "voidstorm": "Void Storm",
+    "choice": "Choose which fissures to show",
+    "both": "Both"
   },
   "invasions": {
     "header": "Вторжения",

src/lang/sr.json

@@ -85,7 +85,9 @@
   },
   "fissures": {
     "header": "Fissures",
-    "voidstorm": "Void Storm"
+    "voidstorm": "Void Storm",
+    "choice": "Choose which fissures to show",
+    "both": "Both"
   },
   "invasions": {
     "header": "Invasions",

src/lang/tr.json

@@ -85,7 +85,9 @@
   },
   "fissures": {
     "header": "Fissures",
-    "voidstorm": "Void Storm"
+    "voidstorm": "Void Storm",
+    "choice": "Choose which fissures to show",
+    "both": "Both"
   },
   "invasions": {
     "header": "Invasions",

src/lang/zh.json

@@ -85,7 +85,9 @@
   },
   "fissures": {
     "header": "虚空裂缝",
-    "voidstorm": "虚空风暴"
+    "voidstorm": "虚空风暴",
+    "choice": "Choose which fissures to show",
+    "both": "Both"
   },
   "invasions": {
     "header": "入侵",

src/store.js

@@ -26,6 +26,7 @@ const state = {
   components: components,
   trackables: trackables,
   fissurePlanets: fissurePlanets,
+  fissureDisplays: 'fissures-storms',
   soundFilters: [],
   notificationsAllowed: 'default',
   notifiedIds: {
@@ -109,6 +110,9 @@ const mutations = {
     const toSet = state.fissurePlanets[key];
     toSet.state = newState;
   },
+  commitFissureDisplaysState: (state, [value]) => {
+    state.fissureDisplays = value;
+  },
   commitSounds: (state, [sounds]) => {
     state.soundFilters = sounds;
   },
@@ -221,7 +225,8 @@ const getters = {
   theme: (state) => state.theme || 'night',
   componentState: (state) => state.components,
   trackableState: (state) => state.trackables,
-  fissurePlanetStates: (state) => state.fissurePlanets,
+  fissurePlanetStates: (state) => state.fissurePlanets || fissurePlanets,
+  fissureDisplays: (state) => state.fissureDisplays || 'fissures-storms',
   sounds: (state) => state.soundFilters,
   notificationAllowance: (state) => state.notificationsAllowed,
   notifiedIds: (state) => state.notifiedIds[state.platform],