Updated packages version

package.json

@@ -18,15 +18,15 @@
         "test:e2e:ci": "cross-env E2E_TEST=true start-test \"quasar dev\" http-get://localhost:8080 \"cypress run\""
     },
     "dependencies": {
-        "@quasar/extras": "^1.15.6",
+        "@quasar/extras": "^1.15.8",
-        "axios": "^0.21.1",
+        "axios": "^1.2.1",
         "core-js": "^3.6.5",
-        "pinia": "^2.0.24",
+        "pinia": "^2.0.28",
-        "quasar": "^2.10.2",
+        "quasar": "^2.11.1",
         "validator": "^13.7.0",
-        "vue": "^3.0.0",
+        "vue": "^3.2.45",
-        "vue-i18n": "^9.0.0",
+        "vue-i18n": "^9.2.2",
-        "vue-router": "^4.0.0"
+        "vue-router": "^4.1.6"
     },
     "devDependencies": {
         "@babel/eslint-parser": "^7.13.14",
@@ -34,13 +34,13 @@
         "@pinia/testing": "^0.0.14",
         "@quasar/app-webpack": "^3.6.2",
         "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.2.2",
-        "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-alpha.10",
+        "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-beta.5",
-        "eslint": "^8.10.0",
+        "eslint": "^8.30.0",
-        "eslint-config-prettier": "^8.1.0",
+        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-cypress": "^2.11.3",
+        "eslint-plugin-cypress": "^2.12.1",
-        "eslint-plugin-jest": "^25.2.2",
+        "eslint-plugin-jest": "^27.1.7",
-        "eslint-plugin-vue": "^8.5.0",
+        "eslint-plugin-vue": "^8.7.1",
-        "eslint-webpack-plugin": "^3.1.1",
+        "eslint-webpack-plugin": "^3.2.0",
         "jest-junit": "^13.0.0",
         "prettier": "^2.5.1"
     },

src/components/LeftMenu.vue

@@ -22,8 +22,9 @@ const props = defineProps({
     },
 });
 
-onMounted(() => {
+onMounted(async () => {
-    navigation.fetchPinned().then(getRoutes());
+    await navigation.fetchPinned();
+    getRoutes();
 });
 
 function findMatches(search, item) {

src/css/app.scss

@@ -1,11 +1,21 @@
 // app global css in SCSS form
 @import './icons.scss';
 
+.body--dark {
+    .q-card--dark {
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
+    }
+
+    .q-layout__shadow::after {
+        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24) !important;
+    }
+}
+
 .link {
     color: $primary;
-    cursor: pointer
+    cursor: pointer;
 }
 
 .link:hover {
     color: $orange-4;
-}
+}

src/pages/Dashboard/DashboardMain.vue

@@ -24,28 +24,32 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
     </q-drawer>
     <q-page-container>
         <q-page class="q-pa-md">
-            {{ $q.version }}
             <div class="row items-start wrap q-col-gutter-md q-mb-lg">
-                <div class="col-12 col-md" v-if="pinnedModules.length">
+                <div class="col-12 col-md">
                     <div class="text-h6 text-grey-8 q-mb-sm">{{ t('globals.pinnedModules') }}</div>
-                    <q-card class="row flex-container">
+                    <q-card class="row flex-container q-pa-md">
-                        <div v-for="item of pinnedModules" :key="item.title" class="row no-wrap q-pa-xs flex-item">
+                        <div class="text-grey-5" v-if="pinnedModules.length === 0">
-                            <q-btn
+                            {{ t('pinnedInfo') }}
-                                align="evenly"
-                                padding="16px"
-                                flat
-                                stack
-                                size="lg"
-                                :icon="item.icon"
-                                color="orange-6"
-                                class="col-4 button"
-                                :to="{ name: item.name }"
-                            >
-                                <div class="text-center text-primary button-text">
-                                    {{ t(item.title) }}
-                                </div>
-                            </q-btn>
                         </div>
+                        <template v-if="pinnedModules.length">
+                            <div v-for="item of pinnedModules" :key="item.title" class="row no-wrap q-pa-xs flex-item">
+                                <q-btn
+                                    align="evenly"
+                                    padding="16px"
+                                    flat
+                                    stack
+                                    size="lg"
+                                    :icon="item.icon"
+                                    color="orange-6"
+                                    class="col-4 button"
+                                    :to="{ name: item.name }"
+                                >
+                                    <div class="text-center text-primary button-text">
+                                        {{ t(item.title) }}
+                                    </div>
+                                </q-btn>
+                            </div>
+                        </template>
                     </q-card>
                 </div>
             </div>
@@ -74,3 +78,14 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
     margin-top: 5px;
 }
 </style>
+
+<i18n>
+{
+    "en": { 
+        "pinnedInfo": "Your pinned modules will be shown here..."
+    },
+    "es": {
+        "pinnedInfo": "Tus módulos fijados aparecerán aquí..."
+    }
+}
+</i18n>