From 496c85e6e55b73e6800c795ee2ce9a1e2edb6363 Mon Sep 17 00:00:00 2001 From: Maurice Date: Fri, 6 Nov 2026 12:52:28 +0100 Subject: [PATCH] feat(mobile): one shape for the atlas header buttons Planned was a label with a switch in a pill of its own beside the full-width wishlist button, and with Dawarich on the row grew cramped. Wishlist, Dawarich and Planned are now buttons of one shape, equal width and the phone shell's glass; Planned fills while the planned countries show. --- client/src/mobile/screens/atlas/MAtlas.tsx | 35 ++++++++++++------- .../tests/unit/mobile/atlas/MAtlas.test.tsx | 9 ++--- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/client/src/mobile/screens/atlas/MAtlas.tsx b/client/src/mobile/screens/atlas/MAtlas.tsx index b505ea67f..cb3f07f78 100644 --- a/client/src/mobile/screens/atlas/MAtlas.tsx +++ b/client/src/mobile/screens/atlas/MAtlas.tsx @@ -1,6 +1,6 @@ import { useEffect, useMemo, useState } from 'react' import { useSearchParams } from 'react-router' -import { X } from 'lucide-react' +import { CalendarClock, X } from 'lucide-react' import { useAtlas } from '../../../pages/atlas/useAtlas' import MIconBtn from '../../components/MIconBtn' import MSheet from '../../components/MSheet' @@ -9,13 +9,16 @@ import MAtlasStatsCard from './MAtlasStatsCard' import MAtlasSearch from './MAtlasSearch' import MAtlasCountryPopup from './MAtlasCountryPopup' import MAtlasBucketSheet from './MAtlasBucketSheet' -import MToggle from '../../components/MToggle' import DawarichIcon from '../../../components/shared/DawarichIcon' import DawarichAtlasDialog from '../../../components/Dawarich/DawarichAtlasDialog' import { useAddonStore } from '../../../store/addonStore' import { countryStatus } from '../../../pages/atlas/atlasModel' import AtlasCountryPlaces from '../../../components/Atlas/AtlasCountryPlaces' +/** The atlas header's buttons: one shape, equal widths, the phone shell's glass. */ +const HEADER_BUTTON = 'flex h-[38px] min-w-0 flex-1 items-center justify-center gap-2 rounded-full border px-3 text-[0.78125rem] font-bold transition-transform active:scale-[.97]' +const HEADER_IDLE = 'border-[color:var(--m-gbr)] bg-[color:var(--m-glass)] text-m-ink shadow-[0_5px_12px_-8px_rgba(0,0,0,.18)] backdrop-blur-[24px] backdrop-saturate-[1.7]' + const removeBtnCls = 'mt-4 w-full rounded-full bg-[rgba(214,39,59,.12)] py-[11px] text-center text-[0.8125rem] font-bold text-[color:var(--m-st-danger)]' // theme-lint-disable — fixed status-danger tint /** @@ -121,7 +124,7 @@ export default function MAtlas() { @@ -134,20 +137,28 @@ export default function MAtlas() { type="button" onClick={() => setDawarichOpen(true)} aria-label={t('dawarich.title')} - className="flex h-[38px] min-w-0 flex-1 items-center justify-center gap-2 rounded-full border border-[color:var(--m-gbr)] bg-[color:var(--m-sheet)] px-3 shadow-[0_5px_12px_-8px_rgba(0,0,0,.18)]" + className={`${HEADER_BUTTON} ${HEADER_IDLE}`} > - - + + - {t('dawarich.title')} + {t('dawarich.title')} )} - {/* Only worth the space once there is something planned to reveal. */} + {/* Only worth the space once there is something planned to reveal. A + button of the same shape as its neighbours, filled while the planned + countries show, rather than a label with a switch in a pill of its own. */} {plannedCount > 0 && ( -
- {t('atlas.planned')} - togglePlanned()} ariaLabel={t('atlas.showPlanned')} /> -
+ )} diff --git a/client/tests/unit/mobile/atlas/MAtlas.test.tsx b/client/tests/unit/mobile/atlas/MAtlas.test.tsx index 159d61aa7..b16832df5 100644 --- a/client/tests/unit/mobile/atlas/MAtlas.test.tsx +++ b/client/tests/unit/mobile/atlas/MAtlas.test.tsx @@ -225,11 +225,11 @@ describe('MAtlas', () => { it('FE-MOB-ATLASSCR-017: the planned pill stays away while nothing is planned', () => { render(); - expect(screen.queryByRole('switch')).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: 'atlas.showPlanned' })).not.toBeInTheDocument(); expect(screen.queryByText('atlas.planned')).not.toBeInTheDocument(); }); - it('FE-MOB-ATLASSCR-018: a planned country brings up the pill and its switch flips the layer', () => { + it('FE-MOB-ATLASSCR-018: a planned country brings up a header button that flips the layer', () => { const atlas = setAtlas({ data: buildAtlasData({ stats: { totalTrips: 4, totalPlaces: 21, totalCountries: 7, totalDays: 30, totalCities: 9, totalCountriesPlanned: 2 }, @@ -238,8 +238,9 @@ describe('MAtlas', () => { render(); expect(screen.getByText('atlas.planned')).toBeInTheDocument(); - const toggle = screen.getByRole('switch', { name: 'atlas.showPlanned' }); - expect(toggle).toHaveAttribute('aria-checked', 'false'); + // A button of the same shape as the wishlist one, pressed while the layer shows. + const toggle = screen.getByRole('button', { name: 'atlas.showPlanned' }); + expect(toggle).toHaveAttribute('aria-pressed', 'false'); fireEvent.click(toggle); expect(atlas.togglePlanned).toHaveBeenCalled();