Initial setup for localising the help content into one component

apps/webapp/app/components/helpContent/HelpContentText.tsx

@@ -0,0 +1,28 @@
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { StepNumber } from "~/components/primitives/StepNumber";
+
+export function HowToConnectAnIntegration() {
+  return (
+    <>
+      <StepNumber stepNumber="1" title="Select an Integration from the list" />
+      <StepContentContainer>
+        <Paragraph variant="small">Content</Paragraph>
+      </StepContentContainer>
+    </>
+  );
+}
+
+export function HowToCreateAJob() {
+  return (
+    <>
+      <StepNumber stepNumber="1" title="Step 1 title" />
+      <StepContentContainer>
+        <Paragraph variant="small">How to create a Job content</Paragraph>
+      </StepContentContainer>
+    </>
+  );
+}
+
+function StepContentContainer({ children }: { children: React.ReactNode }) {
+  return <div className="ml-9 mt-1">{children}</div>;
+}

apps/webapp/app/components/primitives/Help.tsx

@@ -89,7 +89,7 @@ export function HelpContent({
           </div>
 
           <div
-            className="grow rounded border border-slate-850 bg-midnight-850 bg-contain bg-left-top bg-no-repeat p-4"
+            className="grow rounded border border-slate-850 bg-midnight-850 bg-contain bg-left-top bg-no-repeat p-6"
             style={{
               backgroundImage: `url(${gradientPath})`,
             }}

apps/webapp/app/components/primitives/StepNumber.tsx

@@ -1,30 +1,32 @@
-export function TutorialStep({
+import { Header2 } from "./Headers";
+
+export function StepNumber({
   stepNumber,
-  drawLine,
   active = false,
   complete = false,
+  title,
 }: {
   stepNumber?: string;
-  drawLine?: boolean;
   active?: boolean;
   complete?: boolean;
+  title?: string;
 }) {
   return (
-    <div className="mr-3 flex flex-col items-center justify-center">
+    <div className="mr-3">
       {active ? (
-        <span className="flex h-7 w-7 items-center justify-center rounded bg-green-600 py-1 text-sm font-semibold text-slate-900 shadow">
-          {stepNumber}
-        </span>
+        <div className="flex items-center gap-x-3">
+          <span className="flex h-6 w-6 items-center justify-center rounded bg-green-600 py-1 text-xs font-semibold text-slate-900 shadow">
+            {stepNumber}
+          </span>
+          <Header2>{title}</Header2>
+        </div>
       ) : (
-        <span className="flex h-7 w-7 items-center justify-center rounded border border-slate-700 bg-slate-800 py-1 text-sm font-semibold text-green-400 shadow">
-          {complete ? "✓" : stepNumber}
-        </span>
-      )}
-
-      {drawLine ? (
-        <div className="h-full border-l border-slate-700"></div>
-      ) : (
-        <div className="h-full"></div>
+        <div className="flex items-center gap-x-3">
+          <span className="flex h-6 w-6 items-center justify-center rounded border border-slate-700 bg-slate-800 py-1 text-xs font-semibold text-dimmed shadow">
+            {complete ? "✓" : stepNumber}
+          </span>
+          <Header2>{title}</Header2>
+        </div>
       )}
     </div>
   );

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx

@@ -1,3 +1,4 @@
+import { HowToCreateAJob } from "~/components/helpContent/HelpContentText";
 import { JobSkeleton } from "~/components/jobs/JobSkeleton";
 import { JobsTable } from "~/components/jobs/JobsTable";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
@@ -81,7 +82,7 @@ export default function Page() {
               )}
             </div>
             <HelpContent title="How to create a Job">
-              <Paragraph>This is some help content</Paragraph>
+              <HowToCreateAJob />
             </HelpContent>
           </div>
         </Help>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations/route.tsx

@@ -6,6 +6,7 @@ import {
   useTypedLoaderData,
 } from "remix-typedjson";
 import { LogoIcon } from "~/components/LogoIcon";
+import { HowToConnectAnIntegration } from "~/components/helpContent/HelpContentText";
 import { ConnectToIntegrationSheet } from "~/components/integrations/ConnectToIntegrationSheet";
 import { NoIntegrationSheet } from "~/components/integrations/NoIntegrationSheet";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
@@ -242,8 +243,8 @@ function ConnectedIntegrationsList({
   return (
     <div className="h-full overflow-y-auto p-4">
       <Help>
-        <HelpContent title="How to connect an integration">
-          <Paragraph>This is some help content</Paragraph>
+        <HelpContent title="How to connect an Integration">
+          <HowToConnectAnIntegration />
         </HelpContent>
         <div className="mb-2 flex items-center justify-between">
           <Header2 className="m-0">Your connected Integrations</Header2>