fix(SW-451): Fixed some of the ui comments

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css

@@ -1,6 +1,11 @@
+.priceList {
+  margin: 0;
+}
+
 .priceRow {
   display: flex;
   justify-content: space-between;
+  align-items: flex-end;
   padding: var(--Spacing-x-quarter) 0;
 }
 

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css

@@ -3,6 +3,7 @@
   border-radius: var(--Corner-radius-Large);
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
   background-color: var(--Base-Surface-Secondary-light-Normal);
+  border: 1px solid var(--Base-Surface-Secondary-light-Normal);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -22,6 +23,13 @@
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
 .checkIcon {
+  width: 24px;
+  height: 24px;
+  border-radius: 100px;
+  background-color: var(--UI-Input-Controls-Fill-Selected);
+  border: 2px solid var(--Base-Border-Inverted);
+  justify-content: center;
+  align-items: center;
   display: none;
 }
 input[type="radio"]:checked + .card {
@@ -29,7 +37,7 @@ input[type="radio"]:checked + .card {
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
 input[type="radio"]:checked + .card .checkIcon {
-  display: block;
+  display: flex;
   position: absolute;
   top: -10px;
   right: -10px;
@@ -40,12 +48,6 @@ input[type="radio"]:checked + .card .checkIcon {
   gap: var(--Spacing-x-half);
 }
 
-.header .infoIcon,
-.header .infoIcon path {
-  stroke: var(--UI-Text-Medium-contrast);
-  fill: transparent;
-}
-
 .button {
   background: none;
   border: none;
@@ -53,7 +55,7 @@ input[type="radio"]:checked + .card .checkIcon {
   grid-area: chevron;
   height: 100%;
   justify-self: flex-end;
-  padding: 0;
+  padding: 1px 0 0 0;
 }
 
 .popover {

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx

@@ -1,8 +1,8 @@
 "use client"
-import { useState } from "react"
+import { useRef, useState } from "react"
 import { Button, DialogTrigger } from "react-aria-components"
 
-import { CheckCircleIcon, InfoCircleIcon } from "@/components/Icons"
+import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import PricePopover from "./Popover"
@@ -25,6 +25,7 @@ export default function FlexibilityOption({
 }: FlexibilityOptionProps) {
   const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+  let triggerRef = useRef<HTMLButtonElement>(null)
 
   function setRef(node: Element | null) {
     if (node) {
@@ -36,7 +37,7 @@ export default function FlexibilityOption({
     return (
       <div className={styles.disabledCard}>
         <div className={styles.header}>
-          <InfoCircleIcon className={styles.infoIcon} />
+          <InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
           <Caption color="disabled">{name}</Caption>
           <Caption color="disabled">({paymentTerm})</Caption>
         </div>
@@ -59,6 +60,13 @@ export default function FlexibilityOption({
     handleSelectRate(rate)
   }
 
+  function togglePopover() {
+    console.log("Toggle Popover called")
+    setIsPopoverOpen((prevState) => !prevState)
+  }
+
+  console.log(isPopoverOpen)
+
   return (
     <label>
       <input
@@ -69,48 +77,52 @@ export default function FlexibilityOption({
       />
       <div className={styles.card}>
         <div className={styles.header} ref={setRef}>
-          <DialogTrigger>
-            <Button
-              aria-label="Help"
-              className={styles.button}
-              onPress={() => setIsPopoverOpen(true)}
-            >
-              <InfoCircleIcon className={styles.infoIcon} />
-            </Button>
-            <PricePopover
-              placement="bottom"
-              className={styles.popover}
-              isNonModal
-              shouldFlip={false}
-              shouldUpdatePosition={false}
-              /**
-               * react-aria uses portals to render Popover in body
-               * unless otherwise specified. We need it to be contained
-               * by this component to both access css variables assigned
-               * on the container as well as to not overflow it at any time.
-               */
-              UNSTABLE_portalContainer={rootDiv}
-              isOpen={isPopoverOpen}
-              onOpenChange={setIsPopoverOpen}
+          <Button
+            aria-label="Help"
+            className={styles.button}
+            onPress={togglePopover}
+            ref={triggerRef}
+          >
+            <InfoCircleIcon
+              width={16}
+              height={16}
+              color="uiTextMediumContrast"
+            />
+          </Button>
+          <PricePopover
+            placement="bottom"
+            className={styles.popover}
+            isNonModal
+            shouldFlip={false}
+            shouldUpdatePosition={false}
+            /**
+             * react-aria uses portals to render Popover in body
+             * unless otherwise specified. We need it to be contained
+             * by this component to both access css variables assigned
+             * on the container as well as to not overflow it at any time.
+             */
+            UNSTABLE_portalContainer={rootDiv}
+            triggerRef={triggerRef}
+            isOpen={isPopoverOpen}
+            onOpenChange={setIsPopoverOpen}
+          >
+            <Caption
+              color="uiTextHighContrast"
+              type="bold"
+              className={styles.popoverHeading}
             >
+              {name}
+            </Caption>
+            {priceInformation?.map((info) => (
               <Caption
+                key={info}
                 color="uiTextHighContrast"
-                type="bold"
-                className={styles.popoverHeading}
+                className={styles.popoverText}
               >
-                {name}
+                {info}
               </Caption>
-              {priceInformation?.map((info) => (
-                <Caption
-                  key={info}
-                  color="uiTextHighContrast"
-                  className={styles.popoverText}
-                >
-                  {info}
-                </Caption>
-              ))}
-            </PricePopover>
-          </DialogTrigger>
+            ))}
+          </PricePopover>
           <Caption color="uiTextHighContrast">{name}</Caption>
           <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
         </div>
@@ -119,13 +131,10 @@ export default function FlexibilityOption({
           memberPrice={memberPrice}
           petRoomPackage={petRoomPackage}
         />
-        <CheckCircleIcon
-          color="blue"
-          className={styles.checkIcon}
-          width={24}
-          height={24}
-          stroke="white"
-        />
+
+        <div className={styles.checkIcon}>
+          <CheckIcon color="white" height="16" width="16" />
+        </div>
       </div>
     </label>
   )