Improve the lesson page spacing and elements

__tests__/__snapshots__/storyshots.test.js.snap

@@ -31166,40 +31166,46 @@ exports[`Storyshots mdx/BlockQuote Quote 1`] = `
 
 exports[`Storyshots mdx/ChallengeBar Standart 1`] = `
 <div
-  className="d-flex justify-content-center my-3"
+  className="my-3 mt-5"
 >
   <div
-    className="card shadow-sm bg-primary text-white px-4 py-2 border-0"
+    className="d-flex flex-col flex-md-row gap-3 justify-content-between align-items-none align-items-md-center card shadow-sm bg-primary text-white px-4 py-4 border-0"
   >
-    <h1
-      className="text-center fw-bold align-self-center"
-    >
-      Master your skill by solving challenges
-    </h1>
-    <a
-      className="text-white text-center  noUnderline"
-      href="/docs/setup#submitting-challenges"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      Submitting challenges
-    </a>
-    <p
-      className="px-2 m-0 text-center fw-bold"
-    >
-      Complete the first seven of JS0 challenges
-    </p>
+    <div>
+      <span
+        className="align-self-center fs-4"
+      >
+        Master your skill by solving challenges
+      </span>
+      <p
+        className="m-0"
+      >
+        Complete the first seven of JS0 challenges
+      </p>
+    </div>
     <div
-      className="text-center"
+      className="d-flex flex-column gap-2"
     >
       <a
-        className="btn btn-light mt-2 text-primary  noUnderline"
+        className="btn btn-light text-primary py-3 px-3 noUnderline"
         href="/"
         rel="noopener noreferrer"
         target="_blank"
       >
         View Challenges
       </a>
+      <a
+        className="MDX_a"
+      >
+        <a
+          className="text-white d-block noUnderline"
+          href="/docs/setup#submitting-challenges"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          How to submit challenges?
+        </a>
+      </a>
     </div>
   </div>
 </div>

__tests__/pages/curriculum/[lessonSlug]/__snapshots__/[subLessonSlug].test.js.snap

@@ -72,59 +72,67 @@ exports[`[subLessonSlug] Page should match screenshot 1`] = `
       </div>
     </div>
     <div
-      class="card shadow-sm  d-block border-0 p-3 p-md-4 bg-white lesson-wrapper "
+      class="card shadow-sm d-flex flex-column gap-5 border-0 p-3 p-md-4 bg-white lesson-wrapper"
     >
-      <nav
-        aria-label="Sub-lesson Links"
-      >
-        <a
-          aria-current="page"
-          class="subtitle link-dark dark d-block"
-          href="/curriculum/js0/first_sub_lesson"
+      <div>
+        <nav
+          aria-label="Sub-lesson Links"
         >
-          Part 1: first sub lesson
-        </a>
-        <a
-          class="subtitle text-muted d-block"
-          href="/curriculum/js0/second_sub_lesson"
+          <a
+            aria-current="page"
+            class="subtitle link-dark dark d-block"
+            href="/curriculum/js0/first_sub_lesson"
+          >
+            Part 1: first sub lesson
+          </a>
+          <a
+            class="subtitle text-muted d-block"
+            href="/curriculum/js0/second_sub_lesson"
+          >
+            Part 2: second sub lesson
+          </a>
+          <a
+            class="subtitle text-muted d-block"
+            href="/curriculum/js0/third_sub_lesson"
+          >
+            Part 3: third sub lesson
+          </a>
+        </nav>
+        <h1
+          class="MDX_h1"
+          id="first"
         >
-          Part 2: second sub lesson
-        </a>
-        <a
-          class="subtitle text-muted d-block"
-          href="/curriculum/js0/third_sub_lesson"
+          first
+        </h1>
+        <p
+          class="MDX_p"
         >
-          Part 3: third sub lesson
-        </a>
-      </nav>
-      <h1
-        class="MDX_h1"
-        id="first"
-      >
-        first
-      </h1>
-      <p>
-        simple
-      </p>
-      <div
-        class="d-flex"
-      >
-        <a
-          class="lessonLink next"
-          href="/curriculum/js0/second_sub_lesson"
+          simple
+        </p>
+        <div
+          class="mt-5"
         >
-          Next part: 
-          <span>
-            second sub lesson
-          </span>
-        </a>
+          <div
+            class="d-flex"
+          >
+            <a
+              class="lessonLink next"
+              href="/curriculum/js0/second_sub_lesson"
+            >
+              Next part: 
+              <span>
+                second sub lesson
+              </span>
+            </a>
+          </div>
+        </div>
       </div>
       <a
         class="MDX_a edit"
         href="https://github.com/garageScript/c0d3-app/edit/master/some/fake/path"
         title="Edit this page on Github"
       >
-        Edit this page
+        Edit this page on Github
       </a>
     </div>
   </div>

__tests__/pages/docs/__snapshots__/[docSlug].test.js.snap

@@ -38,7 +38,7 @@ exports[`[docSlug] Page should match screenshot 1`] = `
       href="https://github.com/garageScript/c0d3-app/edit/master/some/fake/path"
       title="Edit this page on Github"
     >
