add Run on Google Cloud button to settings, setup

src/components/Settings/ProjectSettings/RowyRun.tsx

@@ -121,21 +121,36 @@ export default function RowyRun({
       setLatestUpdate(null);
   }, [latestUpdate, setLatestUpdate, version]);
 
-  const deployButton = window.location.hostname.includes("rowy.app") ? (
-    <LoadingButton
-      href={EXTERNAL_LINKS.rowyRunDeploy}
-      target="_blank"
-      rel="noopener noreferrer"
-      loading={
-        settings.rowyRunDeployStatus === "BUILDING" ||
-        settings.rowyRunDeployStatus === "COMPLETE"
-      }
-      loadingIndicator={
-        settings.rowyRunDeployStatus === "COMPLETE" ? "Deployed" : undefined
-      }
-    >
-      One-Click Deploy
-    </LoadingButton>
+  const deployButton = window.location.hostname.includes(
+    EXTERNAL_LINKS.rowyAppHostName
+  ) ? (
+    settings.rowyRunDeployStatus === "BUILDING" ||
+    settings.rowyRunDeployStatus === "COMPLETE" ? (
+      <LoadingButton
+        variant="contained"
+        loading
+        loadingIndicator={
+          settings.rowyRunDeployStatus === "COMPLETE" ? "Deployed" : undefined
+        }
+        style={{ width: 183, borderRadius: 12 }}
+      >
+        Run on Google Cloud
+      </LoadingButton>
+    ) : (
+      <a
+        href={EXTERNAL_LINKS.rowyRunDeploy}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          src="https://deploy.cloud.run/button.svg"
+          alt="Run on Google Cloud"
+          width={183}
+          height={32}
+          style={{ display: "block" }}
+        />
+      </a>
+    )
   ) : (
     <Button
       href={EXTERNAL_LINKS.rowyRunDocs}

src/components/Setup/Step1RowyRun.tsx

@@ -62,15 +62,22 @@ export default function Step1RowyRun({
     if (!isValidRowyRunUrl && paramsRowyRunUrl) console.log(paramsRowyRunUrl);
   }, [paramsRowyRunUrl, isValidRowyRunUrl]);
 
-  const deployButton = window.location.hostname.includes("rowy.app") ? (
-    <Button
+  const deployButton = !window.location.hostname.includes(
+    EXTERNAL_LINKS.rowyAppHostName
+  ) ? (
+    <a
       href={EXTERNAL_LINKS.rowyRunDeploy}
       target="_blank"
       rel="noopener noreferrer"
-      endIcon={<OpenInNewIcon />}
     >
-      One-Click Deploy
-    </Button>
+      <img
+        src="https://deploy.cloud.run/button.svg"
+        alt="Run on Google Cloud"
+        width={183}
+        height={32}
+        style={{ display: "block" }}
+      />
+    </a>
   ) : (
     <Button
       href={EXTERNAL_LINKS.rowyRunDocs}
@@ -95,7 +102,7 @@ export default function Step1RowyRun({
         title={
           isValidRowyRunUrl
             ? `Rowy Run is set up at: ${rowyRunUrl}`
-            : "Deploy Rowy Run to your GCP project."
+            : "Deploy Rowy Run to your Google Cloud Platform project."
         }
       >
         {!isValidRowyRunUrl && (

src/constants/externalLinks.ts

@@ -31,4 +31,6 @@ export const EXTERNAL_LINKS = {
   // prettier-ignore
   rowyRunDeploy: `https://deploy.cloud.run/?git_repo=${meta.repository.url.replace(".git", "Run")}.git`,
   rowyRunDocs: meta.homepage.replace("//", "//docs.") + "/rowyRun",
+
+  rowyAppHostName: "rowy.app",
 };

src/pages/Deploy.tsx

@@ -1,8 +1,7 @@
 import { useLocation } from "react-router-dom";
 import queryString from "query-string";
 
-import { useMediaQuery, Stack, Typography, Link, Button } from "@mui/material";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import { useMediaQuery, Stack, Typography, Link } from "@mui/material";
 
 import MarketingBanner from "components/Auth/MarketingBanner";
 import AuthLayout from "components/Auth/AuthLayout";
@@ -45,6 +44,7 @@ export default function DeployPage() {
             <img
               src="https://deploy.cloud.run/button.svg"
               alt="Run on Google Cloud"
+              style={{ display: "block" }}
             />
           </a>