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/ChildSelector/index.tsx
+++ b/components/GuestsRoomsPicker/ChildSelector/index.tsx
@@ -1,9 +1,13 @@
+"use client"
+
 import { useFormContext } from "react-hook-form"
 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 ChildInfoSelector from "./ChildInfoSelector"
@@ -40,31 +44,50 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
  return (
    <>
      <section className={styles.container}>
-        <Caption>{childrenLabel}</Caption>
-        <Button
-          intent="text"
-          size="small"
-          onClick={() => decreaseChildrenCount(roomIndex)}
-        >
-          -
-        </Button>
-        <span className={styles.textCenter}>{children.length}</span>
-        <Button
-          intent="text"
-          size="small"
-          onClick={() => increaseChildrenCount(roomIndex)}
-        >
-          +
-        </Button>
+        <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>
      </section>
      {children.map((child, index) => (
-        <div key={index} className={styles.childInfoContainer}>
-          <ChildInfoSelector
-            roomIndex={roomIndex}
-            index={index}
-            child={child}
-          />
-        </div>
+        <ChildInfoSelector
+          roomIndex={roomIndex}
+          index={index}
+          child={child}
+          key={index}
+        />
      ))}
    </>
  )