Small onboarding fixes and styling (#525)

* fix links and open in new tabs * improve styles * improve mobile nav styles * add changeset * remove console
Shopify · Feb 15, 2023 · 257ce6d · 257ce6d
1 parent ff9d729
commit 257ce6d
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 29 deletions.
diff --git a/.changeset/shy-ways-try.md b/.changeset/shy-ways-try.md
@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': patch
+---
+
+Improve onboarding style and links
diff --git a/packages/cli/src/virtual-routes/assets/styles.css b/packages/cli/src/virtual-routes/assets/styles.css
@@ -39,9 +39,16 @@ body {
   flex-direction: column;
 }
 
+.hydrogen-virtual-route {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+
 header {
   display: flex;
   flex-direction: row;
+  gap: 20px;
   padding: 14px 20px;
   width: 100%;
   height: 48px;
@@ -50,6 +57,10 @@ header {
   color: #5C5F62;
 }
 
+header p {
+ white-space: nowrap;
+}
+
 header nav {
   display: flex;
   flex-direction: row;
@@ -208,4 +219,4 @@ main {
 .Banner.ErrorBanner > h2 {
   font-size: 1rem;
   color: #74180C;
-}
+}
diff --git a/packages/cli/src/virtual-routes/routes/index.tsx b/packages/cli/src/virtual-routes/routes/index.tsx
@@ -60,27 +60,40 @@ export default function Index() {
         {configDone ? <HydrogenLogoBaseColor /> : <HydrogenLogoBaseBW />}
         <h1>Hello, {shopName || 'Hydrogen'}</h1>
         <p>Welcome to your new custom storefront</p>
-        <section className="Banner">
-          <div>
-            <IconBanner />
-            <h2>Configure storefront token</h2>
-          </div>
-          <p>
-            You&rsquo;re seeing this because you have not yet configured your
-            storefront token. To get started, edit {` `}
-            <code>.env</code>. Then, create your first route with the file {` `}
-            <code>/app/routes/index.jsx</code>. Learn more about
-            {` `}
-            <a href="https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables">
-              editing environment variables
-            </a>
-            and
-            <a href="https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development#step-4-create-a-route">
-              creating routes
-            </a>
-            .
-          </p>
-        </section>
+        {configDone ? null : (
+          <section className="Banner">
+            <div>
+              <IconBanner />
+              <h2>Configure storefront token</h2>
+            </div>
+            <p>
+              You&rsquo;re seeing this because you have not yet configured your
+              storefront token. <br />
+              <br /> To get started, edit {` `}
+              <code>.env</code>. Then, create your first route with the file
+              {` `}
+              <code>/app/routes/index.jsx</code>. Learn more about
+              {` `}
+              <a
+                target="_blank"
+                rel="norefferer noopener"
+                href="https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables"
+              >
+                editing environment variables
+              </a>
+              {` `}
+              and{` `}
+              <a
+                target="_blank"
+                rel="norefferer noopener"
+                href="https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development#step-4-create-a-route"
+              >
+                creating routes
+              </a>
+              .
+            </p>
+          </section>
+        )}
         <ResourcesLinks />
       </Layout>
     </>
@@ -100,14 +113,14 @@ function ErrorPage() {
             <h2>There&rsquo;s a problem with your storefront</h2>
           </div>
           <p>
-            Check your domain and API token in your <code>.env</code> file. Read
-            the documentation on{` `}
+            Check your domain and API token in your <code>.env</code> file.
+            Learn more about
             <a
               target="_blank"
               rel="norefferer noopener"
-              href="https://shopify.dev/custom-storefronts/hydrogen/getting-started/quickstart"
+              href="https://shopify.dev/docs/custom-storefronts/hydrogen/environment-variables"
             >
-              how to configure your&nbsp;storefront
+              editing environment variables
             </a>
             .
           </p>
@@ -200,13 +213,25 @@ function Layout({
         <h1>{shopName?.toUpperCase()}</h1>
         <p>&nbsp;Dev Mode&nbsp;</p>
         <nav>
-          <a href="https://discord.com/invite/shopifydevs">
+          <a
+            target="_blank"
+            rel="norefferer noopener"
+            href="https://discord.com/invite/shopifydevs"
+          >
             <IconDiscord />
           </a>
-          <a href="https://github.com/Shopify/hydrogen">
+          <a
+            target="_blank"
+            rel="norefferer noopener"
+            href="https://github.com/Shopify/hydrogen"
+          >
             <IconGithub />
           </a>
-          <a href="https://twitter.com/shopifydevs?lang=en">
+          <a
+            target="_blank"
+            rel="norefferer noopener"
+            href="https://twitter.com/shopifydevs?lang=en"
+          >
             <IconTwitter />
           </a>
         </nav>