style upgrades

src/features/activities/components/activities-table.tsx

@@ -12,6 +12,8 @@ import {
   Pagination,
   Code,
   Alert,
+  ThemeIcon,
+  Title,
 } from "@mantine/core";
 import {
   MagnifyingGlassIcon,
@@ -20,6 +22,7 @@ import {
   CheckIcon,
   XIcon,
   ChecksIcon,
+  PulseIcon,
 } from "@phosphor-icons/react";
 import { Activity, ActivitySearchParams } from "../types";
 import { useActivities } from "../queries";
@@ -220,9 +223,14 @@ const ActivitiesResults = ({ searchParams, page, setPage, onActivityClick }: any
       </Stack>
 
       {result.items.length === 0 && (
-        <Text ta="center" c="dimmed" py="xl">
-          No activities found
-        </Text>
+        <Stack align="center" gap="md" py="xl">
+          <ThemeIcon size="xl" variant="light" radius="md">
+            <PulseIcon size={32} />
+          </ThemeIcon>
+          <Title order={3} c="dimmed">
+            No Activities Found
+          </Title>
+        </Stack>
       )}
 
       {result.totalPages > 1 && (
@@ -339,7 +347,7 @@ export const ActivitiesTable = () => {
               <Text
                 size="xs"
                 fw={sortBy.includes("created") ? 600 : 400}
-                c={sortBy.includes("created") ? "dark" : "dimmed"}
+                c={sortBy.includes("created") ? "var(--mantine-color-text)" : "dimmed"}
               >
                 Date
               </Text>
@@ -355,7 +363,7 @@ export const ActivitiesTable = () => {
               <Text
                 size="xs"
                 fw={sortBy.includes("duration") ? 600 : 400}
-                c={sortBy.includes("duration") ? "dark" : "dimmed"}
+                c={sortBy.includes("duration") ? "var(--mantine-color-text)" : "dimmed"}
               >
                 Duration
               </Text>