6 files changed, 15 insertions, 16 deletions

diff --git a/src/App.vue b/src/App.vue
index c47b5a9..d97df0c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,7 +26,7 @@
       <Navbar
         :open="showMenu"
         :links="config.links"
-        @navbar:toggle="showMenu = !showMenu"
+        @navbar-toggle="showMenu = !showMenu"
       >
         <DarkMode @updated="isDark = $event" />
 
@@ -40,9 +40,9 @@
         <SearchInput
           class="navbar-item is-inline-block-mobile"
           @input="filterServices"
-          @search:focus="showMenu = true"
-          @search:open="navigateToFirstService"
-          @search:cancel="filterServices"
+          @search-focus="showMenu = true"
+          @search-open="navigateToFirstService"
+          @search-cancel="filterServices"
         />
       </Navbar>
     </div>
@@ -51,7 +51,7 @@
       <div v-cloak class="container">
         <ConnectivityChecker
           v-if="config.connectivityCheck"
-          @network:status-update="offline = $event"
+          @network-status-update="offline = $event"
         />
         <div v-if="!offline">
           <!-- Optional messages -->
diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue
index a91a809..d5f8f80 100644
--- a/src/components/ConnectivityChecker.vue
+++ b/src/components/ConnectivityChecker.vue
@@ -44,7 +44,7 @@ export default {
           that.offline = true;
         })
         .finally(function () {
-          that.$emit("network:status-update", that.offline);
+          that.$emit("network-status-update", that.offline);
         });
     },
   },
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index ae84166..dea7049 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -9,7 +9,7 @@
             aria-expanded="false"
             class="navbar-burger"
             :class="{ 'is-active': showMenu }"
-            v-on:click="$emit('navbar:toggle')"
+            v-on:click="$emit('navbar-toggle')"
           >
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
index 22b5eef..9419db3 100644
--- a/src/components/SearchInput.vue
+++ b/src/components/SearchInput.vue
@@ -6,8 +6,8 @@
       ref="search"
       :value="value"
       @input="$emit('input', $event.target.value.toLowerCase())"
-      @keyup.enter.exact="$emit('search:open')"
-      @keyup.alt.enter="$emit('search:open', '_blank')"
+      @keyup.enter.exact="$emit('search-open')"
+      @keyup.alt.enter="$emit('search-open', '_blank')"
     />
   </div>
 </template>
@@ -20,7 +20,7 @@ export default {
     this._keyListener = function (event) {
       if (event.key === "/") {
         event.preventDefault();
-        this.$emit("search:focus");
+        this.$emit("search-focus");
         this.$nextTick(() => {
           this.$refs.search.focus();
         });
@@ -28,7 +28,7 @@ export default {
       if (event.key === "Escape") {
         this.$refs.search.value = "";
         this.$refs.search.blur();
-        this.$emit("search:cancel");
+        this.$emit("search-cancel");
       }
     };
     document.addEventListener("keydown", this._keyListener.bind(this));
diff --git a/src/components/Service.vue b/src/components/Service.vue
index 81ad8a2..4d3702b 100644
--- a/src/components/Service.vue
+++ b/src/components/Service.vue
@@ -11,7 +11,7 @@
             </div>
             <div v-if="item.icon" class="media-left">
               <figure class="image is-48x48">
-                <i style="font-size: 35px;" :class="['fa-fw', item.icon]"></i>
+                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
               </figure>
             </div>
             <div class="media-content">
diff --git a/src/components/SettingToggle.vue b/src/components/SettingToggle.vue
index ffc91a1..985ca84 100644
--- a/src/components/SettingToggle.vue
+++ b/src/components/SettingToggle.vue
@@ -1,6 +1,6 @@
 <template>
   <a v-on:click="toggleSetting()" class="navbar-item is-inline-block-mobile">
-    <span><i :class="['fas', 'fa-fw', value ? icon : iconAlt]"></i></span>
+    <span><i :class="['fas', 'fa-fw', value ? icon : secondaryIcon]"></i></span>
     <slot></slot>
   </a>
 </template>
@@ -15,13 +15,12 @@ export default {
   },
   data: function () {
     return {
+      secondaryIcon: null,
       value: true,
     };
   },
   created: function () {
-    if (!this.iconAlt) {
-      this.iconAlt = this.icon;
-    }
+    this.secondaryIcon = this.iconAlt || this.icon;
 
     if (this.name in localStorage) {
       this.value = JSON.parse(localStorage[this.name]);