feat: SW-276 SW-565 Updated UI

2024-10-09 12:21:13 +02:00
parent 9dbd10afdd
commit ad42440817
10 changed files with 268 additions and 91 deletions
--- a/components/GuestsRoomsPicker/AdultSelector/index.tsx
+++ b/components/GuestsRoomsPicker/AdultSelector/index.tsx
@@ -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>
  )
 }