From 107ae5fc71546916107b889f626f248e8ab65f33 Mon Sep 17 00:00:00 2001
From: kieran <kieran@harkin.me>
Date: Thu, 18 Jul 2024 12:35:27 +0100
Subject: [PATCH] chore: tweak dashboard intro closes #165

---
 src/pages/dashboard/intro/final.tsx       | 4 ++--
 src/pages/dashboard/intro/index.tsx       | 9 ++++++---
 src/pages/dashboard/intro/step-header.tsx | 2 +-
 src/pages/dashboard/intro/step1.tsx       | 4 ++--
 src/pages/dashboard/intro/step2.tsx       | 4 ++--
 src/pages/dashboard/intro/step3.tsx       | 4 ++--
 src/pages/dashboard/intro/step4.tsx       | 4 ++--
 7 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/pages/dashboard/intro/final.tsx b/src/pages/dashboard/intro/final.tsx
index 3277be9..863bf26 100644
--- a/src/pages/dashboard/intro/final.tsx
+++ b/src/pages/dashboard/intro/final.tsx
@@ -26,9 +26,9 @@ export default function DashboardIntroFinal() {
   }, []);
 
   return (
-    <div className="mx-auto flex flex-col items-center">
+    <div className="mx-auto flex flex-col items-center md:w-[30rem] max-md:w-full max-md:px-3">
       <StepHeader />
-      <div className="flex flex-col gap-4 w-[30rem]">
+      <div className="flex flex-col gap-4 w-full">
         <h2 className="text-center">
           <FormattedMessage defaultMessage="Configure your streaming software" />
         </h2>
diff --git a/src/pages/dashboard/intro/index.tsx b/src/pages/dashboard/intro/index.tsx
index 2f5771e..e6f0777 100644
--- a/src/pages/dashboard/intro/index.tsx
+++ b/src/pages/dashboard/intro/index.tsx
@@ -31,7 +31,7 @@ export default function DashboardIntro() {
   if (!defaultEndpoint) return;
 
   return (
-    <div className="flex flex-col gap-4 mx-auto w-1/3 bg-layer-1 rounded-xl border border-layer-2 p-6">
+    <div className="flex flex-col gap-4 mx-auto xl:w-1/3 lg:w-1/2 bg-layer-1 rounded-xl border border-layer-2 p-6">
       <h1>
         <FormattedMessage defaultMessage="Welcome to zap.stream!" />
       </h1>
@@ -71,7 +71,7 @@ export default function DashboardIntro() {
       </p>
       {!info?.tosAccepted && (
         <div>
-          <div className="flex gap-2">
+          <div className="flex gap-2 cursor-pointer select-none" onClick={() => setTos(v => !v)}>
             <input type="checkbox" checked={tos} onChange={e => setTos(e.target.checked)} />
             <p>
               <FormattedMessage
@@ -81,7 +81,10 @@ export default function DashboardIntro() {
                   terms: (
                     <span
                       className="text-primary"
-                      onClick={() => window.open(info?.tosLink, "popup", "width=400,height=800")}>
+                      onClick={e => {
+                        e.stopPropagation();
+                        window.open(info?.tosLink, "popup", "width=400,height=800");
+                      }}>
                       <FormattedMessage defaultMessage="terms and conditions" />
                     </span>
                   ),
diff --git a/src/pages/dashboard/intro/step-header.tsx b/src/pages/dashboard/intro/step-header.tsx
index f7158fb..7770c71 100644
--- a/src/pages/dashboard/intro/step-header.tsx
+++ b/src/pages/dashboard/intro/step-header.tsx
@@ -6,7 +6,7 @@ export default function StepHeader() {
   const onStep = Number(location.pathname.split("/").slice(-1)[0].split("-")[1]);
 
   return (
-    <div className="flex mb-[10vh] justify-between lg:w-[35rem] max-lg:w-full max-lg:px-6">
+    <div className="flex mb-[10vh] justify-between w-full max-lg:px-6">
       <Link to="/dashboard/step-1" className={onStep < 1 ? "opacity-20" : undefined}>
         <FormattedMessage defaultMessage="Info" />
       </Link>
diff --git a/src/pages/dashboard/intro/step1.tsx b/src/pages/dashboard/intro/step1.tsx
index 05e0cc9..fe8d34a 100644
--- a/src/pages/dashboard/intro/step1.tsx
+++ b/src/pages/dashboard/intro/step1.tsx
@@ -23,9 +23,9 @@ export default function DashboardIntroStep1() {
   }, []);
 
   return (
-    <div className="mx-auto flex flex-col items-center">
+    <div className="mx-auto flex flex-col items-center md:w-[30rem] max-md:w-full max-md:px-3">
       <StepHeader />
-      <div className="flex flex-col gap-4 w-[30rem]">
+      <div className="flex flex-col gap-4 w-full">
         <h2 className="text-center">
           <FormattedMessage defaultMessage="Create Stream" />
         </h2>
diff --git a/src/pages/dashboard/intro/step2.tsx b/src/pages/dashboard/intro/step2.tsx
index 43d1cd2..910f2f7 100644
--- a/src/pages/dashboard/intro/step2.tsx
+++ b/src/pages/dashboard/intro/step2.tsx
@@ -27,9 +27,9 @@ export default function DashboardIntroStep2() {
   }, []);
 
   return (
-    <div className="mx-auto flex flex-col items-center ">
+    <div className="mx-auto flex flex-col items-center md:w-[30rem] max-md:w-full max-md:px-3">
       <StepHeader />
-      <div className="flex flex-col gap-4 w-[30rem]">
+      <div className="flex flex-col gap-4 w-full">
         <h2 className="text-center">
           <FormattedMessage defaultMessage="Choose a category" />
         </h2>
diff --git a/src/pages/dashboard/intro/step3.tsx b/src/pages/dashboard/intro/step3.tsx
index ece4ab1..aeb2a89 100644
--- a/src/pages/dashboard/intro/step3.tsx
+++ b/src/pages/dashboard/intro/step3.tsx
@@ -22,9 +22,9 @@ export default function DashboardIntroStep3() {
   }, []);
 
   return (
-    <div className="mx-auto flex flex-col items-center">
+    <div className="mx-auto flex flex-col items-center md:w-[30rem] max-md:w-full max-md:px-3">
       <StepHeader />
-      <div className="flex flex-col gap-4 w-[30rem]">
+      <div className="flex flex-col gap-4 w-full">
         <h2 className="text-center">
           <FormattedMessage defaultMessage="Stream Forwarding (optional)" />
         </h2>
diff --git a/src/pages/dashboard/intro/step4.tsx b/src/pages/dashboard/intro/step4.tsx
index 6c0999e..aeee484 100644
--- a/src/pages/dashboard/intro/step4.tsx
+++ b/src/pages/dashboard/intro/step4.tsx
@@ -31,9 +31,9 @@ export default function DashboardIntroStep4() {
   }, []);
 
   return (
-    <div className="mx-auto flex flex-col items-center">
+    <div className="mx-auto flex flex-col items-center md:w-[30rem] max-md:w-full max-md:px-3">
       <StepHeader />
-      <div className="flex flex-col gap-4 w-[30rem]">
+      <div className="flex flex-col gap-4 w-full">
         <h2 className="text-center">
           <FormattedMessage defaultMessage="Stream Goal (optional)" />
         </h2>