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

feat: SW-276 SW-565 Updated UI

Browse Source
This commit is contained in:
Hrishikesh Vaipurkar
2024-10-09 12:21:13 +02:00
parent 9dbd10afdd
commit ad42440817
10 changed files with 268 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/GuestsRoomsPicker/AdultSelector/adult-selector.module.css
View File

@@ -1,9 +1,15 @@
.container {
display: grid;
grid-template-columns: repeat(4, auto);
display: flex;
justify-content: space-between;
align-items: center;
}
.textCenter {
text-align: center;
.counterContainer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
}
.counterBtn {
width: 40px;
height: 40px;
}

58
components/GuestsRoomsPicker/AdultSelector/index.tsx
View File

@@ -5,7 +5,9 @@ import { useIntl } from "react-intl"
import { guestsRoomsStore } from "@/stores/guests-rooms"
import { MinusIcon, PlusIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./adult-selector.module.css"
@@ -50,26 +52,42 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
return (
<section className={styles.container}>
<Caption>{adultsLabel}</Caption>
<Button
onClick={() => {
decreaseAdultsCount(roomIndex)
}}
intent="text"
size="small"
>
-
</Button>
<span className={styles.textCenter}>{adults}</span>
<Button
onClick={() => {
increaseAdultsCount(roomIndex)
}}
intent="text"
size="small"
>
+
</Button>
<Caption color="uiTextHighContrast" textTransform="bold">
{adultsLabel}
</Caption>
<div className={styles.counterContainer}>
<Button
className={styles.counterBtn}
intent="elevated"
onClick={() => {
decreaseAdultsCount(roomIndex)
}}
size="small"
theme="base"
variant="icon"
wrapping={true}
disabled={adults == 1}
>
<MinusIcon color="burgundy" />
</Button>
<Body color="textHighContrast" textAlign="center">
{adults}
</Body>
<Button
className={styles.counterBtn}
onClick={() => {
increaseAdultsCount(roomIndex)
}}
intent="elevated"
variant="icon"
theme="base"
wrapping={true}
size="small"
disabled={adults == 6}
>
<PlusIcon color="burgundy" />
</Button>
</div>
</section>
)
}