diff --git a/packages/shared/src/features/giveback/components/GivebackCauseCard.tsx b/packages/shared/src/features/giveback/components/GivebackCauseCard.tsx index d26496f9ffe..5e08bd1e627 100644 --- a/packages/shared/src/features/giveback/components/GivebackCauseCard.tsx +++ b/packages/shared/src/features/giveback/components/GivebackCauseCard.tsx @@ -12,6 +12,8 @@ import { OpenLinkIcon, PlusIcon, VIcon } from '../../../components/icons'; import { IconSize } from '../../../components/Icon'; import { CauseEmblem } from './CauseEmblem'; import { anchorDefaultRel } from '../../../lib/strings'; +import { useLogContext } from '../../../contexts/LogContext'; +import { LogEvent } from '../../../lib/log'; import type { ContributionCause } from '../types'; interface GivebackCauseCardProps { @@ -33,6 +35,7 @@ export const GivebackCauseCard = ({ onToggle, buttonToggle = false, }: GivebackCauseCardProps): ReactElement => { + const { logEvent } = useLogContext(); const toggle = () => onToggle(cause.id); const cardClickable = !buttonToggle; @@ -131,7 +134,13 @@ export const GivebackCauseCard = ({ href={cause.url} target="_blank" rel={anchorDefaultRel} - onClick={(event) => event.stopPropagation()} + onClick={(event) => { + event.stopPropagation(); + logEvent({ + event_name: LogEvent.ClickGivebackCause, + target_id: cause.id, + }); + }} className="group/learn relative z-1 inline-flex w-fit items-center gap-1 font-bold text-text-link underline-offset-2 typo-footnote hover:underline focus-visible:underline" > Learn more diff --git a/packages/shared/src/features/giveback/components/GivebackTabNav.spec.tsx b/packages/shared/src/features/giveback/components/GivebackTabNav.spec.tsx index 3d622905dc1..688b8f439b8 100644 --- a/packages/shared/src/features/giveback/components/GivebackTabNav.spec.tsx +++ b/packages/shared/src/features/giveback/components/GivebackTabNav.spec.tsx @@ -6,7 +6,7 @@ it('renders the tabs from the shared tab list', () => { render(); expect(screen.getByText('Take action')).toBeInTheDocument(); - expect(screen.getByText('Impact')).toBeInTheDocument(); + expect(screen.getByText('Your impact')).toBeInTheDocument(); expect(screen.getByText('Causes')).toBeInTheDocument(); expect(screen.getByText('FAQ')).toBeInTheDocument(); }); diff --git a/packages/shared/src/features/giveback/components/GivebackTabNav.tsx b/packages/shared/src/features/giveback/components/GivebackTabNav.tsx index 01890996760..4287dd8752b 100644 --- a/packages/shared/src/features/giveback/components/GivebackTabNav.tsx +++ b/packages/shared/src/features/giveback/components/GivebackTabNav.tsx @@ -11,7 +11,7 @@ interface GivebackTab { export const givebackTabs: GivebackTab[] = [ { id: 'actions', label: 'Take action' }, - { id: 'impact', label: 'Impact' }, + { id: 'impact', label: 'Your impact' }, { id: 'causes', label: 'Causes' }, { id: 'faq', label: 'FAQ' }, ]; @@ -39,8 +39,9 @@ export const GivebackTabNav = ({ className="via-accent-cabbage-default/40 pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent to-transparent" /> {/* Scrollable on narrow screens so every tab stays reachable instead of - overflowing or wrapping. */} -
+ overflowing or wrapping. Gutter matches the page column so the tabs + line up with the content below on every breakpoint. */} +
({ label: tab.label }))} active={activeLabel} diff --git a/packages/shared/src/features/giveback/hooks/useGivebackCauseSelection.spec.tsx b/packages/shared/src/features/giveback/hooks/useGivebackCauseSelection.spec.tsx index cb5cec86e7a..070096bb349 100644 --- a/packages/shared/src/features/giveback/hooks/useGivebackCauseSelection.spec.tsx +++ b/packages/shared/src/features/giveback/hooks/useGivebackCauseSelection.spec.tsx @@ -105,7 +105,9 @@ it('saves the current selection and toasts', async () => { await waitFor(() => expect(saveCausePreferences).toHaveBeenCalledWith(['c1']), ); - expect(displayToast).toHaveBeenCalledWith('Your causes are saved'); + expect(displayToast).toHaveBeenCalledWith('Your causes are saved', { + timer: 3000, + }); expect(saved).toBe(true); }); diff --git a/packages/shared/src/features/giveback/hooks/useGivebackCauseSelection.ts b/packages/shared/src/features/giveback/hooks/useGivebackCauseSelection.ts index 8a9f76dafe0..70b9fa8c5ee 100644 --- a/packages/shared/src/features/giveback/hooks/useGivebackCauseSelection.ts +++ b/packages/shared/src/features/giveback/hooks/useGivebackCauseSelection.ts @@ -92,7 +92,9 @@ export const useGivebackCauseSelection = ( const save = useCallback(async () => { try { await saveCausePreferences([...selectedIds]); - displayToast('Your causes are saved'); + // Auto-dismisses for users who keep notifications on auto-dismiss (the + // default); others have explicitly chosen to dismiss toasts themselves. + displayToast('Your causes are saved', { timer: 3000 }); return true; } catch { displayToast(labels.error.generic); diff --git a/packages/webapp/pages/giveback/index.tsx b/packages/webapp/pages/giveback/index.tsx index 0b46171a0af..58d014bf678 100644 --- a/packages/webapp/pages/giveback/index.tsx +++ b/packages/webapp/pages/giveback/index.tsx @@ -21,7 +21,7 @@ const seo: NextSeoProps = { }, ...defaultSeo, description: - 'Help daily.dev grow and we will fund good causes. Complete community actions to help unlock donations toward a shared goal.', + 'daily.dev would rather fund real-world causes than pay for ads. Take small actions to help us grow, and we turn that budget into donations to the causes you choose, at no cost to you.', nofollow: true, noindex: true, };