granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tweak notification modal and badge styling

Browse source 
fix phantom claims response key, add element colors to badge
This commit is contained in:
Justin Edmund 2025-12-17 20:07:29 -08:00
parent 62dd3f5cd7
commit d90d4e76bf
3 changed files with 42 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/lib/api/adapters/crew.adapter.ts
View file

@ -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
}
}

14
src/lib/components/crew/InvitationsModal.svelte
View file

@ -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">
Accept to inherit the phantom's GW scores and join date
</p>
<p class="section-description">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 {

35
src/lib/components/ui/NotificationBadge.svelte
View file

@ -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>