Merged in feat/SW-2407-mystay-tc-to-modal (pull request #2082)

Feat/SW-2407 mystay tc to modal

* feat: SW-2407 Moved terms in modal view for my stay

* feat: SW-2407 Updated modal to show terms for reward nights and corporate cheque stay

* feat: SW-2407 Optimised code

* feat: SW-2407 Optimised code


Approved-by: Niclas Edenvin

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/index.tsx

@@ -13,7 +13,12 @@ interface RowProps {
   title: string
 }
 
-export default function Row({ icon, text, title }: RowProps) {
+export default function Row({
+  icon,
+  text,
+  title,
+  children,
+}: React.PropsWithChildren<RowProps>) {
   return (
     <div className={styles.row}>
       <span className={styles.title}>
@@ -26,6 +31,7 @@ export default function Row({ icon, text, title }: RowProps) {
         <Typography variant="Body/Paragraph/mdRegular">
           <p>{text}</p>
         </Typography>
+        {children}
       </div>
     </div>
   )

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/row.module.css

@@ -1,7 +1,7 @@
 .row {
   display: flex;
   flex-direction: column;
-  padding: var(--Spacing-x-one-and-half) 0;
+  padding: var(--Space-x15) 0;
 }
 
 .row:last-child {
@@ -11,7 +11,7 @@
 .title {
   display: flex;
   flex-direction: row;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .title svg {
@@ -20,7 +20,9 @@
 }
 
 .content {
-  padding-left: var(--Spacing-x4);
+  display: flex;
+  align-items: center;
+  padding-left: var(--Space-x4);
 }
 
 @media (min-width: 768px) {