frontend: update networking widgets for using the pi svg with css colors

core/frontend/src/components/wifi/WifiTrayMenu.vue

@@ -85,7 +85,7 @@ export default Vue.extend({
   },
   mounted() {
     commander.getEnvironmentVariables().then((environment_variables) => {
-      this.disabled_services = ((environment_variables?.BLUEOS_DISABLE_SERVICES as string) ?? '').split(',') as string[]
+      this.disabled_services = (environment_variables?.BLUEOS_DISABLE_SERVICES as string ?? '').split(',') as string[]
     })
   },
 })

core/frontend/src/widgets/Networking.vue

@@ -2,7 +2,8 @@
   <v-card class="d-flex align-center justify-center" height="40">
     <v-card-title class="d-flex align-center">
       <span class="vertical-text mr-1">eth0</span>
-      <img src="/img/icons/pi.svg" alt="Pi" class="pi-icon mr-1" height="30">
+      <!-- eslint-disable vue/no-v-html -->
+      <i class="pi-icon mr-1" v-html="image" />
       <div class="d-flex flex-column">
         <div class="d-flex align-center text-caption" style="margin-bottom: -5px">
           <v-icon small>
@@ -22,18 +23,20 @@
 </template>
 
 <script lang="ts">
+import axios from 'axios'
 import Vue from 'vue'
 
 import { OneMoreTime } from '@/one-more-time'
 import system_information, { FetchType } from '@/store/system-information'
-import { formatBandwidth } from '@/utils/networking';
+import { formatBandwidth } from '@/utils/networking'
 
 export default Vue.extend({
   name: 'ETh0Widget',
   data() {
     return {
       timer: 0,
       check_backend_status_task: new OneMoreTime({ delay: 2000, disposeWith: this }),
+      image: '',
     }
   },
   computed: {
@@ -46,10 +49,11 @@ export default Vue.extend({
       return eth0?.download_speed ?? 0
     },
   },
-  mounted() {
+  async mounted() {
     this.check_backend_status_task.setAction(() => {
       system_information.fetchSystemInformation(FetchType.SystemNetworkType)
     })
+    this.loadImage()
   },
   beforeDestroy() {
     clearInterval(this.timer)
@@ -58,6 +62,11 @@ export default Vue.extend({
     formatBandwidth(bytesPerSecond: number): string {
       return formatBandwidth(bytesPerSecond)
     },
+    async loadImage() {
+      const url = (await import('@/assets/img/icons/pi.svg')).default as string
+      const response = await axios.get(url)
+      this.image = response.data
+    },
   },
 })
 </script>
@@ -71,4 +80,9 @@ export default Vue.extend({
   width: 20px;
   margin-left: -18px;
 }
+
+.pi-icon :deep(svg) {
+  width: 35px;
+  margin-bottom: -10px;
+}
 </style>

core/frontend/src/widgets/WifiNetworking.vue

@@ -2,7 +2,8 @@
   <v-card class="d-flex align-center justify-center" height="40">
     <v-card-title class="d-flex align-center">
       <span class="vertical-text mr-1">Wifi</span>
-      <img src="/img/icons/pi.svg" alt="Pi" class="pi-icon mr-1" height="30">
+      <!-- eslint-disable vue/no-v-html -->
+      <i class="pi-icon mr-1" v-html="image" />
       <div class="d-flex flex-column">
         <div class="d-flex align-center text-caption" style="margin-bottom: -5px">
           <v-icon small>
@@ -22,6 +23,7 @@
 </template>
 
 <script lang="ts">
+import axios from 'axios'
 import Vue from 'vue'
 
 import { OneMoreTime } from '@/one-more-time'
@@ -34,6 +36,7 @@ export default Vue.extend({
     return {
       timer: 0,
       check_backend_status_task: new OneMoreTime({ delay: 2000, disposeWith: this }),
+      image: '',
     }
   },
   computed: {
@@ -46,10 +49,11 @@ export default Vue.extend({
       return eth0?.download_speed ?? 0
     },
   },
-  mounted() {
+  async mounted() {
     this.check_backend_status_task.setAction(() => {
       system_information.fetchSystemInformation(FetchType.SystemNetworkType)
     })
+    this.loadImage()
   },
   beforeDestroy() {
     clearInterval(this.timer)
@@ -58,6 +62,11 @@ export default Vue.extend({
     formatBandwidth(bytesPerSecond: number): string {
       return formatBandwidth(bytesPerSecond)
     },
+    async loadImage() {
+      const url = (await import('@/assets/img/icons/pi.svg')).default as string
+      const response = await axios.get(url)
+      this.image = response.data
+    },
   },
 })
 </script>
@@ -71,4 +80,9 @@ export default Vue.extend({
   width: 20px;
   margin-left: -18px;
 }
+
+.pi-icon :deep(svg) {
+  width: 35px;
+  margin-bottom: -10px;
+}
 </style>