Added QRCodePage, DarkMode, and ScanAndDisplay

package.json

@@ -74,6 +74,7 @@
     "geoip-lite": "^1.4.2",
     "gmail-send": "^1.8.10",
     "hdkey": "^2.0.1",
+    "html-to-image": "^1.11.11",
     "html2pdf.js": "^0.10.1",
     "i": "^0.3.7",
     "is-online": "^9.0.1",
@@ -104,6 +105,7 @@
     "vue": "^2.7.14",
     "vue-chartjs": "^3.5.1",
     "vue-click-outside": "^1.1.0",
+    "vue-color-picker-wheel": "^0.4.3",
     "vue-country-flag": "^2.3.2",
     "vue-directive-tooltip": "^1.6.3",
     "vue-gtag": "^1.16.1",

src/App.vue

@@ -11,7 +11,8 @@ Description: App.vue is the main parent component of the entire client side appl
       <side-nav />
       <main
         style="min-width: 90%"
-        class="flex-grow bg-gray-100 relative h-full"
+        class="flex-grow relative h-full"
+        :class="[darkModeEnabled ? 'bg-gray-800 text-black' : 'bg-gray-100']"
       >
         <router-view class="flex-grow h-full" />
       </main>
@@ -65,6 +66,7 @@ import SideNav from '@/components/partials/SideNav.vue'
 import DappCallRequest from '@/components/web3Connect/DappCallRequest.vue'
 import KeyboardShortcuts from './components/help/KeyboardShortcuts.vue'
 import About from './views/About.vue'
+import { mapGetters } from 'vuex'
 
 // Mixins
 import toastMixins from './utils/mixins/toastMixins'
@@ -98,6 +100,7 @@ export default {
     helpModalOpen: false
   }),
   computed: {
+    ...mapGetters({ darkModeEnabled: 'userSettings/isDarkModeEnabled' }),
     user() {
       const activeUser = this.$store.state.accounts.active
       return JSON.parse(JSON.stringify(activeUser))

src/components/icons/QrCode.vue

@@ -9,6 +9,9 @@
     viewBox="0 0 512 512"
     style="enable-background: new 0 0 512 512"
     xml:space="preserve"
+    :height="height"
+    :width="width"
+    :fill="color"
   >
     <g>
       <g>
@@ -70,8 +73,18 @@
 <script>
 export default {
   props: {
-    color: String,
-    default: () => ''
+    color: {
+      type: String,
+      default: () => ''
+    },
+    height: {
+      type: String,
+      default: () => '24px'
+    },
+    width: {
+      type: String,
+      default: () => '24px'
+    }
   }
 }
 </script>

src/components/partials/NavBar.vue

@@ -1,6 +1,8 @@
 <template>
   <nav
-    class="flex justify-between items-center bg-blue-600 text-white px-5 h-16 w-100"
+    class="flex justify-between w-full items-center text-white px-5 h-16 w-100"
+    :class="[darkModeEnabled ? 'bg-gray-700' : 'bg-blue-600 ']"
+    :style="headerStyles"
   >
     <div class="flex items-center">
       <div class="mr-5">
@@ -38,18 +40,37 @@
         >Total Assets: {{ totalAssets }}</span
       >
     </div>
+    <button
+      v-tooltip="{
+        content: toggleDarkMode ? 'Disable Dark Mode' : 'Enable Dark Mode'
+      }"
+      class="tooltip-custom"
+    >
+      <toggle-button
+        v-model="toggleDarkMode"
+        :color="{ checked: 'rgb(30 41 59)', unchecked: 'rgb(148 163 184)' }"
+        :switch-color="{
+          checked: 'rgb(255 255 255)',
+          unchecked: 'rgb(21 94 117)'
+        }"
+        :sync="true"
+        :labels="false"
+      />
+    </button>
   </nav>
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
 import * as SparkMD5 from 'spark-md5'
 export default {
   name: 'NavBar',
   computed: {
     ...mapGetters({
       menuType: 'menuType',
-      totalAssetsValue: 'wallets/totalAssetsValue'
+      totalAssetsValue: 'wallets/totalAssetsValue',
+      darkModeEnabled: 'userSettings/isDarkModeEnabled',
+      getHeaderColor: 'userSettings/getHeaderColor'
     }),
     user() {
       return this.loggedUserData
@@ -65,10 +86,28 @@ export default {
     totalAssets() {
       const total = this.totalAssetsValue
       return this.formatCurrencyWithSettings(total, 2)
+    },
+    /*
+    Connected the store state for the dark mode toggle to the local component.
+    */
+    toggleDarkMode: {
+      get() {
+        return this.darkModeEnabled
+      },
+      set(value) {
+        this.setDarkMode(value)
+      }
+    },
+    /*
+    I've established a binding between the local value for the header background color and the state within the store.
+    */
+    headerStyles() {
+      return `background-color: ${this.getHeaderColor}`
     }
   },
   methods: {
     ...mapActions(['changeMenuType']),
+    ...mapMutations('userSettings', ['setDarkMode']),
     logoutUser() {
       this.$store.dispatch('accounts/logout', this.user.id)
     }

src/components/partials/SideNav.vue

@@ -1,7 +1,12 @@
 <template>
   <aside
-    :class="menuType"
-    class="flex flex-col items-stretch bg-white shadow-md border-r border-gray-300"
+    :class="[
+      menuType,
+      darkModeEnabled
+        ? 'bg-gray-800 border-gray-700'
+        : 'bg-white border-gray-300'
+    ]"
+    class="flex flex-col items-stretch shadow-md border-r"
   >
     <router-link v-ripple to="/directories">
       <span class="icon">
@@ -15,17 +20,26 @@
       </span>
       <span class="link-text">Settings</span>
     </router-link>
+
     <router-link v-ripple to="/settings/user">
       <span class="icon">
         <settings-icon :color="pathColor('settings')" />
       </span>
       <span class="link-text">Settings</span>
     </router-link>
+
+    <router-link v-ripple to="/qrcodes">
+      <span>
+        <qr-code-icon class="icon" :color="pathColor('qrcodes')" />
+      </span>
+      <span class="link-text">QRCodes</span>
+    </router-link>
   </aside>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import QrCodeIcon from '../icons/QrCode.vue'
 
 import FilesIcon from '../icons/Files.vue'
 import SettingsIcon from '../icons/Settings.vue'
@@ -36,10 +50,15 @@ export default {
   components: {
     FilesIcon,
     SettingsIcon,
-    WalletIcon
+    WalletIcon,
+    QrCodeIcon
   },
   computed: {
-    ...mapGetters(['menuType'])
+    ...mapGetters({
+      menuType: 'menuType',
+      darkModeEnabled: 'userSettings/isDarkModeEnabled',
+      getSideBarIconsColor: 'userSettings/getSideBarIconsColor'
+    })
   },
   data: () => ({
     path: ''
@@ -53,11 +72,19 @@ export default {
     this.path = this.$route.path
   },
   methods: {
+    /*
+    I've established a binding between the local value for the icons color and the state within the store.
+    */
     pathColor(path) {
-      const actualPath = this.path.split('/')[1]
-      return actualPath === `${path}`
-        ? 'rgba(49, 130, 206, var(--bg-opacity))'
-        : 'black'
+      const color = this.getSideBarIconsColor
+      if (color === '#000000') {
+        const actualPath = this.path.split('/')[1]
+        return actualPath === `${path}`
+          ? 'rgba(49, 130, 206, var(--bg-opacity))'
+          : 'black'
+      } else {
+        return color
+      }
     }
   }
 }