From 3d96f5df58f0c5ce66973a9986fe69e3b79be98d Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Sat, 21 Jan 2023 20:08:45 +0100
Subject: [PATCH] Better boxes in v3

---
 .../src/components/dashboard/AccountChart.vue | 12 +---
 .../components/dashboard/SpendInsightBox.vue  |  2 +-
 frontend/src/layouts/MainLayout.vue           | 57 +++++++++----------
 frontend/src/pages/dashboard/Dashboard.vue    | 30 ++++++----
 4 files changed, 49 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/dashboard/AccountChart.vue b/frontend/src/components/dashboard/AccountChart.vue
index 1a24849ac7..5e0d624045 100644
--- a/frontend/src/components/dashboard/AccountChart.vue
+++ b/frontend/src/components/dashboard/AccountChart.vue
@@ -19,19 +19,9 @@
   -->
 
 <template>
-  <div class="q-mt-sm q-mr-sm">
-    <q-card bordered>
-      <q-item>
-        <q-item-section>
-          <q-item-label><strong>Bla bla accounts</strong></q-item-label>
-        </q-item-section>
-      </q-item>
-      <q-separator/>
+    <q-card flat bordered>
       <ApexChart ref="chart" :options="options" :series="series" height="350" type="line"></ApexChart>
     </q-card>
-  </div>
-  <div>
-  </div>
 </template>
 
 <script>
diff --git a/frontend/src/components/dashboard/SpendInsightBox.vue b/frontend/src/components/dashboard/SpendInsightBox.vue
index fcbd026c25..bae80cb180 100644
--- a/frontend/src/components/dashboard/SpendInsightBox.vue
+++ b/frontend/src/components/dashboard/SpendInsightBox.vue
@@ -25,7 +25,7 @@
     <q-card bordered flat>
       <q-item>
         <q-item-section>
-          <q-item-label><strong>{{ $t('firefly.left_to_spend') }} x</strong></q-item-label>
+          <q-item-label><strong>{{ $t('firefly.left_to_spend') }}</strong></q-item-label>
         </q-item-section>
       </q-item>
       <q-separator/>
diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 1199a2e95f..458d9e9be4 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -37,7 +37,7 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
 
     <q-header reveal class="bg-primary text-white">
       <q-toolbar>
-        <q-btn dense flat icon="fas fa-bars" round @click="toggleLeftDrawer"/>
+        <q-btn flat icon="fas fa-bars" round @click="toggleLeftDrawer"/>
 
         <q-toolbar-title>
           <q-avatar>
@@ -46,7 +46,6 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
           Firefly III
         </q-toolbar-title>
 
-
         <q-select
           ref="search" v-model="search" :stack-label="false" class="q-mx-xs" color="black" dark
           dense
@@ -156,9 +155,9 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
     </q-header>
     <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
       <q-scroll-area class="fit">
-        <div class="q-pt-xs">
-          <q-list :dense="true">
-            <q-item v-ripple :to="{ name: 'index' }" clickable :dense="true">
+        <div class="q-pt-md">
+          <q-list>
+            <q-item v-ripple :to="{ name: 'index' }" clickable>
               <q-item-section avatar>
                 <q-icon name="fas fa-tachometer-alt"/>
               </q-item-section>
@@ -166,7 +165,7 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
                 Dashboard
               </q-item-section>
             </q-item>
-            <q-item v-ripple :to="{ name: 'budgets.index' }" clickable :dense="true">
+            <q-item v-ripple :to="{ name: 'budgets.index' }" clickable>
               <q-item-section avatar>
                 <q-icon name="fas fa-chart-pie"/>
               </q-item-section>
@@ -174,7 +173,7 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
                 Budgets
               </q-item-section>
             </q-item>
-            <q-item v-ripple :to="{ name: 'subscriptions.index' }" clickable :dense="true">
+            <q-item v-ripple :to="{ name: 'subscriptions.index' }" clickable>
               <q-item-section avatar>
                 <q-icon name="far fa-calendar-alt"/>
               </q-item-section>
@@ -182,7 +181,7 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
                 Subscriptions
               </q-item-section>
             </q-item>
