style buttons and fix up number formatting

src/components/AdventurerDetails.vue

@@ -11,10 +11,11 @@
       <p>Prestige level: {{ adventurer.prestige }}</p>
 
       <p>Exp: {{ adventurer.exp }} / {{ adventurer.getNextLevelExpRequirement() }}</p>
-      <p>DPS: {{ adventurer.getDPS().toPrecision(2) }}</p>
+      <p>DPS: {{ formatDamage(adventurer.getDPS()) }}</p>
     </div>
     <div class="adventurer-upgrades">
       <button
+          class="button metal"
           :disabled="!adventurer.canPrestigeUp()"
           :title="!adventurer.canPrestigeUp() ? 'Adventurer needs to be at max level to prestige up' : ''"
           @click="() => {
@@ -33,9 +34,11 @@
 <script lang="ts">
 import type {Adventurer} from "@/classes/Adventurer";
 import {defineComponent, type PropType} from "vue";
+import {formatDamage} from "../classes/NumberMagic";
 
 export default defineComponent({
   name: "AdventurerDetails",
+  methods: {formatDamage},
   props: {
     adventurer: {
       type: Object as PropType<Adventurer | null>,

src/components/UpgradesList.vue

@@ -4,6 +4,7 @@
     <div class="upgrade">
       <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
       <button
+          class="button metal"
           v-if="guild.adventurerCapacity.nextLevelCost"
           :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
           @click="upgradeAdventurerCapacity()"
@@ -17,7 +18,7 @@
 <script lang="ts">
 import {Guild} from "@/classes/Guild";
 import {defineComponent, type PropType} from "vue";
-import formatGold from "../classes/NumberMagic";
+import {formatGold} from "@/classes/NumberMagic";
 
 export default defineComponent({
   name: "UpgradesList",
@@ -67,7 +68,7 @@ export default defineComponent({
     width: min(25rem, 100%);
     justify-content: center;
     align-items: center;
-    gap: 1rem;
+    gap: 0.2rem;
   }
 }
 </style>