chore: #184 update image and sizing welcome guide (#218)

packages/elements/src/components/HelpGuide/__tests__/__snapshots__/index.tsx.snap

@@ -1,21 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HelpGuide HelpGuide.Step should match a snapshot 1`] = `
-<Component
-  className="items-center justify-between"
+<div
+  className="helpguide-content"
 >
-  <div
-    className="helpguide-content"
+  <Component />
+  <Component />
+  <Component
+    className="relative"
   >
-    <Component />
-    <Component />
     <div
-      className="flex"
+      className="helpguide-component"
     >
       <component />
     </div>
-  </div>
-</Component>
+  </Component>
+</div>
 `;
 
 exports[`HelpGuide renderTimeline should match a snapshot when isMobileScreen FALSE 1`] = `
@@ -68,7 +68,6 @@ exports[`HelpGuide should match a snapshot 1`] = `
   }
 >
   <Component
-    centerContent={true}
     flexColumn={false}
     hasPadding={true}
   >

packages/elements/src/components/HelpGuide/index.tsx

@@ -133,7 +133,7 @@ export const HelpGuide = ({ children, current, isLoading = false }: HelpGuidePro
 
   return (
     <HelpGuideContextProvider value={value}>
-      <FlexContainerBasic hasPadding centerContent flexColumn={isMobileScreen}>
+      <FlexContainerBasic hasPadding flexColumn={isMobileScreen}>
         {renderTimeline({ total, currentIndex, isMobileScreen, goTo })}
         <div ref={helpguideRef} className="helpguide">
           <div ref={wrapperStepRef} className="helpguide-wrapper">
@@ -155,18 +155,18 @@ export const HelpGuide = ({ children, current, isLoading = false }: HelpGuidePro
 
 function HelpGuideStep({ component: Component, render, heading, subHeading, graphic }: HelpGuideStepProps) {
   return (
-    <FlexContainerBasic className="items-center justify-between">
-      <div className="helpguide-content">
-        <H3>{heading}</H3>
-        <SubTitleH6>{subHeading}</SubTitleH6>
-        <div className="flex">{Component ? <Component /> : render ? render : null}</div>
-      </div>
-      {!isMobile() && graphic && (
-        <div className="helpguide-wrapper-graphic">
-          <div className="helpguide-graphic">{graphic}</div>
-        </div>
-      )}
-    </FlexContainerBasic>
+    <div className="helpguide-content">
+      <H3>{heading}</H3>
+      <SubTitleH6>{subHeading}</SubTitleH6>
+      <FlexContainerBasic className="relative">
+        <div className="helpguide-component">{Component ? <Component /> : render ? render : null}</div>
+        {!isMobile() && graphic && (
+          <div className="helpguide-wrapper-graphic">
+            <div className="helpguide-graphic">{graphic}</div>
+          </div>
+        )}
+      </FlexContainerBasic>
+    </div>
   )
 }
 

packages/elements/src/styles/components/help-guide.scss

@@ -26,26 +26,29 @@
   }
 }
 
+.helpguide-component {
+  display: flex;
+  @media (min-width: 769px) {
+    max-width: 375px;
+  }
+}
+
 .helpguide-content {
   display: flex;
   flex-direction: column;
   margin-top: 2rem;
   @media (min-width: 769px) {
     padding: 1rem;
-    margin-right: 2rem;
     margin-top: 0;
-    max-width: 60%;
   }
 }
 
 .helpguide-wrapper-graphic {
   padding: 1rem;
-  flex: 1;
 }
 
 .helpguide-graphic {
-  max-width: 400px;
-  margin: auto;
+  max-width: 500px;
   & img {
     max-width: 100%;
     height: auto;

packages/marketplace/src/components/pages/__tests__/__snapshots__/developer-welcome.tsx.snap

@@ -24,7 +24,6 @@ exports[`DeveloperWelcomeMessage Documentation step should match a snapshot 1`]
   }
 >
   <Component
-    centerContent={true}
     flexColumn={false}
     hasPadding={true}
   >
@@ -81,7 +80,6 @@ exports[`DeveloperWelcomeMessage Managing step should match a snapshot 1`] = `
   }
 >
   <Component
