feat: use text-secondary-foreground instead of gray

elibosley · elibosley · commit 0a2cf0ad75a0 · 2024-12-18T12:59:25.000-05:00
diff --git a/web/components/Notifications/Item.vue b/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>
 
diff --git a/web/components/Notifications/List.vue b/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>
diff --git a/web/store/theme.ts b/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%',

Original file line number	Diff line number	Diff line change
`@@ -100,7 +100,7 @@ const reformattedTimestamp = computed<string>(() => {`
`100`	`100`	`class="shrink-0 flex flex-row items-baseline justify-end gap-2 mt-1"`
`101`	`101`	`:title="formattedTimestamp ?? reformattedTimestamp"`
`102`	`102`	`>`
`103`		`- <p class="text-gray-500 text-sm">{{ reformattedTimestamp }}</p>`
	`103`	`+ <p class="text-secondary-foreground text-sm">{{ reformattedTimestamp }}</p>`
`104`	`104`	`</div>`
`105`	`105`	`</header>`
`106`	`106`