next: Fixed issues with card component

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/cards/pie-chart-card.svelte

@@ -9,7 +9,9 @@
 </script>
 
 <Card.Root>
-    <Card.Title class="p-6 pb-0 text-2xl" level={2}>{title}</Card.Title>
+    <Card.Header>
+        <Card.Title class="text-2xl" level={2}>{title}</Card.Title>
+    </Card.Header>
     <Card.Content>
         <div class="w-[200px] border">
             <svg viewBox="0 0 20 20">

src/Exceptionless.Web/ClientApp/src/lib/features/events/persistent-event.ts

@@ -1,3 +1,4 @@
+// TODO: Remove this reference.
 import type { ViewProject } from '$features/projects/models';
 
 import { buildUrl } from '$shared/url';

src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte

@@ -170,9 +170,11 @@
 
 <div class="flex flex-col space-y-4">
     <Card.Root>
-        <Card.Title class="gap-x-1 p-6 pb-0 text-2xl" level={2}
-            >Events
-            <AutomaticRefreshIndicatorButton {canRefresh} refresh={loadData} /></Card.Title
+        <Card.Header>
+            <Card.Title class="text-2xl" level={2}
+                >Events
+                <AutomaticRefreshIndicatorButton {canRefresh} refresh={loadData} /></Card.Title
+            ></Card.Header
         >
         <Card.Content class="pt-4">
             <EventsDataTable bind:limit={params.limit!} isLoading={clientStatus.isLoading} rowClick={rowclick} {table}>

src/Exceptionless.Web/ClientApp/src/routes/(app)/account/+layout.svelte

@@ -19,10 +19,11 @@
     });
 </script>
 
-<Card.Root>
-    <Card.Title class="p-6 pb-0 text-2xl" level={2}>Settings</Card.Title>
-    <Card.Description class="pl-6">Manage your account settings and set e-mail preferences.</Card.Description>
-
+<Card.Root
+    ><Card.Header>
+        <Card.Title class="text-2xl" level={2}>Settings</Card.Title>
+        <Card.Description>Manage your account settings and set e-mail preferences.</Card.Description>
+    </Card.Header>
     <Separator class="mx-6 my-6 w-auto" />
 
     <Card.Content>

src/Exceptionless.Web/ClientApp/src/routes/(app)/event/[id]/+page.svelte

@@ -39,8 +39,10 @@
 </script>
 
 <div class="flex flex-col space-y-4">
-    <Card.Root>
-        <Card.Title class="p-6 pb-0 text-2xl" level={2}>Event Details</Card.Title>
+    <Card.Root
+        ><Card.Header>
+            <Card.Title class="text-2xl" level={2}>Event Details</Card.Title></Card.Header
+        >
         <Card.Content class="pt-4">
             <EventsOverview {filterChanged} id={page.params.id || ''} {handleError}></EventsOverview>
         </Card.Content>

src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte

@@ -183,9 +183,10 @@
 </script>
 
 <div class="flex flex-col space-y-4">
-    <Card.Root>
-        <Card.Title class="p-6 pb-0 text-2xl" level={2}>Issues <AutomaticRefreshIndicatorButton {canRefresh} refresh={loadData} /></Card.Title>
-        <Card.Content class="pt-4">
+    <Card.Root
+        ><Card.Header>
+            <Card.Title class="text-2xl" level={2}>Issues <AutomaticRefreshIndicatorButton {canRefresh} refresh={loadData} /></Card.Title>
+        </Card.Header><Card.Content class="pt-4">
             <EventsDataTable bind:limit={params.limit!} isLoading={clientStatus.isLoading} rowClick={rowclick} {table}>
                 {#snippet toolbarChildren()}
                     <FacetedFilter.Root changed={onFilterChanged} {filters} remove={onFilterRemoved}>

src/Exceptionless.Web/ClientApp/src/routes/(app)/routes.ts

@@ -1,9 +1,9 @@
-import BookOpen from 'lucide-svelte/icons/book-open';
-import Braces from 'lucide-svelte/icons/braces';
-import Stacks from 'lucide-svelte/icons/bug';
+import Documentation from 'lucide-svelte/icons/book-open';
+import ApiDocumentations from 'lucide-svelte/icons/braces';
+import Issues from 'lucide-svelte/icons/bug';
 import EventStream from 'lucide-svelte/icons/calendar-arrow-down';
 import Events from 'lucide-svelte/icons/calendar-days';
-import Help from 'lucide-svelte/icons/circle-help';
+import Support from 'lucide-svelte/icons/circle-help';
 import GitHub from 'lucide-svelte/icons/github';
 
 import type { NavigationItem } from '../routes';
@@ -20,7 +20,7 @@ export const routes: NavigationItem[] = [
     {
         group: 'Dashboards',
         href: '/next/issues',
-        icon: Stacks,
+        icon: Issues,
         title: 'Issues'
     },
     {
@@ -39,14 +39,14 @@ export const routes: NavigationItem[] = [
     {
         group: 'Help',
         href: 'https://exceptionless.com/docs/',
-        icon: BookOpen,
+        icon: Documentation,
         openInNewTab: true,
         title: 'Documentation'
     },
     {
         group: 'Help',
         href: 'https://github.com/exceptionless/Exceptionless/issues',
-        icon: Help,
+        icon: Support,
         openInNewTab: true,
         title: 'Support'
     },
@@ -60,7 +60,7 @@ export const routes: NavigationItem[] = [
     {
         group: 'Help',
         href: '/docs/index.html',
-        icon: Braces,
+        icon: ApiDocumentations,
         openInNewTab: true,
         title: 'API'
     },

src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte

@@ -182,8 +182,10 @@
     });
 </script>
 
-<Card.Root>
-    <Card.Title class="p-6 pb-0 text-2xl" level={2}>Event Stream</Card.Title>
+<Card.Root
+    ><Card.Header>
+        <Card.Title class="text-2xl" level={2}>Event Stream</Card.Title>
+    </Card.Header>
     <Card.Content>
         <DataTable.Root>
             <DataTable.Toolbar {table}>

src/Exceptionless.Web/ClientApp/src/routes/(auth)/logout/+page.svelte

@@ -39,7 +39,7 @@
 <Card.Root class="mx-auto max-w-sm">
     <Card.Header>
         <Logo />
-        <Card.Title class="text-center text-2xl">Log out?</Card.Title>
+        <Card.Title class="text-center text-2xl" level={2}>Log out?</Card.Title>
     </Card.Header>
     <Card.Content>
         <form onsubmit={onLogout}>

src/Exceptionless.Web/ClientApp/src/routes/status/+page.svelte

@@ -21,7 +21,7 @@
     <Card.Root class="mx-auto max-w-sm">
         <Card.Header>
             <Logo />
-            <Card.Title class="text-center text-2xl">Service Status</Card.Title>
+            <Card.Title class="text-center text-2xl" level={2}>Service Status</Card.Title>
         </Card.Header>
         <Card.Content>
             <P class="text-center text-sm">