-    centerContent={true}
     flexColumn={false}
     hasPadding={true}
   >
@@ -138,7 +136,6 @@ exports[`DeveloperWelcomeMessage Submitting step should match a snapshot 1`] = `
   }
 >
   <Component
-    centerContent={true}
     flexColumn={false}
     hasPadding={true}
   >
@@ -195,7 +192,6 @@ exports[`DeveloperWelcomeMessage Support step should match a snapshot 1`] = `
   }
 >
   <Component
-    centerContent={true}
     flexColumn={false}
     hasPadding={true}
   >
@@ -252,7 +248,6 @@ exports[`DeveloperWelcomeMessage Welcome step should match a snapshot 1`] = `
   }
 >
   <Component
-    centerContent={true}
     flexColumn={false}
     hasPadding={true}
   >
@@ -289,81 +284,74 @@ exports[`DeveloperWelcomeMessage should match a snapshot 1`] = `
 <Component
   className="welcome-container"
   flexColumn={true}
+  hasBackground={true}
   hasPadding={true}
 >
   <Component>
-    <Component
-      flexColumn={true}
-      hasBackground={true}
-      hasPadding={true}
-    >
-      <Component>
-        <HelpGuideStep
-          component={[Function]}
-          graphic={
-            <img
-              alt="step-1"
-              src=""
-            />
-          }
-          heading="Welcome to Reapit Foundations"
-          id="step-1"
-          subHeading="Let’s get started."
+    <HelpGuideStep
+      component={[Function]}
+      graphic={
+        <img
+          alt="step-1"
+          src=""
+        />
+      }
+      heading="Welcome to Reapit Foundations"
+      id="step-1"
+      subHeading="Let’s get started."
+    />
+    <HelpGuideStep
+      component={[Function]}
+      graphic={
+        <img
+          alt="step-2"
+          src=""
         />
-        <HelpGuideStep
-          component={[Function]}
-          graphic={
-            <img
-              alt="step-2"
-              src=""
-            />
-          }
-          heading="Documentation"
-          id="step-2"
-          subHeading="We’ve got you covered."
+      }
+      heading="Documentation"
+      id="step-2"
+      subHeading="We’ve got you covered."
+    />
+    <HelpGuideStep
+      component={[Function]}
+      graphic={
+        <img
+          alt="step-3"
+          src=""
         />
-        <HelpGuideStep
-          component={[Function]}
-          graphic={
-            <img
-              alt="step-3"
-              src=""
-            />
-          }
-          heading="Submitting an App"
-          id="step-3"
-          subHeading="Nearly there."
+      }
+      heading="Submitting an App"
+      id="step-3"
+      subHeading="Nearly there."
+    />
+    <HelpGuideStep
+      component={[Function]}
+      graphic={
+        <img
+          alt="step-4"
+          src=""
         />
-        <HelpGuideStep
-          component={[Function]}
-          graphic={
-            <img
-              alt="step-4"
-              src=""
-            />
-          }
-          heading="Managing your App"
-          id="step-4"
-          subHeading="Installations and changes."
+      }
+      heading="Managing your App"
+      id="step-4"
+      subHeading="Installations and changes."
+    />
+    <HelpGuideStep
+      graphic={
+        <img
+          alt="step-5"
+          src=""
         />
-        <HelpGuideStep
-          graphic={
-            <img
-              alt="step-5"
-              src=""
-            />
-          }
-          heading="On going support"
-          id="step-5"
-          render={
-            <Unknown
-              onAccept={[MockFunction]}
-            />
-          }
-          subHeading="We’re here to help."
+      }
+      heading="On going support"
+      id="step-5"
+      render={
+        <Unknown
+          onAccept={[MockFunction]}
         />
-      </Component>
-    </Component>
+      }
+      subHeading="We’re here to help."
+    />
   </Component>
 </Component>
 `;