From 9e2c66657d3a7a39bfa172c49d74205cdf706b12 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Mon, 12 Feb 2024 06:33:22 +0800
Subject: [PATCH] Chore: Fix lint

---
 src/components/HorizontalTabHeader.vue        |   9 +-
 .../settings/AppearanceSettings.vue           | 128 ++++++++++++++----
 2 files changed, 107 insertions(+), 30 deletions(-)

diff --git a/src/components/HorizontalTabHeader.vue b/src/components/HorizontalTabHeader.vue
index 3857394d..00712ad0 100644
--- a/src/components/HorizontalTabHeader.vue
+++ b/src/components/HorizontalTabHeader.vue
@@ -2,7 +2,12 @@
     <div>
         <ul class="nav nav-tabs">
             <li v-for="(tab, index) in tabs" :key="index" class="nav-item">
-                <a class="nav-link" :class="{ active: index == selected }" href="#" @click="$emit('update:selected', index)">
+                <a
+                    class="nav-link"
+                    :class="{ active: index == selected }"
+                    href="#"
+                    @click="$emit('update:selected', index)"
+                >
                     {{ tab }}
                 </a>
             </li>
@@ -45,10 +50,12 @@ export default {
 
             &.active {
                 background-color: $highlight-white;
+
                 .dark & {
                     color: $dark-font-color;
                     background-color: $dark-header-bg;
                 }
+
                 border-color: transparent transparent $primary transparent;
                 border-width: 1px 1px 6px 1px;
             }
diff --git a/src/components/settings/AppearanceSettings.vue b/src/components/settings/AppearanceSettings.vue
index 54c3470b..670fd716 100644
--- a/src/components/settings/AppearanceSettings.vue
+++ b/src/components/settings/AppearanceSettings.vue
@@ -5,10 +5,16 @@
                 {{ $t("Language") }}
             </label>
             <select
-                id="language" :value="language" class="form-select"
+                id="language"
+                :value="language"
+                class="form-select"
                 @input="$emit('update:language', $event.target.value)"
             >
-                <option v-for="(lang, i) in languages" :key="`Lang${i}`" :value="lang.value">
+                <option
+                    v-for="(lang, i) in languages"
+                    :key="`Lang${i}`"
+                    :value="lang.value"
+                >
                     {{ lang.label }}
                 </option>
             </select>
@@ -16,26 +22,48 @@
         <div class="my-4">
             <label for="timezone" class="form-label">{{ $t("Theme") }}</label>
             <div>
-                <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+                <div
+                    class="btn-group"
+                    role="group"
+                    aria-label="Basic checkbox toggle button group"
+                >
                     <input
-                        id="btncheck1" :checked="userTheme == 'light'" type="radio" class="btn-check" name="theme"
-                        autocomplete="off" value="light" @input="$emit('update:userTheme', 'light')"
+                        id="btncheck1"
+                        :checked="userTheme == 'light'"
+                        type="radio"
+                        class="btn-check"
+                        name="theme"
+                        autocomplete="off"
+                        value="light"
+                        @input="$emit('update:userTheme', 'light')"
                     />
                     <label class="btn btn-outline-primary" for="btncheck1">
                         {{ $t("Light") }}
                     </label>
 
                     <input
-                        id="btncheck2" :checked="userTheme == 'dark'" type="radio" class="btn-check" name="theme"
-                        autocomplete="off" value="dark" @input="$emit('update:userTheme', 'dark')"
+                        id="btncheck2"
+                        :checked="userTheme == 'dark'"
+                        type="radio"
+                        class="btn-check"
+                        name="theme"
+                        autocomplete="off"
+                        value="dark"
+                        @input="$emit('update:userTheme', 'dark')"
                     />
                     <label class="btn btn-outline-primary" for="btncheck2">
                         {{ $t("Dark") }}
                     </label>
 
                     <input
-                        id="btncheck3" :checked="userTheme == 'auto'" type="radio" class="btn-check" name="theme"
-                        autocomplete="off" value="auto" @input="$emit('update:userTheme', 'auto')"
+                        id="btncheck3"
+                        :checked="userTheme == 'auto'"
+                        type="radio"
+                        class="btn-check"
+                        name="theme"
+                        autocomplete="off"
+                        value="auto"
+                        @input="$emit('update:userTheme', 'auto')"
                     />
                     <label class="btn btn-outline-primary" for="btncheck3">
                         {{ $t("Auto") }}
@@ -46,10 +74,19 @@
         <div class="my-4">
             <label class="form-label">{{ $t("Theme - Heartbeat Bar") }}</label>
             <div>
-                <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+                <div
+                    class="btn-group"
+                    role="group"
+                    aria-label="Basic checkbox toggle button group"
+                >
                     <input
-                        id="btncheck4" :checked="userHeartbeatBar == 'normal'" type="radio" class="btn-check"
-                        name="heartbeatBarTheme" autocomplete="off" value="normal"
+                        id="btncheck4"
+                        :checked="userHeartbeatBar == 'normal'"
+                        type="radio"
+                        class="btn-check"
+                        name="heartbeatBarTheme"
+                        autocomplete="off"
+                        value="normal"
                         @input="$emit('update:userHeartbeatBar', 'normal')"
                     />
                     <label class="btn btn-outline-primary" for="btncheck4">
@@ -57,8 +94,13 @@
                     </label>
 
                     <input
-                        id="btncheck5" :checked="userHeartbeatBar == 'bottom'" type="radio" class="btn-check"
-                        name="heartbeatBarTheme" autocomplete="off" value="bottom"
+                        id="btncheck5"
+                        :checked="userHeartbeatBar == 'bottom'"
+                        type="radio"
+                        class="btn-check"
+                        name="heartbeatBarTheme"
+                        autocomplete="off"
+                        value="bottom"
                         @input="$emit('update:userHeartbeatBar', 'bottom')"
                     />
                     <label class="btn btn-outline-primary" for="btncheck5">
@@ -66,8 +108,13 @@
                     </label>
 
                     <input
-                        id="btncheck6" :checked="userHeartbeatBar == 'none'" type="radio" class="btn-check"
-                        name="heartbeatBarTheme" autocomplete="off" value="none"
+                        id="btncheck6"
+                        :checked="userHeartbeatBar == 'none'"
+                        type="radio"
+                        class="btn-check"
+                        name="heartbeatBarTheme"
+                        autocomplete="off"
+                        value="none"
                         @input="$emit('update:userHeartbeatBar', 'none')"
                     />
                     <label class="btn btn-outline-primary" for="btncheck6">
@@ -83,29 +130,53 @@
             <div>
                 <div class="btn-group" role="group">
                     <input
-                        id="styleElapsedTimeShowNoLine" :checked="styleElapsedTime == 'no-line'" type="radio"
-                        class="btn-check" name="styleElapsedTime" autocomplete="off" value="no-line"
+                        id="styleElapsedTimeShowNoLine"
+                        :checked="styleElapsedTime == 'no-line'"
+                        type="radio"
+                        class="btn-check"
+                        name="styleElapsedTime"
+                        autocomplete="off"
+                        value="no-line"
                         @input="$emit('update:styleElapsedTime', 'no-line')"
                     />
-                    <label class="btn btn-outline-primary" for="styleElapsedTimeShowNoLine">
+                    <label
+                        class="btn btn-outline-primary"
+                        for="styleElapsedTimeShowNoLine"
+                    >
                         {{ $t("styleElapsedTimeShowNoLine") }}
                     </label>
 
                     <input
-                        id="styleElapsedTimeShowWithLine" :checked="styleElapsedTime == 'with-line'" type="radio"
-                        class="btn-check" name="styleElapsedTime" autocomplete="off" value="with-line"
+                        id="styleElapsedTimeShowWithLine"
+                        :checked="styleElapsedTime == 'with-line'"
+                        type="radio"
+                        class="btn-check"
+                        name="styleElapsedTime"
+                        autocomplete="off"
+                        value="with-line"
                         @input="$emit('update:styleElapsedTime', 'with-line')"
                     />
-                    <label class="btn btn-outline-primary" for="styleElapsedTimeShowWithLine">
+                    <label
+                        class="btn btn-outline-primary"
+                        for="styleElapsedTimeShowWithLine"
+                    >
                         {{ $t("styleElapsedTimeShowWithLine") }}
                     </label>
 
                     <input
-                        id="styleElapsedTimeNone" :checked="styleElapsedTime == 'none'" type="radio" class="btn-check"
-                        name="styleElapsedTime" autocomplete="off" value="none"
+                        id="styleElapsedTimeNone"
+                        :checked="styleElapsedTime == 'none'"
+                        type="radio"
+                        class="btn-check"
+                        name="styleElapsedTime"
+                        autocomplete="off"
+                        value="none"
                         @input="$emit('update:styleElapsedTime', 'none')"
                     />
-                    <label class="btn btn-outline-primary" for="styleElapsedTimeNone">
+                    <label
+                        class="btn btn-outline-primary"
+                        for="styleElapsedTimeNone"
+                    >
                         {{ $t("None") }}
                     </label>
                 </div>
@@ -151,14 +222,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.btn-check:active+.btn-outline-primary,
-.btn-check:checked+.btn-outline-primary,
-.btn-check:hover+.btn-outline-primary {
+.btn-check:active + .btn-outline-primary,
+.btn-check:checked + .btn-outline-primary,
+.btn-check:hover + .btn-outline-primary {
     color: #fff;
 
     .dark & {
         color: #000;
     }
 }
-
 </style>