💄 improve dashboard design for dark-mode

Author: doroudi

src/components/BarChart.vue

@@ -74,7 +74,7 @@ const series = ref([
 </script>
 
 <template>
-  <VueApexCharts type="bar" :options="chartOptions" height="430" :series="series" />
+  <VueApexCharts type="bar" :options="chartOptions" height="460" :series="series" />
 </template>
 
 <style lang="scss" scoped>

src/components/Card.vue

@@ -2,7 +2,7 @@
 defineProps({
   shadow: { type: Boolean, default: false },
   bottomBorder: { type: Boolean, default: false },
-  color: { type: String, default: '#FC0' },
+  color: { type: String, required: false },
   title: { type: String, required: false },
 })
 const slots = useSlots()
@@ -16,13 +16,13 @@ const slots = useSlots()
     <div class="card-container my-1" :class="{ shadow }">
       <div
         class="card-content bg-white dark:bg-slate-900 rounded-md shadow-lg drop-shadow-md p-3 relative z-10"
-        :class="{ 'bottom-border': bottomBorder }" :style="{ 'border-color': color }"
+        :class="{ 'bottom-border': bottomBorder }" :style="color ? { 'border-color': color } : ''"
       >
         <div v-if="slots.title">
           <slot name="title" />
         </div>
         <div v-else-if="title">
-          <h3 class="title font-bold text-dark-400">
+          <h3 class="title text-dark-400 dark:text-light-800">
             {{ title }}
           </h3>
         </div>
@@ -62,7 +62,7 @@ const slots = useSlots()
 
     .title {
       font-size:1.1rem;
-      font-weight: 600;
+      font-weight: 500;
       margin: .1rem 0.5rem 1.2rem 0.5rem;
     }
 }

src/components/Dahboard/DashboardPage.vue

@@ -40,14 +40,14 @@ function random(min: number, max: number): number {
   <div>
     <div class="flex flex-col lg:flex-row margin-outside pb-3">
       <div class="flex flex-col w-full lg:w-1/3">
-        <Card class="px-2" :title="t('dashboard.summary')">
+        <Card class="p-2" :title="t('dashboard.summary')">
           <LineChart />
         </Card>
-        <Card class="px-2" :title="t('dashboard.summary')">
+        <Card class="p-2" :title="t('dashboard.summary')">
           <DonutChart />
         </Card>
       </div>
-      <div class="w-full lg:w-2/3 px-2">
+      <div class="w-full lg:w-2/3 p-2">
         <Card :title="t('dashboard.summary')">
           <BarChart />
         </Card>

src/components/Dahboard/RecentOrders.vue

@@ -12,7 +12,7 @@ const { renderPrice, renderTag } = useRender()
 onMounted(getItems)
 
 function getItems() {
-  store.getRecentOrders(6)
+  store.getRecentOrders(7)
 }
 
 const columns: DataTableColumns<RowData> = [

src/components/DashboardCard.vue

@@ -4,7 +4,7 @@ const props = defineProps({
   value: { type: Number, required: true },
   progress: { type: Number, required: false },
   bottomBorder: { type: Boolean, required: false },
-  color: { type: String, required: false, default: '#FC0' },
+  color: { type: String, required: false },
 })
 
 const value = ref(0)
@@ -59,7 +59,7 @@ onMounted(() => {
           <h3 ref="element" class="value">
             {{ value }}
           </h3>
-          <h4 class="title">
+          <h4 class="title text-gray-800 dark:text-gray-200">
             {{ props.title }}
           </h4>
         </section>
@@ -85,7 +85,6 @@ onMounted(() => {
     .title {
       font-size: 0.9rem;
       margin-top: -5px;
-      color: #707070;
     }
   }
 }