-      Edit this page
+      Edit this page on Github
     </a>
   </div>
 </div>

components/EditPage/EditPage.tsx

@@ -10,9 +10,9 @@ const EditPage: React.FC<Props> = ({ filePath }) => {
     <a
       href={`https://github.com/garageScript/c0d3-app/edit/master/${filePath}`}
       title="Edit this page on Github"
-      className={`${styles['MDX_a']} ${styles['edit']}`}
+      className={`${styles.MDX_a} ${styles.edit}`}
     >
-      Edit this page
+      Edit this page on Github
     </a>
   )
 }

components/mdx/ChallengBar.tsx

@@ -1,32 +1,36 @@
 import React from 'react'
 import NavLink from '../NavLink'
+import MDXcomponents from '../../helpers/mdxComponents'
 
 const ChallengeBar: React.FC<{
   href: string
   description: string
   title: string
 }> = ({ href, description, title }) => {
   return (
-    <div className="d-flex justify-content-center my-3">
-      <div className="card shadow-sm bg-primary text-white px-4 py-2 border-0">
-        <h1 className="text-center fw-bold align-self-center">{title}</h1>
-        <NavLink
-          path="/docs/setup#submitting-challenges"
-          className="text-white text-center "
-          external
-        >
-          Submitting challenges
-        </NavLink>
-        <p className="px-2 m-0 text-center fw-bold">{description}</p>
-
-        <div className="text-center">
+    <div className="my-3 mt-5">
+      <div className="d-flex flex-col flex-md-row gap-3 justify-content-between align-items-none align-items-md-center card shadow-sm bg-primary text-white px-4 py-4 border-0">
+        <div>
+          <span className="align-self-center fs-4">{title}</span>
+          <p className="m-0">{description}</p>
+        </div>
+        <div className="d-flex flex-column gap-2">
           <NavLink
             path={href}
-            className={`btn btn-light mt-2 text-primary `}
+            className="btn btn-light text-primary py-3 px-3"
             external
           >
             View Challenges
           </NavLink>
+          <MDXcomponents.a>
+            <NavLink
+              path="/docs/setup#submitting-challenges"
+              className="text-white d-block"
+              external
+            >
+              How to submit challenges?
+            </NavLink>
+          </MDXcomponents.a>
         </div>
       </div>
     </div>

components/mdx/__snapshots__/ChallengeBar.test.js.snap

@@ -3,28 +3,35 @@
 exports[`ChallengeBar component Should created redirect based on input 1`] = `
 <div>
   <div
-    class="d-flex justify-content-center my-3"
+    class="my-3 mt-5"
   >
     <div
-      class="card shadow-sm bg-primary text-white px-4 py-2 border-0"
+      class="d-flex flex-col flex-md-row gap-3 justify-content-between align-items-none align-items-md-center card shadow-sm bg-primary text-white px-4 py-4 border-0"
     >
-      <h1
-        class="text-center fw-bold align-self-center"
-      />
-      <a
-        class="text-white text-center  noUnderline"
-        href="/docs/setup#submitting-challenges"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        Submitting challenges
-      </a>
-      <p
-        class="px-2 m-0 text-center fw-bold"
-      />
+      <div>
+        <span
+          class="align-self-center fs-4"
+        />
+        <p
+          class="m-0"
+        />
+      </div>
       <div
-        class="text-center"
-      />
+        class="d-flex flex-column gap-2"
+      >
+        <a
+          class="MDX_a"
+        >
+          <a
+            class="text-white d-block noUnderline"
+            href="/docs/setup#submitting-challenges"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            How to submit challenges?
+          </a>
+        </a>
+      </div>
     </div>
   </div>
 </div>

helpers/mdxComponents.tsx

@@ -28,6 +28,7 @@ const MDXcomponents = {
   ul: (props: any) => <ul className={`${styles['MDX_ul']}`} {...props} />,
   ol: (props: any) => <ol className={`${styles['MDX_ol']}`} {...props} />,
   a: (props: any) => <a className={`${styles['MDX_a']}`} {...props} />,
+  p: (props: any) => <p className={`${styles['MDX_p']}`} {...props} />,
   td: (props: any) => <td className={`${styles['MDX_td']}`} {...props} />,
   th: (props: any) => <th className={`${styles['MDX_th']}`} {...props} />
 }

pages/curriculum/[lessonSlug]/[subLessonSlug].tsx

@@ -151,30 +151,36 @@ const SubLessonPage: React.FC<Props> & WithLayout = ({
         breakpoint={breakpoint}
       />
       <div
-        className={`card shadow-sm  d-block border-0 p-3 p-md-4 bg-white ${mdxStyles['lesson-wrapper']} `}
+        className={`card shadow-sm d-flex flex-column gap-5 border-0 p-3 p-md-4 bg-white ${mdxStyles['lesson-wrapper']}`}
       >
-        <Title
-          title={`${selectedSubLesson.frontMatter.title} | ${lessonSlug} | C0D3`}
-        />
-        <ScrollTopArrow />
-        {hasMultipleSubLessons && (
-          <SubLessonLinks
-            subLessons={subLessons}
-            lessonSlug={lessonSlug}
-            subLessonSlug={subLessonSlug}
+        <div>
+          <Title
+            title={`${selectedSubLesson.frontMatter.title} | ${lessonSlug} | C0D3`}
           />
-        )}
-
-        <MDXRemote {...selectedSubLesson.source!} components={MDXcomponents} />
-
-        {hasMultipleSubLessons && (
-          <NextPreviousLessons
-            subLessons={subLessons}
-            subLessonSlug={subLessonSlug}
-            lessonSlug={lessonSlug}
+          <ScrollTopArrow />
+          {hasMultipleSubLessons && (
+            <SubLessonLinks
+              subLessons={subLessons}
+              lessonSlug={lessonSlug}
+              subLessonSlug={subLessonSlug}
+            />
+          )}
+
+          <MDXRemote
+            {...selectedSubLesson.source!}
+            components={MDXcomponents}
           />
-        )}
 
+          {hasMultipleSubLessons && (
+            <div className="mt-5">
+              <NextPreviousLessons
+                subLessons={subLessons}
+                subLessonSlug={subLessonSlug}
+                lessonSlug={lessonSlug}
+              />
+            </div>
+          )}
+        </div>
         <EditPage filePath={githubFilePath} />
       </div>
     </div>

scss/_text.module.scss

@@ -17,7 +17,7 @@ h2 {
 
 h3 {
   @include rubik-bold;
-  font-size: 18px;
+  font-size: 20px;
   line-height: 160%;
 }