feat: adjust select rate ui to latest design

components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx

@@ -8,6 +8,7 @@ import { getRates } from "@/components/HotelReservation/SelectRate/utils"
 import { EditIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
+import Chip from "@/components/TempDesignSystem/Chip"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -72,7 +73,7 @@ export default function SelectedRoomPanel() {
 
   return (
     <div className={styles.selectedRoomPanel}>
-      <div>
+      <div className={styles.content}>
         <Caption color="uiTextHighContrast">
           {intl.formatMessage(
             { id: "Room {roomIndex}" },
@@ -90,20 +91,22 @@ export default function SelectedRoomPanel() {
           {intl.formatMessage({ id: "night" })}
         </Body>
       </div>
-      <div className={styles.imageAndModifyButtonContainer}>
-        {images?.[0]?.imageSizes?.tiny && (
-          <div className={styles.imageContainer}>
-            <Image
-              alt={selectedRate?.roomType ?? images[0].metaData?.altText ?? ""}
-              fill
-              src={images[0].imageSizes.tiny}
-            />
-          </div>
-        )}
+      <div className={styles.imageContainer}>
+        {images?.[0]?.imageSizes?.tiny ? (
+          <Image
+            alt={selectedRate?.roomType ?? images[0].metaData?.altText ?? ""}
+            className={styles.img}
+            height={300}
+            src={images[0].imageSizes.tiny}
+            width={600}
+          />
+        ) : null}
         <div className={styles.modifyButtonContainer}>
-          <Button variant="icon" size="small" onClick={modifyRate}>
-            <EditIcon />
-            {intl.formatMessage({ id: "Modify" })}
+          <Button clean onClick={modifyRate}>
+            <Chip size="small" variant="uiTextHighContrast">
+              <EditIcon />
+              {intl.formatMessage({ id: "Modify" })}
+            </Chip>
           </Button>
         </div>
       </div>

components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css

@@ -1,50 +1,53 @@
 .selectedRoomPanel {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  display: grid;
+  grid-template-areas: "content image";
+  grid-template-columns: 1fr 190px;
   position: relative;
 }
 
-.modifyButtonContainer {
-  position: absolute;
-  right: var(--Spacing-x2);
-  bottom: var(--Spacing-x2);
+.content {
+  grid-area: content;
 }
 
 .imageContainer {
-  width: 187px;
-  height: 105px;
-  position: relative;
   border-radius: var(--Corner-radius-Small);
-  overflow: hidden;
+  display: flex;
+  grid-area: image;
 }
 
-.titleContainer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x1);
+.img {
+  border-radius: var(--Corner-radius-Small);
+  height: auto;
+  max-height: 105px;
+  object-fit: fill;
+  width: 100%;
+}
+
+.modifyButtonContainer {
+  bottom: var(--Spacing-x1);
+  position: absolute;
+  right: var(--Spacing-x1);
 }
 
 div.selectedRoomPanel p.subtitle {
   padding-bottom: var(--Spacing-x1);
 }
 
-@media (max-width: 768px) {
-  .imageContainer {
-    width: 120px;
-    height: 80px;
-  }
-
-  .imageAndModifyButtonContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
+@media screen and (max-width: 768px) {
+  .selectedRoomPanel {
     gap: var(--Spacing-x1);
+    grid-template-areas: "image" "content";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
   }
 
-  .modifyButtonContainer {
-    position: relative;
-    bottom: 0;
-    right: 0;
+  .img {
+    max-height: 300px;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .img {
+    max-height: 190px;
   }
 }