fix(ui): dashboard horizontal alignment

- converts border divs to hr
- fix helper text color
- donut chart text position

src/components/Charts/DonutChart.vue

@@ -61,15 +61,8 @@
         transform: `translate(${textOffsetX}px, ${textOffsetY}px)`,
       }"
     >
-      <div class="text-base text-center font-semibold grid justify-center">
+      <div class="text-center font-semibold grid justify-center">
-        <p class="text-xs text-gray-600 w-32">
+        <p class="w-32 text-xl font-bold">
-          {{
-            active !== null && sectors.length !== 0
-              ? sectors[active].label
-              : totalLabel
-          }}
-        </p>
-        <p class="w-32">
           {{
             valueFormatter(
               active !== null && sectors.length !== 0
@@ -79,6 +72,13 @@
             )
           }}
         </p>
+        <p class="text-xs text-gray-600 w-32">
+          {{
+            active !== null && sectors.length !== 0
+              ? sectors[active].label
+              : totalLabel
+          }}
+        </p>
       </div>
     </div>
   </div>

src/pages/Dashboard/Cashflow.vue

@@ -6,11 +6,11 @@
         <div class="flex text-base">
           <div class="flex items-center">
             <span class="w-3 h-3 rounded-sm inline-block bg-blue-500"></span>
-            <span class="ml-2">{{ t('Inflow') }}</span>
+            <span class="ml-2 text-gray-900">{{ t('Inflow') }}</span>
           </div>
           <div class="flex items-center ml-6">
             <span class="w-3 h-3 rounded-sm inline-block bg-gray-500"></span>
-            <span class="ml-2">{{ t('Outflow') }}</span>
+            <span class="ml-2 text-gray-900">{{ t('Outflow') }}</span>
           </div>
         </div>
         <PeriodSelector :value="period" @change="(value) => (period = value)" />

src/pages/Dashboard/Dashboard.vue

@@ -7,18 +7,14 @@
       </template>
     </PageHeader>
     <div class="mx-4">
-      <div class="border-t" />
+      <hr class="border-t" />
-      <Cashflow class="mt-6"/>
+      <Cashflow class="mt-6" />
-      <div class="border-t mt-10" />
+      <hr class="border-t mt-10" />
-      <UnpaidInvoices class="mt-10"/>
+      <UnpaidInvoices class="mt-10 ml-4 mr-4" />
-      <div class="border-t mt-10" />
+      <hr class="border-t mt-10" />
-      <div class="flex justify-between mx-auto mt-10">
+      <div class="flex justify-between mx-auto mt-10 ml-4 mr-4 gap-10">
-        <div class="w-1/2 mx-4">
+        <ProfitAndLoss class="w-1/2" />
-          <ProfitAndLoss />
+        <Expenses class="w-1/2" />
-        </div>
-        <div class="w-1/2 mx-4">
-          <Expenses />
-        </div>
       </div>
     </div>
   </div>
@@ -40,7 +36,7 @@ export default {
     Cashflow,
     UnpaidInvoices,
     ProfitAndLoss,
-    Expenses
+    Expenses,
-  }
+  },
 };
 </script>

src/pages/Dashboard/PeriodSelector.vue

@@ -5,11 +5,23 @@
         toggleDropdown,
         highlightItemUp,
         highlightItemDown,
-        selectHighlightedItem
+        selectHighlightedItem,
       }"
     >
       <div
-        class="text-sm flex hover:bg-gray-100 focus:outline-none focus:bg-gray-100 items-center px-3 py-1 rounded-md leading-relaxed cursor-pointer"
+        class="
+          text-sm
+          flex
+          focus:outline-none
+          text-gray-900
+          hover:text-gray-800
+          focus:text-gray-800
+          items-center
+          py-1
+          rounded-md
+          leading-relaxed
+          cursor-pointer
+        "
         @click="toggleDropdown()"
         tabindex="0"
         @keydown.down="highlightItemDown"
@@ -29,24 +41,24 @@ export default {
   name: 'PeriodSelector',
   props: ['value'],
   components: {
-    Dropdown
+    Dropdown,
   },
   data() {
     let options = ['This Year', 'This Quarter', 'This Month'];
     return {
-      periodOptions: options.map(option => {
+      periodOptions: options.map((option) => {
         return {
           label: option,
-          action: () => this.selectOption(option)
+          action: () => this.selectOption(option),
         };
-      })
+      }),
     };
   },
   methods: {
     selectOption(value) {
       this.$emit('change', value);
       this.$refs.dropdown.toggleDropdown(false);
-    }
+    },
-  }
+  },
 };
 </script>

src/pages/Dashboard/UnpaidInvoices.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex justify-between mx-auto">
+  <div class="flex justify-between gap-10">
     <div
-      class="w-1/2 mx-4 flex flex-col justify-between"
+      class="w-1/2  flex flex-col justify-between"
       v-for="invoice in invoices"
       :key="invoice.title"
     >
@@ -26,11 +26,11 @@
       <div>
         <div class="mt-6 flex justify-between">
           <div
-            class="text-sm"
+            class="text-sm bold"
             :class="{ 'bg-gray-200 text-gray-200 rounded': !invoice.hasData }"
           >
             {{ frappe.format(invoice.paid, 'Currency') }}
-            <span :class="{ 'text-gray-600': invoice.hasData }">{{
+            <span :class="{ 'text-gray-900': invoice.hasData }">{{
               t('Paid')
             }}</span>
           </div>
@@ -39,7 +39,7 @@
             :class="{ 'bg-gray-200 text-gray-200 rounded': !invoice.hasData }"
           >
             {{ frappe.format(invoice.unpaid, 'Currency') }}
-            <span :class="{ 'text-gray-600': invoice.hasData }">{{
+            <span :class="{ 'text-gray-900': invoice.hasData }">{{
               t('Unpaid')
             }}</span>
           </div>