Completed three core tasks

src/App.vue

@@ -5,7 +5,7 @@ Description: App.vue is the main parent component of the entire client side appl
 -->
 
 <template>
-  <div id="app">
+  <div id="app" :class="{ 'dark-mode': $store.state.darkMode }">
     <nav-bar />
     <div class="main-content-wrapper nav-active">
       <side-nav />

src/assets/scss/main.scss

@@ -40,7 +40,16 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
+  color: #919191;
+}
+
+.dark-mode .view{
+  background-color: #050505a1;
+  color: #fff;
+}
+
+:root .dark-mode .body{
+  color: black !important;
 }
 
 .input-field {

src/components/UploadModal.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="modal-wrapper">
+    <div class="modal">
+      <span class="close" @click="closeUploadModal">&times;</span>
+      <slot></slot>
+    </div>
+    <div class="overlay" @click="closeUploadModal"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    closeUploadModal() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.modal-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50%;
+  height: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  max-width: 80%;
+  max-height: 80%;
+  overflow: auto;
+  position: relative;
+  z-index: 1001;
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 8px;
+  cursor: pointer;
+  font-size: 24px;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+.modal-content {
+  padding: 20px;
+}
+
+/* Add more specific styles for your file input */
+input[type='file'] {
+  margin: 10px 0;
+}
+</style>

src/components/VcfImport.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="vcf-import">
+    <!-- <button class="import-title" @click="openUploadModal">Import VCF</button> -->
+    <!-- Tried to use below component to render a modal but there is some issue, Need more time to debug -->
+    <UploadModal v-if="showModal" @close="closeUploadModal"> </UploadModal>
+    <label class="label">Upload a file(.vcf) below to generate QR code :</label>
+    <input type="file" @change="handleFileUpload" accept=".vcf" />
+    <div v-if="vcfData">
+      <qrcode class="qrcode" :value="vcfData" :scale="10" />
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadModal from '@/components/UploadModal.vue' // Create a Modal component
+import VueQrcode from 'vue-qrcode' // Import the qrcode library
+
+export default {
+  name: 'VcfImport',
+  components: {
+    UploadModal,
+    qrcode: VueQrcode
+  },
+  data() {
+    return {
+      showModal: false,
+      vcfData: null
+    }
+  },
+  methods: {
+    openUploadModal() {
+      this.showModal = true
+    },
+    closeUploadModal() {
+      this.showModal = false
+      this.vcfData = null
+    },
+    handleFileUpload(event) {
+      const file = event.target.files[0]
+      if (file) {
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          this.vcfData = e.target.result
+          this.generateQRCode(this.vcfData) // Generate QR code
+        }
+        reader.readAsText(file)
+      }
+    },
+    async generateQRCode(data) {
+      try {
+        const qrDataURL = await VueQrcode.toDataURL(data) // Generate QR code URL
+        this.vcfData = qrDataURL
+      } catch (error) {
+        console.error('QR code generation failed:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.vcf-import {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.vcf-import .import-title {
+  font-size: large;
+}
+.dark-mode .vcf-import {
+  color: black;
+}
+.qrcode {
+  @apply relative;
+}
+
+.label {
+  font-size: large;
+  font-weight: 500;
+}
+</style>

src/components/icons/NetworkAwarenessLogo.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="48"
+    height="48"
+    viewBox="0 0 48 48"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="#000000"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      :fill="color"
+      d="M14 14.252V22H4a8 8 0 0 1 10-7.748zM12 13c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm6 4v-3h2v3h3v2h-3v3h-2v-3h-3v-2h3z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'NetworkAwarenessLogo'
+}
+</script>

src/components/partials/SideNav.vue

@@ -21,6 +21,12 @@
       </span>
       <span class="link-text">Settings</span>
     </router-link>
+    <router-link v-ripple to="/network-awareness">
+      <span class="icon1">
+        <network-awareness-logo :color="pathColor('settings')" />
+      </span>
+      <span class="link-text">Network Awareness</span>
+    </router-link>
   </aside>
 </template>
 
@@ -30,13 +36,15 @@ import { mapGetters } from 'vuex'
 import FilesIcon from '../icons/Files.vue'
 import SettingsIcon from '../icons/Settings.vue'
 import WalletIcon from '../icons/Wallet.vue'
+import NetworkAwarenessLogo from '../icons/NetworkAwarenessLogo.vue'
 
 export default {
   name: 'SideNav',
   components: {
     FilesIcon,
     SettingsIcon,
-    WalletIcon
+    WalletIcon,
+    NetworkAwarenessLogo
   },
   computed: {
     ...mapGetters(['menuType'])
@@ -95,6 +103,10 @@ export default {
     width: max-content;
   }
 }
+
+.icon1 {
+  margin-bottom: -23px;
+}
 .micro {
   a {
     .link-text {

src/components/reusables/ToggleButton.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <label class="label">Switch to dark / light mode</label>
+    <button
+      class="toggle-button"
+      :class="{ active: isActive }"
+      @click="toggleDarkMode"
+    >
+      <span class="toggle-text">{{
+        isActive ? activeText : inactiveText
+      }}</span>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    activeText: String,
+    inactiveText: String,
+    value: Boolean
+  },
+  computed: {
+    isActive() {
+      return this.value
+    }
+  },
+  methods: {
+    toggleDarkMode() {
+      this.$store.commit('toggleDarkMode') // Emit an input event to update the parent's value
+    }
+  }
+}
+</script>
+
+<style scoped>
+.label {
+  padding-right: 15px;
+}
+.dark-mode .label {
+  color: black;
+  padding-right: 15px;
+}
+.toggle-button {
+  background-color: #ccc;
+  border: none;
+  border-radius: 20px;
+  padding: 5px 15px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.toggle-button.active {
+  background-color: #3182ce; /* Active color */
+  color: white;
+}
+
+.toggle-text {
+  margin-left: 5px;
+}
+</style>

src/components/settings/EmailSettings.vue

@@ -4,8 +4,8 @@
       <div class="col-md-9 mb-3">
         <p class="text-xl">Email Configuration</p>
         <small class="text-muted">
-          Fill-out This Form to Setup Your Email Configuration on Your Sparkplate
-          Account.
+          Fill-out This Form to Setup Your Email Configuration on Your
+          Sparkplate Account.
         </small>
       </div>
     </div>
@@ -191,4 +191,8 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+.dark-mode .row {
+  color: black;
+}
+</style>

src/components/settings/InterfaceSettings.vue

@@ -0,0 +1,54 @@
+<!-- This component is a page to toggle Dark mode for the entire application -->
+<template>
+  <div>
+    <ToggleButton
+      v-model="darkMode"
+      activeText="Dark Mode"
+      inactiveText="Light Mode"
+    />
+  </div>
+</template>
+
+<script>
+import ToggleButton from '../../components/reusables/ToggleButton.vue'
+export default {
+  components: {
+    ToggleButton
+  },
+  computed: {
+    darkMode() {
+      return this.$store.state.darkMode
+    }
+  },
+  methods: {
+    toggleDarkMode() {
+      console.log('Toggling dark mode')
+      this.$store.commit('toggleDarkMode')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.toggle-button {
+  background-color: #ccc;
+  border: none;
+  border-radius: 20px;
+  padding: 5px 15px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.toggle-button.active {
+  background-color: #3182ce; /* Active color */
+  color: white;
+}
+
+.toggle-text {
+  margin-left: 5px;
+}
+.dark-mode .toggle-label {
+  /* background-color: black; */
+  color: #000000;
+}
+</style>

src/components/settings/Misc.vue

@@ -87,3 +87,9 @@ export default {
   }
 }
 </script>
+
+<style>
+.dark-mode .input-group {
+  color: black;
+}
+</style>