refactor(multi): refactored avatars and dashboard alignment.

Author: DeepKumbhare85

typescript-version/src/@core/components/cards/CardStatisticsVertical.vue

@@ -3,7 +3,6 @@ interface Props {
   title: string
   image: string
   stats: string
-  color: string
   change: number
 }
 
@@ -15,18 +14,11 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
 <template>
   <VCard>
     <VCardText class="d-flex align-center pb-4">
-      <VAvatar
-        v-if="props.image"
-        size="38"
-        :color="props.color"
-        variant="tonal"
-        rounded
+      <img
+        width="42"
+        :src="props.image"
+        alt="image"
       >
-        <VIcon
-          :icon="props.image"
-          size="24"
-        />
-      </VAvatar>
 
       <VSpacer />
 

typescript-version/src/assets/images/avatars/avatar-1.png

@@ -54,7 +54,7 @@ const upgradeBanner = computed(() => {
 
         <IconBtn
           class="me-2"
-          href="https://github.com/themeselection/master-vuetify-vuejs-admin-template-free"
+          href="https://github.com/themeselection/sneat-vuetify-vuejs-admin-template-free"
           target="_blank"
           rel="noopener noreferrer"
         >

typescript-version/src/assets/images/avatars/avatar-10.png

@@ -7,6 +7,10 @@ import AnalyticsTotalRevenue from '@/views/dashboard/AnalyticsTotalRevenue.vue'
 import AnalyticsTransactions from '@/views/dashboard/AnalyticsTransactions.vue'
 
 // 👉 Images
+import chart from '@images/cards/chart-success.png'
+import card from '@images/cards/credit-card-primary.png'
+import paypal from '@images/cards/paypal-error.png'
+import wallet from '@images/cards/wallet-info.png'
 </script>
 
 <template>
@@ -32,8 +36,7 @@ import AnalyticsTransactions from '@/views/dashboard/AnalyticsTransactions.vue'
           <CardStatisticsVertical
             v-bind="{
               title: 'Profit',
-              image: 'bx-pie-chart-alt',
-              color: 'success',
+              image: chart,
               stats: '$12,628',
               change: 72.80,
             }"
@@ -48,8 +51,7 @@ import AnalyticsTransactions from '@/views/dashboard/AnalyticsTransactions.vue'
           <CardStatisticsVertical
             v-bind="{
               title: 'Sales',
-              image: 'bx-wallet',
-              color: 'info',
+              image: wallet,
               stats: '$4,679',
               change: 28.42,
             }"
@@ -84,8 +86,7 @@ import AnalyticsTransactions from '@/views/dashboard/AnalyticsTransactions.vue'
           <CardStatisticsVertical
             v-bind=" {
               title: 'Payments',
-              image: 'bxl-paypal',
-              color: 'error',
+              image: paypal,
               stats: '$2,468',
               change: -14.82,
             }"
@@ -100,8 +101,7 @@ import AnalyticsTransactions from '@/views/dashboard/AnalyticsTransactions.vue'
           <CardStatisticsVertical
             v-bind="{
               title: 'Transactions',
-              image: 'bx-credit-card',
-              color: 'primary',
+              image: card,
               stats: '$14,857',
               change: 28.14,
             }"

typescript-version/src/assets/images/avatars/avatar-11.png

@@ -23,13 +23,15 @@ const illustrationJohn = computed(() => global.name.value === 'dark' ? illustrat
         </VCardItem>
 
         <VCardText>
-          You have done 72% 🤩 more sales today.
-          <br>
-          Check your new raising badge in your profile.
+          <span>
+            You have done 72% 🤩 more sales today.
+            <br>
+            Check your new raising badge in your profile.
+          </span>
           <br>
           <VBtn
             variant="tonal"
-            class="mt-4 mb-1"
+            class="mt-4"
             size="small"
           >
             View Badges

typescript-version/src/assets/images/avatars/avatar-12.png

@@ -243,7 +243,7 @@ const balanceData = [
         <VueApexCharts
           id="bar-chart"
           type="bar"
-          :height="345"
+          :height="336"
           :options="chartOptions.bar"
           :series="series"
         />