tweak notification modal and badge styling

fix phantom claims response key, add element colors to badge

src/lib/api/adapters/crew.adapter.ts

@@ -313,11 +313,11 @@ export class CrewAdapter extends BaseAdapter {
    * Get pending phantom claims for current user (phantoms assigned but not yet confirmed)
    */
   async getPendingPhantomClaims(options?: RequestOptions): Promise<PhantomPlayer[]> {
-    const response = await this.request<{ phantom_claims: PhantomPlayer[] }>(
+    const response = await this.request<{ phantomClaims: PhantomPlayer[] }>(
       '/pending_phantom_claims',
       options
     )
-    return response.phantom_claims
+    return response.phantomClaims
   }
 }
 

src/lib/components/crew/InvitationsModal.svelte

@@ -114,7 +114,7 @@
 </script>
 
 <Dialog bind:open>
-	<ModalHeader title="Notifications" description="Pending actions for your account" />
+	<ModalHeader title="Notifications" />
 
 	<ModalBody>
 		{#if isLoading}
@@ -133,9 +133,7 @@
 			{#if hasPhantomClaims}
 				<div class="section">
 					<h3 class="section-title">Phantom Assignments</h3>
-					<p class="section-description">
+					<p class="section-description">Accept to inherit the phantom's GW scores and join date</p>
-						Accept to inherit the phantom's GW scores and join date
-					</p>
 					<div class="notifications-list">
 						{#each phantomClaims as phantom}
 							{@const crew = phantom.crew}
@@ -187,7 +185,7 @@
 			<!-- Crew Invitations Section -->
 			{#if hasInvitations}
 				<div class="section">
-					<h3 class="section-title">Crew Invitations</h3>
+					<h3 class="section-title">Crew invites</h3>
 					<div class="notifications-list">
 						{#each invitations as invitation}
 							{@const expired = isExpired(invitation.expiresAt)}
@@ -299,6 +297,10 @@
 	}
 
 	.section {
+		display: flex;
+		flex-direction: column;
+		gap: spacing.$unit-2x;
+
 		&:not(:first-child) {
 			margin-top: spacing.$unit-3x;
 			padding-top: spacing.$unit-3x;
@@ -307,10 +309,10 @@
 	}
 
 	.section-title {
-		margin: 0 0 spacing.$unit-half 0;
 		font-size: typography.$font-regular;
 		font-weight: typography.$medium;
 		color: var(--text-primary);
+		margin: 0;
 	}
 
 	.section-description {

src/lib/components/ui/NotificationBadge.svelte

@@ -1,6 +1,8 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
+	import type { Element } from '$lib/types/api/shared'
+
 	interface Props {
 		/** Number of notifications */
 		count?: number
@@ -8,13 +10,19 @@
 		showCount?: boolean
 		/** Size variant */
 		size?: 'small' | 'medium'
+		/** Element for color styling */
+		element?: Element
 	}
 
-	let { count = 0, showCount = false, size = 'small' }: Props = $props()
+	let { count = 0, showCount = false, size = 'small', element }: Props = $props()
 </script>
 
 {#if count > 0}
-	<span class="notification-badge" class:medium={size === 'medium'} class:has-count={showCount}>
+	<span
+		class="notification-badge {element ?? ''}"
+		class:medium={size === 'medium'}
+		class:has-count={showCount}
+	>
 		{#if showCount}
 			{count > 99 ? '99+' : count}
 		{/if}
@@ -33,7 +41,7 @@
 		min-width: 8px;
 		height: 8px;
 		border-radius: 50%;
-		background: colors.$fire-text-20;
+		background: var(--button-primary-bg);
 		flex-shrink: 0;
 
 		&.medium {
@@ -56,5 +64,26 @@
 				font-size: 11px;
 			}
 		}
+
+		// Element-specific colors
+		&.wind {
+			background: var(--wind-button-bg);
+		}
+		&.fire {
+			background: var(--fire-button-bg);
+		}
+		&.water {
+			background: var(--water-button-bg);
+		}
+		&.earth {
+			background: var(--earth-button-bg);
+		}
+		&.light {
+			background: var(--light-button-bg);
+			color: black;
+		}
+		&.dark {
+			background: var(--dark-button-bg);
+		}
 	}
 </style>