refactor: minor style adjustments

remove unused css module class add missing button type
simonwep · Dec 28, 2023 · 6129239 · 6129239
1 parent 5c2433c
commit 6129239
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/src/app/components/base/button/Button.vue b/src/app/components/base/button/Button.vue
@@ -31,7 +31,7 @@ const props = withDefaults(
     text?: string;
     tooltip?: string;
     type?: 'button' | 'reset' | 'submit';
-    size?: 'm' | 'l';
+    size?: 's' | 'm' | 'l';
     tooltipPosition?: Placement;
     color?: Color;
     textual?: boolean;
@@ -75,7 +75,7 @@ const classes = computed(() => [
   color: v-bind('theme.text.base');
   border-radius: var(--border-radius-m);
   transition: all var(--transition-s);
-  padding: 10px 10px;
+  padding: 10px;
 
   &.iconOnly {
     padding: 3px;
@@ -97,6 +97,14 @@ const classes = computed(() => [
     line-height: 1em;
   }
 
+  &.s {
+    padding: 6px 8px;
+
+    .text {
+      font-size: var(--font-size-xs);
+    }
+  }
+
   &.l {
     .icon {
       width: 20px;

diff --git a/src/app/components/base/toggle-button/ToggleButton.vue b/src/app/components/base/toggle-button/ToggleButton.vue
@@ -3,6 +3,7 @@
     <button
       v-for="btn of buttons"
       :key="btn.id"
+      type="button"
       :class="[$style.btn, { [$style.active]: btn.id === modelValue }]"
       @click="modelValue = btn.id"
     >

diff --git a/src/app/pages/shared/BudgetGroup.vue b/src/app/pages/shared/BudgetGroup.vue
@@ -63,7 +63,7 @@
 
   <!-- Footer -->
   <span />
-  <Button icon="plus" :class="$style.addBudgetBtn" textual color="success" @click="addBudget(group.id)" />
+  <Button icon="plus" textual color="success" @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" />

diff --git a/src/app/pages/shared/BudgetGroups.vue b/src/app/pages/shared/BudgetGroups.vue
@@ -38,7 +38,13 @@
 
     <!-- Footer -->
     <span />
-    <Button :class="$style.addGroupBtn" icon="plus" :text="t('shared.addGroup')" @click="addBudgetGroup(type)" />
+    <Button
+      :class="$style.addGroupBtn"
+      size="s"
+      icon="plus"
+      :text="t('shared.addGroup')"
+      @click="addBudgetGroup(type)"
+    />
   </div>
 </template>