feat: minor ui modernization

Author: simonwep

src/app/components/base/button/Button.vue

@@ -75,7 +75,7 @@ const classes = computed(() => [
   cursor: pointer;
   background: v-bind('theme.color.base');
   color: v-bind('theme.text.base');
-  border-radius: var(--border-radius-m);
+  border-radius: var(--border-radius-full);
   transition: all var(--transition-s);
   padding: 10px;
 

src/app/components/base/form/Form.vue

@@ -1,7 +1,7 @@
 <template>
   <form :class="$style.fields" action="#" @submit="submit">
     <slot />
-    <Button :class="$style.btn" :text="submitLabel" color="success" type="submit" />
+    <Button :class="$style.btn" :text="submitLabel" type="submit" />
   </form>
 </template>
 

src/app/components/charts/line-chart/LineChart.vue

@@ -38,6 +38,7 @@ const options = computed(
       left: '3%',
       right: '4%',
       bottom: '3%',
+      top: '35px',
       containLabel: true
     },
     xAxis: {

src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanel.vue

@@ -66,7 +66,6 @@ const element = computed(() => (props.to ? Link : 'div'));
 .summaryPanel {
   display: flex;
   justify-content: space-between;
-  gap: 2px;
   padding: 30px;
   width: 100%;
   height: 100%;

src/app/pages/dashboard/summary/Summary.vue

@@ -6,7 +6,7 @@
       :import="() => import('./widgets/charts/DevelopmentChart.vue')"
     />
 
-    <TotalsSummaryTable :title="t('page.dashboard.summary')" :income="income" :expenses="expenses" />
+    <TotalsSummaryTable :income="income" :expenses="expenses" />
     <GroupsSummaryTable :title="t('page.dashboard.income')" :groups="state.income" />
     <GroupsSummaryTable :title="t('page.dashboard.expenses')" :groups="state.expenses" />
   </div>

src/app/pages/dashboard/summary/widgets/tables/GroupsSummaryTable.vue

@@ -8,7 +8,7 @@
         :key="month"
         :class="[$style.bold, { [$style.currentMonth]: isCurrentMonth(index) }]"
       >
-        {{ month }}
+        <span>{{ month }}</span>
       </span>
       <span :class="$style.bold">{{ t('shared.total') }}</span>
       <span :class="$style.bold">{{ t('shared.average') }}</span>

src/app/pages/dashboard/summary/widgets/tables/SummaryTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.summaryTable">
-    <h1 :class="$style.title">{{ title }}</h1>
+    <h1 v-if="title" :class="$style.title">{{ title }}</h1>
 
     <div :class="$style.table">
       <slot />
@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 defineProps<{
-  title: string;
+  title?: string;
 }>();
 </script>
 
@@ -29,8 +29,8 @@ defineProps<{
 }
 
 .table {
-  padding: 10px;
-  border: 2px solid var(--app-border);
+  padding: 8px;
+  background: var(--c-dimmed-light);
   border-radius: var(--border-radius-xxl);
   overflow: auto;
 

src/app/pages/dashboard/summary/widgets/tables/TotalsSummaryTable.vue

@@ -1,14 +1,15 @@
 <template>
-  <SummaryTable :title="title">
+  <SummaryTable>
     <div :class="$style.table">
       <!-- Header -->
       <span />
       <span
         v-for="(month, index) of months"
         :key="month"
         :class="[$style.bold, { [$style.currentMonth]: isCurrentMonth(index) }]"
-        >{{ month }}</span
       >
+        <span>{{ month }}</span>
+      </span>
       <span :class="$style.bold">{{ t('shared.total') }}</span>
       <span :class="$style.bold">{{ t('shared.average') }}</span>
 
@@ -75,7 +76,6 @@ const props = withDefaults(
   defineProps<{
     income?: number[];
     expenses?: number[];
-    title: string;
   }>(),
   {
     income: () => [],

src/app/pages/dashboard/summary/widgets/tables/_shared.scss

@@ -23,8 +23,20 @@
   color: var(--theme-text-muted);
 }
 
-.currentMonth {
-  color: var(--c-primary-pure);
+.currentMonth > span {
+  color: var(--c-text-light);
+  display: inline-block;
+  position: relative;
+  z-index: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -3px -8px;
+    border-radius: 100px;
+    background: var(--c-primary);
+    z-index: -1;
+  }
 }
 
 .current {

src/app/pages/shared/BudgetGroup.vue

@@ -71,7 +71,7 @@
 
   <!-- Footer -->
   <span />
-  <Button icon="plus" textual color="success" @click="addBudget(group.id)" />
+  <Button icon="plus" textual @click="addBudget(group.id)" />
   <span style="grid-column: 3 / 16" />
   <Currency :class="[$style.meta, $style.bold]" :value="totalAmount" />
   <Currency :class="[$style.meta, $style.bold]" :value="averageAmount" />
@@ -200,15 +200,15 @@ const performAction = (action: CellMenuActionId, budgetId: string, month: number
   }
 
   &.start {
-    border-top-left-radius: var(--border-radius-m);
-    border-bottom-left-radius: var(--border-radius-m);
+    border-top-left-radius: var(--border-radius-l);
+    border-bottom-left-radius: var(--border-radius-l);
     padding-left: 8px;
     cursor: text;
   }
 
   &.end {
-    border-top-right-radius: var(--border-radius-m);
-    border-bottom-right-radius: var(--border-radius-m);
+    border-top-right-radius: var(--border-radius-l);
+    border-bottom-right-radius: var(--border-radius-l);
     padding-right: 8px;
   }
 }