feat: minor ui modernization

simonwep · Feb 7, 2024 · 38d51e2 · 38d51e2
1 parent bc9d692
commit 38d51e2
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 28 deletions.
diff --git a/src/app/components/base/button/Button.vue b/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;
 

diff --git a/src/app/components/base/form/Form.vue b/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>
 

diff --git a/src/app/components/charts/line-chart/LineChart.vue b/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: {

diff --git a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanel.vue b/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%;

diff --git a/src/app/pages/dashboard/summary/Summary.vue b/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>

diff --git a/src/app/pages/dashboard/summary/widgets/tables/GroupsSummaryTable.vue b/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>

diff --git a/src/app/pages/dashboard/summary/widgets/tables/SummaryTable.vue b/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;
 

diff --git a/src/app/pages/dashboard/summary/widgets/tables/TotalsSummaryTable.vue b/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: () => [],

diff --git a/src/app/pages/dashboard/summary/widgets/tables/_shared.scss b/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 {

diff --git a/src/app/pages/shared/BudgetGroup.vue b/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;
   }
 }

diff --git a/src/app/pages/shared/Pane.vue b/src/app/pages/shared/Pane.vue
@@ -60,7 +60,7 @@ useScrollShadow(header, content, 'var(--app-scroll-box-shadow)');
 
   .title {
     display: flex;
-    align-items: end;
+    align-items: center;
     gap: 8px;
     font-size: var(--font-size-s);
     font-weight: var(--font-weight-l);

diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
@@ -59,8 +59,8 @@
     },
     "info": {
       "about": "Über Ocular",
-      "github": "Schauen dir sich dieses Projekt auf {link} an!",
-      "madeWithLove": "Entwickelt mit ❤️von Simon",
+      "github": "Schauen dir dieses Projekt auf {link} an!",
+      "madeWithLove": "Entwickelt mit ❤️ von Simon R.",
       "meta": "{version} / {date} / {sha}"
     },
     "currency": {
@@ -117,7 +117,6 @@
       "tables": "Tabellen",
       "income": "Einnahmen",
       "expenses": "Ausgaben",
-      "summary": "Zusammenfassung",
       "endingBalance": "Endsaldo",
       "header": "Jährliches Budget für {year}",
       "remainingBalance": "Verbleibendes Netto bis {year}",

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -117,7 +117,6 @@
       "tables": "Tables",
       "income": "Income",
       "expenses": "Expenses",
-      "summary": "Summary",
       "endingBalance": "Ending Balance",
       "header": "Annual budget for {year}",
       "remainingBalance": "Remaining Balance until {year}",

diff --git a/src/styles/themes/dark.scss b/src/styles/themes/dark.scss
@@ -19,6 +19,7 @@
   --c-text-light-muted: #d2d2da;
 
   --c-dimmed: #708dab;
+  --c-dimmed-light: #1b1d27;
   --c-dimmed-hover: #5d758f;
   --c-dimmed-text: var(--c-text-light);
   --c-dimmed-text-hover: var(--c-dimmed-text);
@@ -114,6 +115,7 @@
   --border-radius-xl: 8px;
   --border-radius-xxl: 16px;
   --border-radius-xxxl: 24px;
+  --border-radius-full: 1000px;
 
   --input-field-transition: var(--transition-s);
   --input-field-font-size: var(--font-size-xs);
@@ -147,9 +149,9 @@
   --grid-background-even-hover: #1b1d26;
   --grid-background-even-active: #2a2d3a;
   --grid-border-color: #131316;
-  --grid-border-radius: var(--border-radius-m);
+  --grid-border-radius: var(--border-radius-l);
 
-  --grid-header-background: #1f2733;
+  --grid-header-background: #3a428a;
   --grid-header-text: #dfe2e8;
 
   --tooltip-backdrop: var(--context-menu-backdrop);

diff --git a/src/styles/themes/light.scss b/src/styles/themes/light.scss
@@ -19,6 +19,7 @@
   --c-text-light-muted: #d2d2da;
 
   --c-dimmed: #a3aab0;
+  --c-dimmed-light: #f4f7f9;
   --c-dimmed-hover: #8f979d;
   --c-dimmed-text: var(--c-text-light);
   --c-dimmed-text-hover: var(--c-dimmed-text);
@@ -114,6 +115,7 @@
   --border-radius-xl: 8px;
   --border-radius-xxl: 16px;
   --border-radius-xxxl: 24px;
+  --border-radius-full: 1000px;
 
   --input-field-transition: var(--transition-s);
   --input-field-font-size: var(--font-size-xs);
@@ -147,9 +149,9 @@
   --grid-background-even-hover: #f5f5f7;
   --grid-background-even-active: #fafafa;
   --grid-border-color: #e4e5e6;
-  --grid-border-radius: var(--border-radius-m);
+  --grid-border-radius: var(--border-radius-l);
 
-  --grid-header-background: #272d46;
+  --grid-header-background: #1b1e2a;
   --grid-header-text: #dfe2e8;
 
   --tooltip-backdrop: var(--context-menu-backdrop);