From 8276b313cd50fd64c8725450908f2a2e7441de1e Mon Sep 17 00:00:00 2001
From: Arti M <arti.mathanda@ably.com>
Date: Wed, 12 Jul 2023 14:53:42 +0100
Subject: [PATCH] fix: Update styles for Coming Soon section on xs

---
 demo/app/index.html | 70 ++++++++++++++++++++++++---------------------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/demo/app/index.html b/demo/app/index.html
index 6fec574a..b92af3d9 100644
--- a/demo/app/index.html
+++ b/demo/app/index.html
@@ -284,39 +284,43 @@ <h4>Coming Soon</h4>
         </a>
       </div>
       <!-- show only on xs and sm -->
-      <div class="p-10 xs:flex md:hidden">
-        <aside
-          id="coming-soon"
-          class="backdrop-blur-ably-xs justify-center bg-ably-light-grey bg-opacity-80 rounded-2xl border"
-        >
-          <div class="flex flex-col relative mx-8 my-3">
-            <div class="flex flex-row justify-center items-start font-medium text-md h-[50px] gap-2">
-              <svg
-                class="relative"
-                width="24"
-                height="24"
-                viewBox="0 0 25 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M6.225 22.575C5.57875 22.575 5.02552 22.3449 4.5653 21.8847C4.1051 21.4245 3.875 20.8712 3.875 20.225V9.825C3.875 9.17187 4.1051 8.61275 4.5653 8.14765C5.02552 7.68255 5.57875 7.45 6.225 7.45H7.475V5.6C7.475 4.18017 7.96138 2.97521 8.93415 1.98512C9.9069 0.995042 11.0944 0.5 12.4966 0.5C13.8989 0.5 15.0875 0.995042 16.0625 1.98512C17.0375 2.97521 17.525 4.18017 17.525 5.6V7.45H18.775C19.4281 7.45 19.9872 7.68255 20.4524 8.14765C20.9174 8.61275 21.15 9.17187 21.15 9.825V20.225C21.15 20.8712 20.9174 21.4245 20.4524 21.8847C19.9872 22.3449 19.4281 22.575 18.775 22.575H6.225ZM6.225 20.225H18.775V9.825H6.225V20.225ZM12.5042 16.95C13.0347 16.95 13.4875 16.7664 13.8625 16.3992C14.2375 16.032 14.425 15.5906 14.425 15.075C14.425 14.575 14.2361 14.1208 13.8583 13.7125C13.4805 13.3042 13.0263 13.1 12.4958 13.1C11.9653 13.1 11.5125 13.3042 11.1375 13.7125C10.7625 14.1208 10.575 14.5792 10.575 15.0875C10.575 15.5958 10.7639 16.0333 11.1417 16.4C11.5195 16.7667 11.9737 16.95 12.5042 16.95ZM9.825 7.45H15.175V5.60577C15.175 4.82692 14.9196 4.17708 14.4088 3.65625C13.898 3.13542 13.2647 2.875 12.5088 2.875C11.7529 2.875 11.1167 3.13542 10.6 3.65625C10.0833 4.17708 9.825 4.82692 9.825 5.60577V7.45Z"
-                  fill="#03020D"
-                />
-              </svg>
-              <h4>Coming Soon</h4>
-            </div>
-            <p class="text-center">We are incrementally rolling out new features in the multiplayer space library.</p>
-            <div class="flex justify-center">
-              <a
-                class="rounded-md bg-ably-black px-[20px] py-[11px] mt-3 text-white font-medium"
-                href="https://ably.com/sign-up"
-              >
-                Sign Up for Early Access
-              </a>
+      <div class="p-10 xs:flex xs:justify-center md:hidden">
+        <div class="xs:max-w-xs">
+          <aside
+            id="coming-soon"
+            class="backdrop-blur-ably-xs justify-center bg-ably-light-grey bg-opacity-80 rounded-2xl border"
+          >
+            <div class="flex flex-col relative mx-8 my-3">
+              <div class="flex flex-row justify-center items-start font-medium text-md h-[50px] gap-2">
+                <svg
+                  class="relative"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 25 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6.225 22.575C5.57875 22.575 5.02552 22.3449 4.5653 21.8847C4.1051 21.4245 3.875 20.8712 3.875 20.225V9.825C3.875 9.17187 4.1051 8.61275 4.5653 8.14765C5.02552 7.68255 5.57875 7.45 6.225 7.45H7.475V5.6C7.475 4.18017 7.96138 2.97521 8.93415 1.98512C9.9069 0.995042 11.0944 0.5 12.4966 0.5C13.8989 0.5 15.0875 0.995042 16.0625 1.98512C17.0375 2.97521 17.525 4.18017 17.525 5.6V7.45H18.775C19.4281 7.45 19.9872 7.68255 20.4524 8.14765C20.9174 8.61275 21.15 9.17187 21.15 9.825V20.225C21.15 20.8712 20.9174 21.4245 20.4524 21.8847C19.9872 22.3449 19.4281 22.575 18.775 22.575H6.225ZM6.225 20.225H18.775V9.825H6.225V20.225ZM12.5042 16.95C13.0347 16.95 13.4875 16.7664 13.8625 16.3992C14.2375 16.032 14.425 15.5906 14.425 15.075C14.425 14.575 14.2361 14.1208 13.8583 13.7125C13.4805 13.3042 13.0263 13.1 12.4958 13.1C11.9653 13.1 11.5125 13.3042 11.1375 13.7125C10.7625 14.1208 10.575 14.5792 10.575 15.0875C10.575 15.5958 10.7639 16.0333 11.1417 16.4C11.5195 16.7667 11.9737 16.95 12.5042 16.95ZM9.825 7.45H15.175V5.60577C15.175 4.82692 14.9196 4.17708 14.4088 3.65625C13.898 3.13542 13.2647 2.875 12.5088 2.875C11.7529 2.875 11.1167 3.13542 10.6 3.65625C10.0833 4.17708 9.825 4.82692 9.825 5.60577V7.45Z"
+                    fill="#03020D"
+                  />
+                </svg>
+                <h4 class="text-md">Coming Soon</h4>
+              </div>
+              <p class="text-center text-xs">
+                We are incrementally rolling out new features in the multiplayer space library.
+              </p>
+              <div class="flex justify-center">
+                <a
+                  class="rounded-md bg-ably-black px-[15px] py-2 mt-3 text-white font-normal text-xs"
+                  href="https://ably.com/sign-up"
+                >
+                  Sign Up for Early Access
+                </a>
+              </div>
             </div>
-          </div>
-        </aside>
+          </aside>
+        </div>
       </div>
 
       <section
@@ -551,7 +555,7 @@ <h4>Coming Soon</h4>
     <template id="slide-title">
       <h1
         data-id="slide-title-text"
-        class="font-semibold text-ably-avatar-stack-demo-slide-text cursor-pointer relative my-2 xs:text-2xl xs:w-full md:text-4xl md:w-3/5 md:absolute border-2 border-amber-400"
+        class="font-semibold text-ably-avatar-stack-demo-slide-text cursor-pointer relative my-2 xs:text-2xl xs:w-full md:text-4xl md:w-3/5 md:absolute"
       ></h1>
     </template>