k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-20 22:16:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(tours): keep a kept tour's remove button in sight, dimmed

Browse Source 
It was invisible until hover or focus, so a phone or tablet had no way to
find it. It now shows dimmed and comes up fully on hover or focus.
This commit is contained in:
Maurice
2026-10-20 16:48:09 +02:00
parent f5be556c27
commit 2a40b884a1
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Tours/collection/CollectionToursSection.tsx
+3 -2
View File
@@ -48,7 +48,8 @@ function KeptTourTypeBadges({ tour }: { tour: CollectionTourItem }) {
/**
* One kept tour as a card: its grade tile with where it came from, its name
* and type, its measures and waypoints as badges, the trip it was saved from,
* and the way into a trip. Removing it sits quietly in its corner.
* and the way into a trip. Removing it sits quietly in its corner, dimmed
* but always there (a phone has no hover), raised on hover or focus.
*/
function KeptTourCard({
tour,
@@ -85,7 +86,7 @@ function KeptTourCard({
onClick={onRemove}
aria-label={t('tours.collection.remove')}
data-testid={`kept-tour-remove-${tour.id}`}
className="grid h-7 w-7 flex-none place-items-center rounded-full text-content-faint opacity-0 transition-opacity hover:bg-danger-soft hover:text-danger focus-visible:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent group-hover:opacity-100"
className="grid h-7 w-7 flex-none place-items-center rounded-full text-content-faint opacity-50 transition-opacity hover:bg-danger-soft hover:text-danger focus-visible:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent group-hover:opacity-100"
>
<Trash2 size={13} strokeWidth={2} />
</button>
client/src/components/Tours/collection/collectionTours.test.tsx
+3
View File
@@ -357,6 +357,9 @@ describe('CollectionToursSection', () => {
expect(card).toHaveTextContent('Alps');
expect(within(card).getByTestId('kept-tour-distance')).toHaveTextContent('8.2 km');
expect(within(card).getByLabelText('4 waypoints')).toBeInTheDocument();
// Dimmed, never hidden: a touch screen has no hover to bring it out.
expect(within(card).getByTestId('kept-tour-remove-4')).toHaveClass('opacity-50');
expect(within(card).getByTestId('kept-tour-remove-4')).not.toHaveClass('opacity-0');
fireEvent.click(within(card).getByTestId('kept-tour-remove-4'));
// The card's own button and the question's confirm share the name; the question's comes last.
const removeButtons = await screen.findAllByRole('button', { name: 'Remove from the collection' });