From 517a60e7cd69fc70c27174cecd005ccf1ab458ad Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Fri, 14 Jul 2023 20:13:01 +0400
Subject: [PATCH 1/9] Increase h3 size

Increases its size to improve the readability when the text is short
---
 scss/_text.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_text.module.scss b/scss/_text.module.scss
index a138dae5e..90e0c7c42 100644
--- a/scss/_text.module.scss
+++ b/scss/_text.module.scss
@@ -17,7 +17,7 @@ h2 {
 
 h3 {
   @include rubik-bold;
-  font-size: 18px;
+  font-size: 20px;
   line-height: 160%;
 }
 

From 41ba5012e8ba4fdf55c98125811e2a3c916a8280 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Fri, 14 Jul 2023 20:13:36 +0400
Subject: [PATCH 2/9] Add space above the headings and paragraph

The UI looks cramped when the headings don't have enough space around them
---
 scss/mdx.module.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/scss/mdx.module.scss b/scss/mdx.module.scss
index c85a00036..da7911890 100644
--- a/scss/mdx.module.scss
+++ b/scss/mdx.module.scss
@@ -10,6 +10,12 @@
 .MDX_h3 {
   font-weight: 600;
   display: inline-block;
+  margin-top: 2em;
+  margin-bottom: 0.8em;
+}
+
+.MDX_p {
+  margin-bottom: 1.2em;
 }
 
 .MDX_ol > li::marker {
@@ -51,10 +57,6 @@
   display: flex;
   justify-content: center;
   text-decoration: none;
-  &::before {
-    content: '\270E';
-    transform: rotate(90deg);
-  }
   &:hover {
     text-decoration: none;
   }

From 510584418896424a971ddfff6f945b4c035cc4a5 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Fri, 14 Jul 2023 20:14:16 +0400
Subject: [PATCH 3/9] Remove the pencil icon to simplify the look

---
 components/EditPage/EditPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/EditPage/EditPage.tsx b/components/EditPage/EditPage.tsx
index ff5c1221c..82bb70351 100644
--- a/components/EditPage/EditPage.tsx
+++ b/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>
   )
 }

From 51ce2eb1dab05b98b36f9d5659095c89957039f6 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Fri, 14 Jul 2023 20:14:44 +0400
Subject: [PATCH 4/9] mdx: Map <p> element to a styled <p> element

---
 helpers/mdxComponents.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/helpers/mdxComponents.tsx b/helpers/mdxComponents.tsx
index 7687b65f7..58287ec42 100644
--- a/helpers/mdxComponents.tsx
+++ b/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} />
 }

From fa8906893c5b31419f1e8423d5ab2d7cd33f3bd5 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Fri, 14 Jul 2023 20:14:55 +0400
Subject: [PATCH 5/9] Redesign the ChallengeBar

---
 components/mdx/ChallengBar.tsx | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/components/mdx/ChallengBar.tsx b/components/mdx/ChallengBar.tsx
