add another recipe save button

a-type · Jul 20, 2024 · ab268eb · ab268eb
1 parent 74c14c0
commit ab268eb
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git a/apps/gnocchi/hub/src/App.tsx b/apps/gnocchi/hub/src/App.tsx
@@ -64,6 +64,15 @@ export function App({
               <P itemProp="author" className="p-author">
                 Published by {data.publisher?.fullName ?? 'Anonymous'}
               </P>
+              <a
+                href={`${
+                  import.meta.env.VITE_APP_GNOCCHI_ORIGIN
+                }?recipeUrl=${encodeURIComponent(url)}&hub=true&skipWelcome=true`}
+              >
+                <Button color="primary" className="shadow-lg">
+                  Save Recipe
+                </Button>
+              </a>
               <div className="row flex-wrap">
                 {data.servings && <Chip>Serves {data.servings}</Chip>}
                 {data.prepTimeMinutes && (

diff --git a/web/src/components/promo/layout.tsx b/web/src/components/promo/layout.tsx
@@ -135,26 +135,28 @@ export const CallToAction = ({
 }) => (
   <div
     className={clsx(
-      'flex flex-col fixed bottom-0 bg-primary-light border-0 border-t border-solid border-t-primary-dark m-0 w-full p-6 items-center gap-3 z-2 transition-colors',
+      'flex flex-col fixed bottom-0 bg-primary-light border-0 border-t border-solid border-t-primary-dark m-0 w-full p-3 items-center gap-3 z-2 transition-colors',
       className,
     )}
   >
-    <Button asChild>
-      <Link
-        to={appsById[appId].url}
-        data-test="get-started"
-        className="justify-center self-center"
-        color="default"
-      >
-        Get Started
-      </Link>
-    </Button>
-    <Button asChild color="ghost">
-      <Link to="/">
-        More Biscuits apps
-        <Icon name="arrowRight" />
-      </Link>
-    </Button>
+    <div className="flex flex-col sm:flex-row-reverse justify-between items-center w-full">
+      <Button asChild>
+        <Link
+          to={appsById[appId].url}
+          data-test="get-started"
+          className="justify-center self-center"
+          color="default"
+        >
+          Get Started
+        </Link>
+      </Button>
+      <Button asChild color="ghost">
+        <Link to="/">
+          <Icon name="arrowLeft" />
+          More Biscuits apps
+        </Link>
+      </Button>
+    </div>
 
     <span className="text-xxs">
       Free, no signup required. By continuing you agree to{' '}

diff --git a/web/src/pages/promos/GnocchiPage.tsx b/web/src/pages/promos/GnocchiPage.tsx
@@ -152,7 +152,7 @@ export function GnocchiPage() {
             },
           ]}
         />
-        <div className="flex flex-row items-center justify-center gap-4 w-full py-8 md:[grid-column-end:span_2]">
+        <div className="flex flex-row flex-wrap items-center justify-center gap-4 w-full py-8 md:[grid-column-end:span_2]">
           <Button asChild color="primary">
             <Link to="/join">Upgrade now</Link>
           </Button>