feat(SW-350): Implemented tooltip and booking widget tablet design

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -1,24 +1,7 @@
-.options {
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-}
-
-.option {
-  display: flex;
-  gap: var(--Spacing-x-one-and-half);
-  align-items: center;
-}
-
 .infoIcon {
   stroke: var(--Base-Text-Disabled);
 }
 
-.vouchers,
-.options {
-  display: none;
-}
-
 .vouchersHeader {
   display: flex;
   gap: var(--Spacing-x-one-and-half);
@@ -28,9 +11,19 @@
   width: var(--Spacing-x3);
   height: var(--Spacing-x3);
 }
+.icon,
+.voucherRow {
+  display: none;
+}
 
 @media screen and (max-width: 767px) {
-  .input {
+  .voucherContainer {
+    padding: var(--Spacing-x2) 0 var(--Spacing-x4);
+  }
+}
+
+@media screen and (max-width: 1367px) {
+  .inputContainer {
     display: grid;
     gap: var(--Spacing-x2);
   }
@@ -49,36 +42,39 @@
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   }
 
-  .options {
-    gap: var(--Spacing-x2);
-    margin-top: var(--Spacing-x2);
-  }
-
-  .option {
-    gap: var(--Spacing-x2);
+  .button {
+    align-self: flex-end;
+    justify-content: center;
+    width: 100%;
   }
 }
 
 @media screen and (min-width: 768px) {
   .input {
     display: flex;
+    align-items: center;
+  }
+  .inputContainer {
+    display: flex;
+    flex: 2;
     gap: var(--Spacing-x2);
   }
+  .voucherContainer {
+    flex: 1;
+  }
 
   .rooms,
-  .vouchers,
   .when,
   .where {
     width: 100%;
   }
 
-  .input input[type="text"] {
+  .inputContainer input[type="text"] {
     border: none;
-    height: 24px;
+    height: var(--Spacing-x3);
   }
 
   .rooms,
-  .vouchers,
   .when {
     max-width: 240px;
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
@@ -90,30 +86,43 @@
     background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }
 
-  .vouchers {
-    max-width: 200px;
-  }
-
   .where {
     max-width: 280px;
     position: relative;
   }
 
-  .options {
-    max-width: 190px;
+  .button {
+    justify-content: center;
+    width: 118px;
   }
 }
 
-@media screen and (min-width: 1367px) {
-  .vouchers {
-    display: block;
+@media screen and (min-width: 768px) and (max-width: 1366px) {
+  .inputContainer {
+    padding: var(--Spacing-x2);
   }
-
-  .options {
+  .buttonContainer {
+    padding-right: var(--Spacing-x2);
+  }
+  .input .buttonContainer .button {
+    padding: var(--Spacing-x1);
+    width: var(--Spacing-x6);
+    height: var(--Spacing-x6);
+  }
+  .buttonText {
+    display: none;
+  }
+  .icon {
     display: flex;
   }
-  .vouchers:hover,
-  .option:hover {
-    cursor: not-allowed;
+
+  .voucherRow {
+    display: flex;
+    background: var(--Base-Surface-Primary-light-Hover);
+    border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+    padding: var(--Spacing-x2);
+  }
+  .voucherContainer {
+    display: none;
   }
 }