chore: #430 update help guide component in elements (#444)

packages/elements/src/components/HelpGuide/help-guide.stories.tsx

@@ -5,20 +5,21 @@ import { useHelpGuideContext } from './context'
 import { Button } from '../Button'
 
 const imageUrl = 'https://1001freedownloads.s3.amazonaws.com/vector/thumb/63319/Placeholder.png'
+const contentStyles = {
+  maxWidth: '390px',
+}
 
 const ComponentA = () => {
   const context = useHelpGuideContext()
   return (
-    <div>
+    <div style={contentStyles}>
       <p className="mb-5">
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt ipsa minima hic rerum. Aspernatur laborum eum
         vel necessitatibus dolorum alias. Sunt necessitatibus nisi repellat perspiciatis quam, iusto, fugit expedita
         cupiditate quisquam totam voluptates? Facilis laudantium dolores tempora aspernatur natus minus, soluta aliquam?
         Similique mollitia, placeat architecto eum dolores quam, omnis quidem iste vero tempora ipsum repellendus
         voluptas, aliquam rerum molestias iure quasi totam assumenda quo veritatis. Corporis debitis, veniam sit earum
-        vero id impedit odio totam itaque numquam omnis non repellat fugiat nostrum nam minima modi, dignissimos ut
-        quibusdam praesentium sunt in beatae at nemo! Inventore blanditiis expedita pariatur amet laboriosam culpa,
-        nihil sed rerum natus et recusandae hic est error ab accusantium impedit earum vero quae. Alias quae
+        vero id impedit odio totam itaque
       </p>
       <Button type="button" variant="primary" onClick={context.goNext}>
         Next
@@ -31,7 +32,7 @@ const ComponentB = () => {
   const context = useHelpGuideContext()
 
   return (
-    <div>
+    <div style={contentStyles}>
       <p className="mb-5">
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita consequatur molestias! Magnam in
         inventore, sunt fuga minus nihil pariatur facilis nobis modi debitis aspernatur perspiciatis quo officiis sit
@@ -51,7 +52,7 @@ const ComponentC = () => {
   const context = useHelpGuideContext()
 
   return (
-    <div>
+    <div style={contentStyles}>
       <p className="mb-5">
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita consequatur molestias! Magnam in
         inventore, sunt fuga minus nihil pariatur facilis nobis modi debitis aspernatur perspiciatis quo officiis sit
@@ -72,35 +73,35 @@ storiesOf('HelpGuide', module).add('Primary', () => {
         component={ComponentA}
         heading="Heading-1"
         subHeading="SubHeading-1"
-        graphic={<img src={imageUrl} />}
+        graphic={<img width="200px" src={imageUrl} />}
       />
       <HelpGuide.Step
         id="step-2"
         component={ComponentB}
         heading="Heading-2"
         subHeading="SubHeading-2"
-        graphic={<img src={imageUrl} />}
+        graphic={<img width="200px" src={imageUrl} />}
       />
       <HelpGuide.Step
         id="step-3"
         component={ComponentB}
         heading="Heading-3"
         subHeading="SubHeading-3"
-        graphic={<img src={imageUrl} />}
+        graphic={<img width="200px" src={imageUrl} />}
       />
       <HelpGuide.Step
         id="step-4"
         component={ComponentB}
         heading="Heading-4"
         subHeading="SubHeading-4"
-        graphic={<img src={imageUrl} />}
+        graphic={<img width="200px" src={imageUrl} />}
       />
       <HelpGuide.Step
         id="step-5"
         component={ComponentC}
         heading="Heading-5"
         subHeading="SubHeading-5"
-        graphic={<img src={imageUrl} />}
+        graphic={<img width="200px" src={imageUrl} />}
       />
     </HelpGuide>
   )

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

@@ -29,7 +29,7 @@
 .helpguide-component {
   display: flex;
   @media (min-width: 769px) {
-    max-width: 375px;
+    max-width: 500px;
   }
 }
 

packages/marketplace/src/components/pages/developer-welcome.tsx

@@ -21,7 +21,7 @@ export type DeveloperWelcomeMessageProps = DevelopeWelcomeMappedActions
 export const Welcome = () => {
   const { goNext } = useHelpGuideContext()
   return (
-    <div>
+    <div className={styles.content}>
       <p className="mb-5">
         Thank you for registering as a Reapit Foundations Developer. Within this portal, you will have access to
         detailed documentation on all our APIs, full access to Reapit elements and Sandbox data. All available to assist
@@ -42,7 +42,7 @@ export const Documentation = () => {
   const { goNext, goPrev } = useHelpGuideContext()
 
   return (
-    <div>
+    <div className={styles.content}>
       <p className="mb-5">
         As Developers, we know detailed documentation and support is paramount when building any application. Therefore,
         we have created various sections to provide additional help and support. Each section can be accessed from the
@@ -102,7 +102,7 @@ export const Documentation = () => {
 export const Submitting = () => {
   const { goNext, goPrev } = useHelpGuideContext()
   return (
-    <div>
+    <div className={styles.content}>
       <p className="mb-5">
         Once you are ready to go, you will need to submit your App. Using the &lsquo;Submit App&rsquo; option on the
         left, you will need to tell us about your Application, such as what permissions it requires, the type of
@@ -130,7 +130,7 @@ export const Submitting = () => {
 export const Managing = () => {
   const { goNext, goPrev } = useHelpGuideContext()
   return (
-    <div>
+    <div className={styles.content}>
       <p className="mb-5">
         If you need to make a change to your App, such as update a screenshot, edit text, or request additional
         permissions, you can do so by clicking &lsquo;Edit App&rsquo; from the &lsquo;Apps&rsquo; page. Any change will
@@ -154,7 +154,7 @@ export const Managing = () => {
 export const Support = ({ onAccept }) => {
   const { goPrev } = useHelpGuideContext()
   return (
-    <div>
+    <div className={styles.content}>
       <p className="mb-5">
         You are currently logged into our alpha release of Reapit Foundations and we are continuing to update, add
         additional features and address any issues that may appear. In the meantime, if you would like to request a

packages/marketplace/src/styles/pages/developer-welcome.scss

@@ -8,3 +8,9 @@
   margin: 0 auto;
   width: 100%;
 }
+
+.content {
+  @media (min-width: 769px) {
+    max-width: 375px;
+  }
+}