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

feat: SW-276 Updated UI as per design

Browse Source
This commit is contained in:
Hrishikesh Vaipurkar
2024-10-14 08:50:55 +02:00
parent b8f7f91fb4
commit cefed89ae5
9 changed files with 97 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/GuestsRoomsPicker/ChildSelector/child-selector.module.css
View File

@@ -3,19 +3,10 @@
justify-content: space-between;
align-items: center;
}
.captionBold {
font-weight: 600;
}
.counterContainer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
}
.counterBtn {
width: 40px;
height: 40px;
}
.childInfoContainer {
display: grid;

50
components/GuestsRoomsPicker/ChildSelector/index.tsx
View File

@@ -5,11 +5,9 @@ import { useIntl } from "react-intl"
import { useGuestsRoomsStore } 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 Counter from "../Counter"
import ChildInfoSelector from "./ChildInfoSelector"
import styles from "./child-selector.module.css"
@@ -34,7 +32,7 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
age: -1,
bed: -1,
})
trigger()
trigger("rooms")
}
}
function decreaseChildrenCount(roomIndex: number) {
@@ -51,39 +49,17 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
<Caption color="uiTextHighContrast" textTransform="bold">
{childrenLabel}
</Caption>
<div className={styles.counterContainer}>
<Button
className={styles.counterBtn}
intent="elevated"
onClick={() => {
decreaseChildrenCount(roomIndex)
}}
size="small"
theme="base"
variant="icon"
wrapping={true}
disabled={children.length == 0}
>
<MinusIcon color="burgundy" />
</Button>
<Body color="textHighContrast" textAlign="center">
{children.length}
</Body>
<Button
className={styles.counterBtn}
onClick={() => {
increaseChildrenCount(roomIndex)
}}
intent="elevated"
variant="icon"
theme="base"
wrapping={true}
size="small"
disabled={children.length == 5}
>
<PlusIcon color="burgundy" />
</Button>
</div>
<Counter
count={children.length}
handleOnDecrease={() => {
decreaseChildrenCount(roomIndex)
}}
handleOnIncrease={() => {
increaseChildrenCount(roomIndex)
}}
disableDecrease={children.length == 0}
disableIncrease={children.length == 5}
/>
</section>
{children.map((child, index) => (
<ChildInfoSelector