Add avatar and ui fix

package.json

@@ -30,7 +30,8 @@
   "dependencies": {
     "@nuxt/kit": "^3.2.0",
     "@pinia/nuxt": "^0.4.3",
-    "pinia": "^2.0.23"
+    "pinia": "^2.0.23",
+    "vue-boring-avatars": "^1.3.0"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",

src/runtime/components/BitinflowFirstLevelMenu.vue

@@ -3,17 +3,24 @@
     <!-- Overlay -->
     <div
       ref="overlay"
-      class="sm:hidden hidden bg-gray-800 opacity-50 w-full min-h-screen absolute z-10"
+      class="sm:hidden hidden bg-base-800 opacity-50 w-full min-h-screen absolute z-10"
     />
 
     <!-- Header -->
-    <header class="bg-white relative shadow sm:hidden z-10">
+    <header class="bg-white text-black shadow dark:bg-base-800 dark:text-white relative shadow sm:hidden z-10">
-      <div class="container flex justify-between items-center py-4">
+      <div class="container flex justify-between items-center p-4">
+        <button @click="toggleDarkMode">
           <img
-          src="https://cdn.bitinflow.com/ui/images/brand/icon.svg"
+            src="https://cdn.bitinflow.com/ui/images/brand/icon-light.svg"
-          class="h-4"
+            class="h-4 hidden dark:block"
             alt="bitinflow"
           >
+          <img
+            src="https://cdn.bitinflow.com/ui/images/brand/icon.svg"
+            class="h-4 block dark:hidden"
+            alt="bitinflow"
+          >
+        </button>
 
         <div class="flex items-center space-x-4">
           <nuxt-link
@@ -31,11 +38,12 @@
             class="inline-block flex"
             to="/"
           >
-            <img
+            <Avatar
-              class="h-8 w-8 rounded-full"
+              :size="32"
-              alt="profile"
+              variant="beam"
-              src="/img/avatar.jpg"
+              name="John Doe"
-            >
+              :colors="colors"
+            />
           </nuxt-link>
 
           <button
@@ -101,10 +109,17 @@
 </template>
 
 <script>
+import Avatar from "vue-boring-avatars";
+
 export default {
   name: "BitinflowFirstLevelMenu",
+  components: {
+    Avatar
+  },
   data() {
     return {
+      colors: ["#59FFE8", "#00BFA5", "#00F2D1", "#26FFE1", "#8CFFEF"],
+      //colors: ["#A6FFF3", "#00352E", "#00BFA5", "#59FFE8", "#A6FFF3"],
       primaryMenu: [
         {name: 'Home', icon: 'fal fa-home', to: '/', exact: true},
         {name: 'Buckets', icon: 'fal fa-bucket', to: '/buckets', exact: false},