chore: tweak dashboard intro

closes #165

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>

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>
                   ),

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>

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>

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>

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>

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>