-            <q-item v-ripple :to="{ name: 'piggy-banks.index' }" clickable :dense="true">
+            <q-item v-ripple :to="{ name: 'piggy-banks.index' }" clickable>
               <q-item-section avatar>
                 <q-icon name="fas fa-piggy-bank"/>
               </q-item-section>
@@ -191,32 +190,32 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
               </q-item-section>
             </q-item>
 
-            <q-expansion-item :dense="true"
+            <q-expansion-item
               :default-opened="this.$route.name === 'transactions.index' || this.$route.name === 'transactions.show'"
               expand-separator
               icon="fas fa-exchange-alt"
               label="Transactions"
             >
-              <q-item  :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'withdrawal'} }"
+              <q-item  v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'withdrawal'} }"
                       clickable>
                 <q-item-section>
                   Withdrawals
                 </q-item-section>
               </q-item>
-              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'deposit'} }"
+              <q-item v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'deposit'} }"
                       clickable>
                 <q-item-section>
                   Deposits
                 </q-item-section>
               </q-item>
-              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'transfers'} }"
+              <q-item v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'transfers'} }"
                       clickable>
 
                 <q-item-section>
                   Transfers
                 </q-item-section>
               </q-item>
-              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'all'} }"
+              <q-item v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'all'} }"
                       clickable>
 
                 <q-item-section>
@@ -228,18 +227,18 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
             </q-expansion-item>
 
 
-            <q-expansion-item :dense="true"
+            <q-expansion-item
               default-unopened
               expand-separator
               icon="fas fa-microchip"
               label="Automation"
             >
-              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'rules.index' }" clickable>
+              <q-item v-ripple :inset-level="1" :to="{ name: 'rules.index' }" clickable>
                 <q-item-section>
                   Rules
                 </q-item-section>
               </q-item>
-              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'recurring.index' }" clickable>
+              <q-item v-ripple :inset-level="1" :to="{ name: 'recurring.index' }" clickable>
                 <q-item-section>
                   Recurring transactions
                 </q-item-section>
@@ -247,18 +246,18 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
 
             </q-expansion-item>
 
-            <q-expansion-item :dense="true"
+            <q-expansion-item
               :default-opened="this.$route.name === 'accounts.index' || this.$route.name === 'accounts.show'"
               expand-separator
               icon="fas fa-credit-card"
               label="Accounts"
             >
-              <q-item  :dense="true" v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'asset'} }" clickable>
+              <q-item  v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'asset'} }" clickable>
                 <q-item-section>
                   Asset accounts
                 </q-item-section>
               </q-item>
-              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'expense'} }" clickable>
+              <q-item v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'expense'} }" clickable>
                 <q-item-section>
                   Expense accounts
                 </q-item-section>
@@ -268,7 +267,7 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
                   Revenue accounts
                 </q-item-section>
               </q-item>
-              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'liabilities'} }"
+              <q-item v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'liabilities'} }"
                       clickable>
                 <q-item-section>
                   Liabilities
@@ -277,29 +276,29 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
 
             </q-expansion-item>
 
-            <q-expansion-item :dense="true"
+            <q-expansion-item
               default-unopened
               expand-separator
               icon="fas fa-tags"
               label="Classification"
             >
-              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'categories.index' }" clickable>
+              <q-item v-ripple :inset-level="1" :to="{ name: 'categories.index' }" clickable>
                 <q-item-section>
                   Categories
                 </q-item-section>
               </q-item>
-              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'tags.index' }" clickable>
+              <q-item v-ripple :inset-level="1" :to="{ name: 'tags.index' }" clickable>
                 <q-item-section>
                   Tags
                 </q-item-section>
               </q-item>
-              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'groups.index'}" clickable>
+              <q-item v-ripple :inset-level="1" :to="{ name: 'groups.index'}" clickable>
                 <q-item-section>
                   Groups
                 </q-item-section>
               </q-item>
             </q-expansion-item>
-            <q-item :dense="true" v-ripple :to="{ name: 'reports.index'}" clickable>
+            <q-item v-ripple :to="{ name: 'reports.index'}" clickable>
               <q-item-section avatar>
                 <q-icon name="far fa-chart-bar"/>
               </q-item-section>
@@ -313,10 +312,10 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
     </q-drawer>
 
 
