feat: use text-secondary-foreground instead of gray

web/components/Notifications/Item.vue

@@ -100,7 +100,7 @@ const reformattedTimestamp = computed<string>(() => {
         class="shrink-0 flex flex-row items-baseline justify-end gap-2 mt-1"
         :title="formattedTimestamp ?? reformattedTimestamp"
       >
-        <p class="text-gray-500 text-sm">{{ reformattedTimestamp }}</p>
+        <p class="text-secondary-foreground text-sm">{{ reformattedTimestamp }}</p>
       </div>
     </header>
 

web/components/Notifications/List.vue

@@ -80,7 +80,7 @@ async function onLoadMore() {
     <div v-if="loading" class="py-5 grid place-content-center">
       <LoadingSpinner />
     </div>
-    <div v-if="!canLoadMore" class="py-5 grid place-content-center text-gray-500">
+    <div v-if="!canLoadMore" class="py-5 grid place-content-center text-secondary-foreground">
       You've reached the end...
     </div>
   </div>

web/store/theme.ts

@@ -37,7 +37,7 @@ export const defaultColors: Record<string, ThemeVariables> = {
     '--primary': '24 100% 50%',
     '--primary-foreground': '0 0% 98%',
     '--secondary': '0 0% 14.9%',
-    '--secondary-foreground': '0 0% 98%',
+    '--secondary-foreground': '0 0% 77%',
     '--accent': '0 0% 14.9%',
     '--accent-foreground': '0 0% 98%',
     '--destructive': '0 62.8% 30.6%',
@@ -61,7 +61,7 @@ export const defaultColors: Record<string, ThemeVariables> = {
     '--primary': '24 100% 50%',
     '--primary-foreground': '0 0% 98%',
     '--secondary': '0 0% 96.1%',
-    '--secondary-foreground': '0 0% 9%',
+    '--secondary-foreground': '0 0% 45%',
     '--accent': '0 0% 96.1%',
     '--accent-foreground': '0 0% 9%',
     '--destructive': '0 84.2% 60.2%',