scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/sw-1242-tripadvisor-not-clickable (pull request #1139)

Browse Source 
fix(SW-1242): increase touch target of trip advisor icon

* fix(SW-1242): increase touch target of trip advisor icon


Approved-by: Pontus Dreij
This commit is contained in:
Niclas Edenvin
2025-01-07 12:52:23 +00:00
parent 5901cab440
commit 501c6be22a
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/HotelReservation/TripAdvisorChip/index.tsx
View File

@@ -7,9 +7,12 @@ import type { TripAdvisorProps } from "@/types/components/hotelReservation/tripA
export default function TripAdvisorChip({ rating }: TripAdvisorProps) {
return (
<div className={styles.tripAdvisor}>
<TripAdvisorIcon color="burgundy" />
<Caption color="burgundy">{rating}</Caption>
// Wrapping the chip in a transparent container with some padding to increase the touch target
<div className={styles.container}>
<div className={styles.tripAdvisor}>
<TripAdvisorIcon color="burgundy" />
<Caption color="burgundy">{rating}</Caption>
</div>
</div>
)
}

10
components/HotelReservation/TripAdvisorChip/tripAdvisorChip.module.css
View File

@@ -1,11 +1,15 @@
.container {
position: absolute;
left: 0;
top: 0;
padding: var(--Spacing-x2);
}
.tripAdvisor {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
background-color: var(--Base-Surface-Primary-light-Normal);
position: absolute;
left: 16px;
top: 16px;
padding: var(--Spacing-x-quarter) var(--Spacing-x1);
border-radius: var(--Corner-radius-Small);
}