refactor: refs #7283 update avatar size and color

src/components/UserPanel.vue

@@ -136,7 +136,7 @@ const isEmployee = computed(() => useRole().isEmployee());
                     @update:model-value="saveLanguage"
                     :label="t(`globals.lang['${userLocale}']`)"
                     icon="public"
-                    color="orange"
+                    color="primary"
                     false-value="es"
                     true-value="en"
                 />
@@ -145,7 +145,7 @@ const isEmployee = computed(() => useRole().isEmployee());
                     @update:model-value="saveDarkMode"
                     :label="t(`globals.darkMode`)"
                     checked-icon="dark_mode"
-                    color="orange"
+                    color="primary"
                     unchecked-icon="light_mode"
                 />
             </div>
@@ -156,7 +156,7 @@ const isEmployee = computed(() => useRole().isEmployee());
                 <VnAvatar
                     :worker-id="user.id"
                     :title="user.name"
-                    size="80px"
+                    size="xxl"
                     color="transparent"
                 />
                 <div class="text-subtitle1 q-mt-md">
@@ -170,7 +170,7 @@ const isEmployee = computed(() => useRole().isEmployee());
                 </div>
                 <QBtn
                     id="logout"
-                    color="orange"
+                    color="primary"
                     flat
                     :label="t('globals.logOut')"
                     size="sm"

src/components/ui/VnAvatar.vue

@@ -3,6 +3,7 @@ import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import { useColor } from 'src/composables/useColor';
+import { getCssVar } from 'quasar';
 
 const $props = defineProps({
     workerId: { type: Number, required: true },
@@ -20,15 +21,17 @@ const title = computed(() =>
     $props.title !== false ? $props.title || t('globals.system') : false
 );
 const showLetter = ref(false);
+const backgroundColor = computed(() => {
+    const color = $props.color || useColor(title.value);
+    return getCssVar(color) || color;
+});
 
 watch(src, () => (showLetter.value = false));
 </script>
 <template>
     <div class="column items-center">
         <QAvatar
-            :style="{
+            :style="{ backgroundColor }"
-                backgroundColor: color ? color : useColor(title),
-            }"
             v-bind="$attrs"
             :title="title !== false ? title : undefined"
         >
@@ -44,3 +47,16 @@ watch(src, () => (showLetter.value = false));
         </div>
     </div>
 </template>
+<style lang="scss" scoped>
+[size='xxl'] {
+    .q-avatar,
+    .q-img {
+        width: 80px;
+        height: 80px;
+    }
+
+    .q-img {
+        object-fit: cover;
+    }
+}
+</style>

src/components/ui/VnPaginate.vue

@@ -221,7 +221,7 @@ defineExpose({ fetch, addFilter, paginate });
     >
         <slot name="body" :rows="store.data"></slot>
         <div v-if="isLoading" class="info-row q-pa-md text-center">
-            <QSpinner color="orange" size="md" />
+            <QSpinner color="primary" size="md" />
         </div>
     </QInfiniteScroll>
 </template>

src/pages/Claim/Card/ClaimBasicData.vue

@@ -93,9 +93,9 @@ const statesFilter = {
                     <template #before>
                         <VnAvatar
                             :worker-id="data.workerFk"
-                            size="160x160"
+                            size="md"
                             :title="false"
-                            color="orange"
+                            color="primary"
                         />
                     </template>
                 </VnSelect>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -99,7 +99,7 @@ const contactChannels = ref([]);
                     <template #prepend>
                         <VnAvatar
                             :worker-id="data.salesPersonFk"
-                            color="orange"
+                            color="primary"
                             :title="false"
                         />
                     </template>

src/pages/Ticket/Card/TicketBoxing.vue

@@ -105,14 +105,14 @@ async function getVideoList(expeditionId, timed) {
                             label
                             markers
                             snap
-                            color="orange"
+                            color="primary"
                         />
                     </QItemSection>
                 </QItem>
                 <QItem v-if="lastExpedition && videoList.length">
                     <QItemSection>
                         <QSelect
-                            color="orange"
+                            color="primary"
                             v-model="slide"
                             :options="videoList"
                             :label="t('ticket.boxing.selectVideo')"

src/pages/Ticket/Card/TicketEditMana.vue

@@ -34,7 +34,7 @@ const cancel = () => {
 <template>
     <QPopupProxy ref="QPopupProxyRef">
         <div class="container">
-            <QSpinner v-if="!mana" color="orange" size="md" />
+            <QSpinner v-if="!mana" color="primary" size="md" />
             <div v-else>
                 <div class="header">Mana: {{ toCurrency(mana) }}</div>
                 <div class="q-pa-md">