index 1f792907f..69ad49c2b 100644
--- a/components/mdx/ChallengBar.tsx
+++ b/components/mdx/ChallengBar.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import NavLink from '../NavLink'
+import MDXcomponents from '../../helpers/mdxComponents'
 
 const ChallengeBar: React.FC<{
   href: string
@@ -7,26 +8,29 @@ const ChallengeBar: React.FC<{
   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>

From e79dbfa9bbb53bd600737571a33b5469990dd442 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Fri, 14 Jul 2023 20:15:22 +0400
Subject: [PATCH 6/9] Add spacing between the lesson content elements

---
 .../[lessonSlug]/[subLessonSlug].tsx          | 46 +++++++++++--------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/pages/curriculum/[lessonSlug]/[subLessonSlug].tsx b/pages/curriculum/[lessonSlug]/[subLessonSlug].tsx
index 7cf25d97c..4121cfa9a 100644
--- a/pages/curriculum/[lessonSlug]/[subLessonSlug].tsx
+++ b/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>

From 23e84ac010534a3c23a6db5bbee2464db04ec068 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Fri, 14 Jul 2023 20:15:29 +0400
Subject: [PATCH 7/9] Update snapshots

---
 .../__snapshots__/storyshots.test.js.snap     | 50 +++++-----
 .../[subLessonSlug].test.js.snap              | 92 ++++++++++---------
 .../docs/__snapshots__/[docSlug].test.js.snap |  2 +-
 .../__snapshots__/ChallengeBar.test.js.snap   | 43 +++++----
 4 files changed, 104 insertions(+), 83 deletions(-)

diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap
index e9aa40efe..a74fd7f54 100644
--- a/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/__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>
diff --git a/__tests__/pages/curriculum/[lessonSlug]/__snapshots__/[subLessonSlug].test.js.snap b/__tests__/pages/curriculum/[lessonSlug]/__snapshots__/[subLessonSlug].test.js.snap
index d1d7756fc..97e6c8749 100644
--- a/__tests__/pages/curriculum/[lessonSlug]/__snapshots__/[subLessonSlug].test.js.snap
+++ b/__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>
diff --git a/__tests__/pages/docs/__snapshots__/[docSlug].test.js.snap b/__tests__/pages/docs/__snapshots__/[docSlug].test.js.snap
index 18dc260bb..8577cf129 100644
--- a/__tests__/pages/docs/__snapshots__/[docSlug].test.js.snap
+++ b/__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>
diff --git a/components/mdx/__snapshots__/ChallengeBar.test.js.snap b/components/mdx/__snapshots__/ChallengeBar.test.js.snap
index 01efcc03a..fb84f672c 100644
--- a/components/mdx/__snapshots__/ChallengeBar.test.js.snap
+++ b/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>

From 897b4c998681bc4123efec8f29111b31fa90b397 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Sat, 15 Jul 2023 12:01:11 +0400
Subject: [PATCH 8/9] Clean classes

---
 components/mdx/ChallengBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/mdx/ChallengBar.tsx b/components/mdx/ChallengBar.tsx
index 69ad49c2b..462e943ea 100644
--- a/components/mdx/ChallengBar.tsx
+++ b/components/mdx/ChallengBar.tsx
@@ -9,7 +9,7 @@ const ChallengeBar: React.FC<{
 }> = ({ href, description, title }) => {
   return (
     <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 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 p-4 border-0">
         <div>
           <span className="align-self-center fs-4">{title}</span>
           <p className="m-0">{description}</p>
@@ -17,7 +17,7 @@ const ChallengeBar: React.FC<{
         <div className="d-flex flex-column gap-2">
           <NavLink
             path={href}
-            className="btn btn-light text-primary py-3 px-3"
+            className="btn btn-light text-primary p-3"
             external
           >
             View Challenges

From a57c0b9eb79d1cfe0b6005c35c7eda67411f74d9 Mon Sep 17 00:00:00 2001
From: Flacial <ruthemiumwithdiamond@protonmail.com>
Date: Sat, 15 Jul 2023 12:04:37 +0400
Subject: [PATCH 9/9] Update snapshots

---
 __tests__/__snapshots__/storyshots.test.js.snap        | 4 ++--
 components/mdx/__snapshots__/ChallengeBar.test.js.snap | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap
index a74fd7f54..38bfa4df3 100644
--- a/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/__tests__/__snapshots__/storyshots.test.js.snap
@@ -31169,7 +31169,7 @@ exports[`Storyshots mdx/ChallengeBar Standart 1`] = `
   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"
+    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 p-4 border-0"
   >
     <div>
       <span
@@ -31187,7 +31187,7 @@ exports[`Storyshots mdx/ChallengeBar Standart 1`] = `
       className="d-flex flex-column gap-2"
     >
       <a
-        className="btn btn-light text-primary py-3 px-3 noUnderline"
+        className="btn btn-light text-primary p-3 noUnderline"
         href="/"
         rel="noopener noreferrer"
         target="_blank"
diff --git a/components/mdx/__snapshots__/ChallengeBar.test.js.snap b/components/mdx/__snapshots__/ChallengeBar.test.js.snap
index fb84f672c..283091b56 100644
--- a/components/mdx/__snapshots__/ChallengeBar.test.js.snap
+++ b/components/mdx/__snapshots__/ChallengeBar.test.js.snap
@@ -6,7 +6,7 @@ exports[`ChallengeBar component Should created redirect based on input 1`] = `
     class="my-3 mt-5"
   >
     <div
-      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"
+      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 p-4 border-0"
     >
       <div>
         <span