-    <q-page-container class="q-ma-xs">
+    <q-page-container>
       <Alert></Alert>
       <!-- breadcrumb, page title? -->
-      <div class="q-mb-md">
+      <div class="q-ma-md">
         <div class="row">
           <div class="col-6">
             <h4 class="q-ma-none q-pa-none">
@@ -333,10 +332,10 @@ page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content so
         </div>
       </div>
 
-      <router-view/>
+      <router-view />
     </q-page-container>
 
-    <q-footer class="bg-grey-8 text-white" elevated>
+    <q-footer class="bg-grey-8 text-white" bordered>
       <q-toolbar>
         <div>
           <small>Firefly III v v6.0.0-alpha.2 &copy; James Cole, AGPL-3.0-or-later.</small>
diff --git a/frontend/src/pages/dashboard/Dashboard.vue b/frontend/src/pages/dashboard/Dashboard.vue
index d069fac80f..01e5f89368 100644
--- a/frontend/src/pages/dashboard/Dashboard.vue
+++ b/frontend/src/pages/dashboard/Dashboard.vue
@@ -19,20 +19,20 @@
   -->
 
 <template>
-  <div>
+  <q-page class="q-ma-md">
     <div class="row">
-      <div class="col q-mr-sm">
+      <div class="col-xl-4 col-lg-4 col-md-6 q-pr-sm">
         <BillInsightBox/>
       </div>
-      <div class="col q-mx-sm">
+      <div class="col-xl-4 col-lg-4 col-md-6 q-px-sm">
         <SpendInsightBox/>
       </div>
-      <div class="col q-ml-sm">
+      <div class="col-xl-4 col-lg-4 col-md-6 q-pl-sm">
         <NetWorthInsightBox/>
       </div>
     </div>
     <div class="row">
-      <div class="col">
+      <div class="col-12 q-pt-sm q-pb-sm">
         <AccountChart/>
       </div>
     </div>
@@ -75,19 +75,27 @@
         square
         vertical-actions-align="right"
       >
-        <q-fab-action :label="$t('firefly.new_budget')" :to="{ name: 'budgets.create' }" color="primary" icon="fas fa-chart-pie"
+        <q-fab-action :label="$t('firefly.new_budget')" :to="{ name: 'budgets.create' }" color="primary"
+                      icon="fas fa-chart-pie"
                       square/>
-        <q-fab-action :label="$t('firefly.new_asset_account')" :to="{ name: 'accounts.create', params: {type: 'asset'} }" color="primary" icon="far fa-money-bill-alt"
+        <q-fab-action :label="$t('firefly.new_asset_account')"
+                      :to="{ name: 'accounts.create', params: {type: 'asset'} }" color="primary"
+                      icon="far fa-money-bill-alt"
                       square/>
-        <q-fab-action :label="$t('firefly.newTransfer')" :to="{ name: 'transactions.create', params: {type: 'transfer'} }" color="primary" icon="fas fa-exchange-alt"
+        <q-fab-action :label="$t('firefly.newTransfer')"
+                      :to="{ name: 'transactions.create', params: {type: 'transfer'} }" color="primary"
+                      icon="fas fa-exchange-alt"
                       square/>
-        <q-fab-action :label="$t('firefly.newDeposit')" :to="{ name: 'transactions.create', params: {type: 'deposit'} }" color="primary" icon="fas fa-long-arrow-alt-right"
+        <q-fab-action :label="$t('firefly.newDeposit')" :to="{ name: 'transactions.create', params: {type: 'deposit'} }"
+                      color="primary" icon="fas fa-long-arrow-alt-right"
                       square/>
-        <q-fab-action :label="$t('firefly.newWithdrawal')" :to="{ name: 'transactions.create', params: {type: 'withdrawal'} }" color="primary" icon="fas fa-long-arrow-alt-left"
+        <q-fab-action :label="$t('firefly.newWithdrawal')"
+                      :to="{ name: 'transactions.create', params: {type: 'withdrawal'} }" color="primary"
+                      icon="fas fa-long-arrow-alt-left"
                       square/>
       </q-fab>
     </q-page-sticky>
-  </div>
+  </q-page>
 </template>
 
 <script>