feat(WEB-167): update my pages layout to MVP wireframes

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -5,6 +5,7 @@ import styles from "./upcoming.module.css"
 
 import type { LangParams } from "@/types/params"
 import type { StaysProps } from "@/types/components/myPages/stays"
+import Link from "next/link"
 
 export default function UpcomingStays({
   lang,
@@ -12,10 +13,13 @@ export default function UpcomingStays({
 }: StaysProps & LangParams) {
   return (
     <section className={styles.container}>
-      <header>
+      <header className={styles.header}>
         <Title level="h2" uppercase>
           Your upcoming stays
         </Title>
+        <Link className={styles.link} href="#">
+          See all
+        </Link>
       </header>
       <section className={styles.stays}>
         {stays.map((stay) => (

components/MyPages/Blocks/UpcomingStays/upcoming.module.css

@@ -2,15 +2,23 @@
   display: grid;
   gap: 2.2rem;
   margin-right: -2rem;
-  max-width: var(--max-width);
   overflow: hidden;
 }
 
+.header {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+}
+
+.link {
+  display: none;
+}
+
 .stays {
   display: flex;
   gap: 2rem;
   overflow-x: auto;
-  padding-right: 2rem;
 
   /* Hide scrollbar IE and Edge */
   -ms-overflow-style: none;
@@ -23,8 +31,25 @@
   display: none;
 }
 
+@media screen and (max-width: 950px) {
+  .stays {
+    padding-right: 2rem;
+  }
+}
+
 @media screen and (min-width: 950px) {
   .container {
     margin-right: 0;
   }
+
+  .link {
+    color: var(--some-black-color, #111);
+    display: inline-block;
+    font-family: var(--ff-fira-sans);
+    font-size: 1.4rem;
+    font-weight: 600;
+    letter-spacing: 1.2%;
+    line-height: 140%;
+    text-decoration: none;
+  }
 }