fix: network list action buttons opacity

src/popup/components/NetworkRow.vue

@@ -1,5 +1,6 @@
 <template>
   <RadioButton
+    v-slot="{ checked }"
     :value="isActive"
     class="network-row"
     type="radio"
@@ -9,6 +10,7 @@
     <div class="name-and-actions">
       <p
         class="name"
+        :class="{ 'label-part-unchecked': !checked }"
         data-cy="network-name"
         v-text="network.name"
       />
@@ -26,15 +28,17 @@
         <BtnIcon
           size="sm"
           data-cy="network-delete"
-          icon-variant="danger"
           dimmed
           :icon="TrashIcon"
           @click="$emit('deleteNetwork', network.name);"
         />
       </div>
     </div>
 
-    <table class="network-details">
+    <table
+      class="network-details"
+      :class="{ 'label-part-unchecked': !checked }"
+    >
       <tbody>
         <tr
           v-for="(protocolSettings, protocol) in networkSettingsToDisplay"
@@ -51,7 +55,7 @@
 
 <script lang="ts">
 import { PropType, computed, defineComponent } from 'vue';
-import type { INetwork, Protocol } from '@/types';
+import type { INetwork, NetworkProtocolsSettings, Protocol } from '@/types';
 import { NETWORK_TYPE_CUSTOM } from '@/constants';
 import { ROUTE_NETWORK_EDIT } from '@/popup/router/routeNames';
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
@@ -79,11 +83,13 @@ export default defineComponent({
   setup(props) {
     // Filter out the network protocol settings that has no `nodeUrl` default property
     const networkSettingsToDisplay = computed(
-      () => Object.fromEntries((Object.keys(props.network.protocols) as Protocol[])
-        .map((protocol) => {
-          const settings = props.network.protocols[protocol];
-          return settings.nodeUrl ? [protocol, settings] : [];
-        })),
+      (): NetworkProtocolsSettings => Object.fromEntries(
+        (Object.keys(props.network.protocols) as (keyof typeof props.network.protocols)[])
+          .map((protocol) => {
+            const settings = props.network.protocols[protocol];
+            return settings.nodeUrl ? [protocol, settings] : [];
+          }),
+      ),
     );
 
     function getProtocolName(protocol: Protocol) {
@@ -109,6 +115,10 @@ export default defineComponent({
 .network-row {
   margin-bottom: 12px;
 
+  .label-part-unchecked {
+    opacity: 0.5;
+  }
+
   .name-and-actions {
     display: flex;
     justify-content: space-between;

src/popup/components/RadioButton.vue

@@ -4,6 +4,7 @@
     :class="{
       disabled,
       checked: value,
+      'has-label-effect': hasLabelEffect,
     }"
   >
     <span class="radio-dot">
@@ -17,7 +18,7 @@
     </span>
 
     <span class="radio-holder">
-      <slot />
+      <slot :checked="value">{{ label }}</slot>
     </span>
   </label>
 </template>
@@ -30,6 +31,9 @@ export default defineComponent({
     value: { type: [String, Number, Boolean], default: '' },
     type: { type: String as PropType<'checkbox' | 'radio'>, default: 'checkbox' },
     name: { type: String, default: '' },
+    label: { type: String, default: '' },
+    /** Makes the unchecked input's label semi transparent */
+    hasLabelEffect: Boolean,
     disabled: Boolean,
   },
 });
@@ -48,9 +52,12 @@ export default defineComponent({
   display: flex;
   cursor: pointer;
   user-select: none;
-  opacity: 0.5;
   transition: opacity 0.15s;
 
+  &.has-label-effect {
+    opacity: 0.5;
+  }
+
   &.checked {
     --radio-dot-scale: 1;
 

src/popup/components/TransactionSpeedPicker.vue

@@ -5,10 +5,10 @@
         v-for="(feeItem, index) in feeList"
         :key="index"
         :value="modelValue === index"
+        :label="feeItem.label"
+        has-label-effect
         @input="handleInput(index)"
-      >
-        <p v-text="feeItem.label" />
-      </RadioButton>
+      />
     </div>
     <p
       v-if="UNFINISHED_FEATURES"

src/popup/pages/CurrencySettings.vue

@@ -13,6 +13,7 @@
             :value="currentCurrencyCode === code"
             :class="{ active: currentCurrencyCode === code }"
             class="currency"
+            has-label-effect
             @input="setCurrentCurrency(code)"
           >
             <div class="row">

src/popup/pages/LanguageSettings.vue

@@ -11,8 +11,9 @@
             v-for="{ code, name } in languageList"
             :key="code"
             :value="activeLanguage === code"
-            class="language"
             :class="{ active: activeLanguage === code }"
+            class="language"
+            has-label-effect
             @input="switchLanguage(code)"
           >
             {{ name }}
@@ -27,20 +28,24 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { IonPage, IonContent } from '@ionic/vue';
-import { languages } from '@/popup/plugins/i18n';
+import { languages, SupportedLanguage } from '@/popup/plugins/i18n';
 import { useLanguages } from '@/composables';
 
 import RadioButton from '../components/RadioButton.vue';
 
-const languageList = Object.entries(languages)
-  .map(([code, { name }]) => ({ code, name }))
-  .sort();
-
 export default defineComponent({
-  components: { RadioButton, IonPage, IonContent },
+  components: {
+    RadioButton,
+    IonPage,
+    IonContent,
+  },
   setup() {
     const { activeLanguage, switchLanguage } = useLanguages();
 
+    const languageList = Object.entries(languages)
+      .map(([code, { name }]) => ({ code, name } as { code: SupportedLanguage; name: string }))
+      .sort();
+
     return {
       languageList,
       activeLanguage,

src/popup/pages/SecureLoginSettings.vue

@@ -42,6 +42,7 @@
               :disabled="!isSecureLoginEnabled"
               :class="{ active: secureLoginTimeout === ms }"
               class="timeout"
+              has-label-effect
               @input="setSecureLoginTimeout(ms)"
             >
               <div class="row">