From 24dd3a67df2c7274ce92c549aa16ae9ed5dfd98f Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Sun, 26 Jan 2025 00:43:03 -0500
Subject: [PATCH] Update home screen card formatting

---
 src/components/CardBoxWidget.vue |  2 +-
 src/components/NumberDynamic.vue |  5 ++++-
 src/views/HomeView.vue           | 18 +++++++++++++++---
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/CardBoxWidget.vue b/src/components/CardBoxWidget.vue
index 871f320..316a65d 100644
--- a/src/components/CardBoxWidget.vue
+++ b/src/components/CardBoxWidget.vue
@@ -52,7 +52,7 @@ defineProps({
     </BaseLevel>
     <BaseLevel mobile>
       <div>
-        <h3 :class="color" class="text-lg leading-tight">
+        <h3 :class="color" class="text-lg leading-tight mb-1.5">
           {{ label }}
         </h3>
         <h1 class="text-3xl leading-tight font-semibold">
diff --git a/src/components/NumberDynamic.vue b/src/components/NumberDynamic.vue
index c92f71f..401293a 100644
--- a/src/components/NumberDynamic.vue
+++ b/src/components/NumberDynamic.vue
@@ -59,5 +59,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>{{ prefix }}{{ newValueFormatted }}{{ suffix }}</div>
+  <div>
+    {{ prefix }}{{ newValueFormatted }}
+    <span class="text-gray-300 font-medium text-2xl">{{ suffix }}</span>
+  </div>
 </template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ff8e28f..96276b0 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -131,9 +131,21 @@ function filterUserProfiles(userProfiles) {
       <div
         class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 3xl:grid-cols-6 mb-6"
       >
-        <CardBoxWidget :number="cumulativePlays" label="Cumulative Plays" />
-        <CardBoxWidget :number="userProfiles.length" label="Games Played" />
-        <CardBoxWidget :number="longestStreak" label="Longest Play Streak" />
+        <CardBoxWidget
+          :number="cumulativePlays"
+          label="Cumulative Plays"
+          suffix="plays"
+        />
+        <CardBoxWidget
+          :number="userProfiles.length"
+          label="Games Played"
+          suffix="games"
+        />
+        <CardBoxWidget
+          :number="longestStreak"
+          label="Longest Play Streak"
+          suffix="plays"
+        />
       </div>
 
       <SectionTitleLine :icon="mdiGamepad" title="Showcase" main />