Stop the Monday newsletter reminder overlapping the map toolbar
The admin "It's Monday — write the drop" card was pinned at top-20 on every route, so on the map it sat on top of the top-right toolbar (Add Spot / Weather / More). It now drops below that toolbar on the map routes (top-40) while other pages keep top-20, and the dismiss button is a proper compact target.
This commit is contained in:
parent
49111e9e12
commit
51ff603670
1 changed files with 9 additions and 2 deletions
|
|
@ -6,6 +6,7 @@ import { useLocalStorage } from '@/hooks/useLocalStorage';
|
||||||
import { NEWSLETTER_ISSUES } from '@/lib/newsletterIssues';
|
import { NEWSLETTER_ISSUES } from '@/lib/newsletterIssues';
|
||||||
import { useTranslation } from '@/contexts/language';
|
import { useTranslation } from '@/contexts/language';
|
||||||
import { isAdminPubkey } from '@/lib/admins';
|
import { isAdminPubkey } from '@/lib/admins';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* How many days the "Latest Drop" pill stays visible after a new issue.
|
* How many days the "Latest Drop" pill stays visible after a new issue.
|
||||||
|
|
@ -104,6 +105,7 @@ function MondayAdminReminder() {
|
||||||
const todayKey = new Date().toISOString().slice(0, 10);
|
const todayKey = new Date().toISOString().slice(0, 10);
|
||||||
const isAdmin = isAdminPubkey(user?.pubkey);
|
const isAdmin = isAdminPubkey(user?.pubkey);
|
||||||
const alreadyDismissedToday = dismissed === todayKey;
|
const alreadyDismissedToday = dismissed === todayKey;
|
||||||
|
const isMapPage = location.pathname === '/' || location.pathname === '/map';
|
||||||
|
|
||||||
if (
|
if (
|
||||||
!isAdmin ||
|
!isAdmin ||
|
||||||
|
|
@ -116,7 +118,12 @@ function MondayAdminReminder() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed top-20 md:top-20 right-4 z-50 max-w-xs animate-in slide-in-from-right-4 duration-300">
|
<div className={cn(
|
||||||
|
'fixed right-4 z-50 max-w-[calc(100vw-2rem)] w-80 animate-in slide-in-from-right-4 duration-300',
|
||||||
|
// On the map the right-hand toolbar (Add Spot / Weather / More) sits at the
|
||||||
|
// top, so drop the card below it; elsewhere top-20 clears the header.
|
||||||
|
isMapPage ? 'top-40' : 'top-20',
|
||||||
|
)}>
|
||||||
<div className="bg-black/98 border-2 border-[#ccff00]/60 rounded-2xl shadow-2xl shadow-[#ccff00]/10 p-4">
|
<div className="bg-black/98 border-2 border-[#ccff00]/60 rounded-2xl shadow-2xl shadow-[#ccff00]/10 p-4">
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<div className="w-8 h-8 rounded-xl bg-[#ccff00]/15 flex items-center justify-center flex-shrink-0">
|
<div className="w-8 h-8 rounded-xl bg-[#ccff00]/15 flex items-center justify-center flex-shrink-0">
|
||||||
|
|
@ -142,7 +149,7 @@ function MondayAdminReminder() {
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => setDismissed(todayKey)}
|
onClick={() => setDismissed(todayKey)}
|
||||||
className="flex-shrink-0 text-gray-600 hover:text-gray-400 transition-colors"
|
className="min-h-0 min-w-0 flex-shrink-0 text-gray-600 hover:text-gray-400 transition-colors"
|
||||||
aria-label={t('walletUi.newsletter.dismissReminder')}
|
aria-label={t('walletUi.newsletter.dismissReminder')}
|
||||||
>
|
>
|
||||||
<X className="h-4 w-4" />
|
<X className="h-4 w-4" />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue