fix(client): move RDB start button above post-setup steps (#67255)

client/i18n/locales/english/translations.json

@@ -604,8 +604,8 @@
     "github-required": "<0>Create a GitHub</0> account if you don't have one. You'll need it when you create the virtual Linux server machine. This process may take a few minutes.",
     "codespaces": {
       "intro": "This course runs in a virtual Linux machine using GitHub Codespaces. Follow these instructions to start the course:",
-      "step-1": "<0>Create an GitHub account</0> if you don't have one",
-      "step-2": "Click the start button below this list",
+      "step-1": "<0>Create a GitHub account</0> if you don't have one",
+      "step-2": "Click the start button below",
       "step-3": "On that page, click the create button",
       "step-4": "Once the virtual Linux machine is finished loading, start the CodeRoad extension by:",
       "step-5": "Clicking the \"hamburger\" menu near the top left of the VSCode window,",
@@ -613,7 +613,7 @@
       "step-7": "Clicking on the <0>Command Palette</0> option,",
       "step-8": "and running the <0>CodeRoad: Start</0> command",
       "step-9": "Follow the instructions in CodeRoad to complete the course",
-      "continue-project": "Clicking the button below will start a new project. If you have previously started the {{title}} course, go to the <0>repository page</0> to re-open a previous workspace.",
+      "continue-project": "Clicking the start button below will start a new project. If you have previously started the {{title}} course, go to the <0>repository page</0> to re-open a previous workspace.",
       "learn-more": "Learn more about <0>Codespace workspaces</0>.",
       "logout-warning": "If you log out of freeCodeCamp before you complete the entire {{course}} course, your progress will not be saved to your freeCodeCamp account.",
       "sub-step-3": "Navigate to your <0>Codespaces secrets page</0>",
@@ -626,7 +626,7 @@
     "ona": {
       "intro": "This course runs in a virtual Linux machine using Ona. Follow these instructions to start the course:",
       "step-1": "<0>Create an Ona account</0> if you don't have one",
-      "step-2": "Click the start button below this list",
+      "step-2": "Click the start button below",
       "step-3": "In the modal that pops up, click the create button",
       "step-4": "Once the virtual Linux machine is finished loading, start the CodeRoad extension by:",
       "step-5": "Clicking the \"hamburger\" menu near the top left of the VSCode window,",
@@ -634,7 +634,7 @@
       "step-7": "Clicking on the <0>Command Palette</0> option,",
       "step-8": "and running the <0>CodeRoad: Start</0> command",
       "step-9": "Follow the instructions in CodeRoad to complete the course",
-      "continue-project": "Clicking the button below will start a new project. If you have previously started the {{course}} course, go to <0>your Ona dashboard</0> to continue.",
+      "continue-project": "Clicking the start button below will start a new project. If you have previously started the {{course}} course, go to <0>your Ona dashboard</0> to continue.",
       "learn-more": "Learn more about <0>Ona workspaces.</0>",
       "logout-warning": "If you log out of freeCodeCamp before you complete the entire {{course}} course, your progress will not be saved to your freeCodeCamp account.",
       "sub-step-3": "Navigate to your <0>Ona secrets page</0>",

client/src/templates/Challenges/codeally/codespaces-instructions.tsx

@@ -34,6 +34,7 @@ export function CodespacesInstructions({
   return (
     <div className='ca-description'>
       <p>{t('learn.codespaces.intro')}</p>
+      <CodespacesContinueAlert title={title} />
       <ol>
         <li>
           <Trans i18nKey='learn.codespaces.step-1'>
@@ -48,7 +49,7 @@ export function CodespacesInstructions({
         </li>
         {isSignedIn && (
           <>
-            <Spacer size='s' />
+            <Spacer size='xs' />
             <p>{t('learn.local.sub-step-heading')}</p>
             <ol>
               <li>{t('learn.local.sub-step-1')}</li>
@@ -92,6 +93,9 @@ export function CodespacesInstructions({
                   <code>placeholder</code>
                 </Trans>
               </li>
+              <Spacer size='xxs' />
+              <CodespacesLogoutAlert course={title} />
+              <Spacer size='xxs' />
               <li>
                 <Trans i18nKey='learn.codespaces.sub-step-6'>
                   <code>placeholder</code>
@@ -108,6 +112,15 @@ export function CodespacesInstructions({
           </>
         )}
         <li>{t('learn.codespaces.step-2')}</li>
+        <li style={{ listStyle: 'none' }}>
+          <Spacer size='xxs' />
+          <CodeAllyButton
+            challengeType={challengeType}
+            onClick={openCodespaces}
+          />
+        </li>
+      </ol>
+      <ol start={3}>
         <li>{t('learn.codespaces.step-3')}</li>
         <li>
           {t('learn.codespaces.step-4')}
@@ -140,10 +153,6 @@ export function CodespacesInstructions({
         </li>
         <li>{t('learn.codespaces.step-9')}</li>
       </ol>
-      <Spacer size='m' />
-      <CodespacesContinueAlert title={title} />
-      {isSignedIn && <CodespacesLogoutAlert course={title} />}
-      <CodeAllyButton challengeType={challengeType} onClick={openCodespaces} />
     </div>
   );
 }

client/src/templates/Challenges/codeally/ona-instructions.tsx

@@ -39,6 +39,7 @@ export function OnaInstructions({
   return (
     <div className='ca-description'>
       <p>{t('learn.ona.intro')}</p>
+      <RdbOnaContinueAlert course={title} />
       <ol>
         <li>
           <Trans i18nKey='learn.ona.step-1'>
@@ -53,7 +54,7 @@ export function OnaInstructions({
         </li>
         {isSignedIn && (
           <>
-            <Spacer size='s' />
+            <Spacer size='xs' />
             <p>{t('learn.local.sub-step-heading')}</p>
             <ol>
               <li>{t('learn.local.sub-step-1')}</li>
@@ -97,11 +98,19 @@ export function OnaInstructions({
                   <code>placeholder</code>
                 </Trans>
               </li>
+              <Spacer size='xxs' />
+              <RdbOnaLogoutAlert course={title} />
             </ol>
             <Spacer size='s' />
           </>
         )}
         <li>{t('learn.ona.step-2')}</li>
+        <li style={{ listStyle: 'none' }}>
+          <Spacer size='xxs' />
+          <CodeAllyButton challengeType={challengeType} onClick={openOna} />
+        </li>
+      </ol>
+      <ol start={3}>
         <li>{t('learn.ona.step-3')}</li>
         <li>
           {t('learn.ona.step-4')}
@@ -134,10 +143,6 @@ export function OnaInstructions({
         </li>
         <li>{t('learn.ona.step-9')}</li>
       </ol>
-      <Spacer size='m' />
-      <RdbOnaContinueAlert course={title} />
-      {isSignedIn && <RdbOnaLogoutAlert course={title} />}
-      <CodeAllyButton challengeType={challengeType} onClick={openOna} />
     </div>
   );
 }