Style the extension onboarding

src/assets/locales/en.json

@@ -506,18 +506,18 @@
     "extension": {
       "title": "Let's start with an extension",
       "explainer": "Using the browser extension, you can get the best streams we have to offer. With just a simple install.",
+      "extensionHelp": "If you've installed the extension but it's not detected. <bold>Open the extension through your browsers extension menu</bold> and follow the steps on screen.",
       "link": "Install extension",
       "back": "Go back",
       "status": {
-        "loading": "Waiting on extension",
+        "loading": "Waiting for you to install the extension",
-        "disallowed": "Extension disabled for this page",
+        "disallowed": "Extension is not enabled for this page",
+        "disallowedAction": "Enabled extension",
         "failed": "Failed to request status",
         "outdated": "Extension version too old",
-        "noperms": "Extension does not have sufficient permissions",
         "success": "Extension is working as expected!"
       },
-      "submitCheck": "Check for extension",
+      "submit": "Continue"
-      "submitFinal": "Continue"
     },
     "defaultConfirm": {
       "title": "Are you sure?",

src/components/layout/ThinContainer.tsx

@@ -22,7 +22,7 @@ export function CenterContainer(props: ThinContainerProps) {
   return (
     <div
       className={classNames(
-        "min-h-screen w-full flex justify-center p-8 items-center",
+        "min-h-screen w-full flex justify-center p-8 py-24 items-center",
         props.classNames,
       )}
     >

src/pages/onboarding/OnboardingExtension.tsx

@@ -1,11 +1,12 @@
 import { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useAsyncFn, useInterval } from "react-use";
 
 import { isAllowedExtensionVersion } from "@/backend/extension/compatibility";
-import { extensionInfo } from "@/backend/extension/messaging";
+import { extensionInfo, sendPage } from "@/backend/extension/messaging";
 import { Button } from "@/components/buttons/Button";
+import { Icon, Icons } from "@/components/Icon";
 import { Loading } from "@/components/layout/Loading";
 import { Stepper } from "@/components/layout/Stepper";
 import { CenterContainer } from "@/components/layout/ThinContainer";
@@ -47,23 +48,57 @@ export function ExtensionStatus(props: {
         <p>{t("onboarding.extension.status.loading")}</p>
       </>
     );
-  // TODO make proper actions for all of these states below
+  if (props.status === "disallowed" || props.status === "noperms")
-  if (props.status === "disallowed")
+    content = (
-    content = <p>{t("onboarding.extension.status.disallowed")}</p>;
+      <>
+        <p>{t("onboarding.extension.status.disallowed")}</p>
+        <Button
+          onClick={() => {
+            sendPage({
+              page: "PermissionGrant",
+              redirectUrl: window.location.href,
+            });
+          }}
+          theme="purple"
+          padding="md:px-12 p-2.5"
+          className="mt-6"
+        >
+          {t("onboarding.extension.status.disallowedAction")}
+        </Button>
+      </>
+    );
   else if (props.status === "failed")
     content = <p>{t("onboarding.extension.status.failed")}</p>;
   else if (props.status === "outdated")
     content = <p>{t("onboarding.extension.status.outdated")}</p>;
-  else if (props.status === "noperms")
-    content = <p>{t("onboarding.extension.status.noperms")}</p>;
   else if (props.status === "success")
-    content = <p>{t("onboarding.extension.status.success")}</p>;
+    content = (
+      <p className="flex items-center">
+        <Icon icon={Icons.CHECKMARK} className="text-type-success mr-4" />
+        {t("onboarding.extension.status.success")}
+      </p>
+    );
   return (
+    <>
       <Card>
         <div className="flex py-6 flex-col space-y-2 items-center justify-center">
           {content}
         </div>
       </Card>
+      <Card className="mt-4">
+        <div className="flex items-center space-x-7">
+          <Icon icon={Icons.WARNING} className="text-type-danger text-2xl" />
+          <p className="flex-1">
+            <Trans
+              i18nKey="onboarding.extension.extensionHelp"
+              components={{
+                bold: <span className="text-white" />,
+              }}
+            />
+          </p>
+        </div>
+      </Card>
+    </>
   );
 }
 
@@ -103,13 +138,11 @@ export function OnboardingExtensionPage() {
           <Button onClick={() => navigate("/onboarding")} theme="secondary">
             {t("onboarding.extension.back")}
           </Button>
+          {value === "success" ? (
             <Button onClick={() => exec(true)} theme="purple">
-            {t(
+              {t("onboarding.extension.submit")}
-              value === "success"
-                ? "onboarding.extension.submitFinal"
-                : "onboarding.extension.submitCheck",
-            )}
             </Button>
+          ) : null}
         </div>
       </CenterContainer>
     </MinimalPageLayout>

src/pages/onboarding/utils.tsx

@@ -7,16 +7,20 @@ import { Heading2, Heading3, Paragraph } from "@/components/utils/Text";
 
 export function Card(props: {
   children?: React.ReactNode;
+  className?: string;
   onClick?: () => void;
 }) {
   return (
     <div
-      className={classNames({
+      className={classNames(
+        {
           "bg-onboarding-card duration-300 border border-onboarding-border rounded-lg p-7":
             true,
           "hover:bg-onboarding-cardHover transition-colors cursor-pointer":
             !!props.onClick,
-      })}
+        },
+        props.className,
+      )}
       onClick={props.onClick}
     >
       {props.children}