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) { export default function TripAdvisorChip({ rating }: TripAdvisorProps) {
return ( return (
<div className={styles.tripAdvisor}> // Wrapping the chip in a transparent container with some padding to increase the touch target
<TripAdvisorIcon color="burgundy" /> <div className={styles.container}>
<Caption color="burgundy">{rating}</Caption> <div className={styles.tripAdvisor}>
<TripAdvisorIcon color="burgundy" />
<Caption color="burgundy">{rating}</Caption>
</div>
</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 { .tripAdvisor {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
position: absolute;
left: 16px;
top: 16px;
padding: var(--Spacing-x-quarter) var(--Spacing-x1); padding: var(--Spacing-x-quarter) var(--Spacing-x1);
border-radius: var(--Corner-radius-Small); border-radius: var(--Corner-radius-Small);
} }