From 82d0391ee0a07e86211fbadb35febb0f534cd6f3 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Mon, 26 Feb 2024 20:14:40 +0100
Subject: [PATCH] Improve small details

---
 src/components/main/MainActivity.vue |  2 +-
 src/components/main/MainStats.vue    | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/main/MainActivity.vue b/src/components/main/MainActivity.vue
index bff6135..7145d66 100644
--- a/src/components/main/MainActivity.vue
+++ b/src/components/main/MainActivity.vue
@@ -64,7 +64,7 @@ useIntervalFn(async () => await refresh(), 5000)
       <div class="flex items-center justify-end w-full">
         <ClientOnly>
           <p v-if="codingActivity" class="text-subtitle text-xs w-1/2">
-            Started the {{ formatDate(codingActivity.timestamps.start) }}
+            Started {{ useTimeAgo(codingActivity.timestamps.start).value }}, the {{ formatDate(codingActivity.timestamps.start) }}
           </p>
         </ClientOnly>
         <div class="flex items-center space-x-1 w-1/2 justify-end">
diff --git a/src/components/main/MainStats.vue b/src/components/main/MainStats.vue
index 7b7f688..bc0af0f 100644
--- a/src/components/main/MainStats.vue
+++ b/src/components/main/MainStats.vue
@@ -21,23 +21,23 @@ const CardUi = {
       <div v-if="stats">
         <div class="flex gap-4 items-center">
           <div class="text-md">
-            <div class="flex items-center gap-1">
+            <div class="flex items-center gap-x-1">
               <h3>Total hours:</h3>
-              <p>{{ usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) }} hours</p>
+              <p class="text-subtitle">{{ usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) }} hours</p>
             </div>
-            <div class="flex items-start gap-1 flex-wrap">
+            <div class="flex items-start gap-x-1 flex-wrap">
               <h3>Best Editors:</h3>
-              <p>
+              <p class="text-subtitle">
                 {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(', ') }}
               </p>
             </div>
-            <div class="flex items-center gap-1">
+            <div class="flex items-center gap-x-1">
               <h3>Best OS:</h3>
-              <p>{{ stats.os.data[0].name }} with {{ stats.os.data[0].percent }}%</p>
+              <p class="text-subtitle">{{ stats.os.data[0].name }} with {{ stats.os.data[0].percent }}%</p>
             </div>
-            <div class="flex items-start gap-1 flex-wrap">
+            <div class="flex items-start gap-x-1 flex-wrap">
               <h3>Top languages:</h3>
-              <p>{{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(', ') }}</p>
+              <p class="text-subtitle">{{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(', ') }}</p>
             </div>
           </div>
         </div>