Docs: Updated UI of Page[Help]

Author: JoyelJohny

src/css/custom.css

@@ -9,7 +9,12 @@ html[data-theme='dark'] {
 .wrapper {
   margin: 0 auto;
   max-width: 1100px;
-  padding: 0 20px;
+  padding: 0 70px;
+}
+
+.headings {
+  font-size: 50px;
+  margin: 30px 0;
 }
 
 .center {
@@ -121,16 +126,12 @@ html[data-theme='dark'] {
     padding-bottom: 40px;
     padding-top: 40px;
   }
-
-  .wrapper {
-    max-width: 1400px;
-  }
 }
 
 .mainContainer {
   flex: 1 1 0%;
   max-width: 100%;
-  padding: 40px 0;
+  margin-bottom: 50px;
 }
 
 .mainContainer .wrapper {
@@ -396,6 +397,9 @@ html[data-theme='dark'] {
 }
 
 @media only screen and (max-width: 735px) {
+  .wrapper {
+    padding: 0 20px;
+  }
   .showcaseSection .logos img {
     max-height: 64px;
     padding: 20px;

src/pages/help.js

@@ -61,7 +61,9 @@ export default function Help(props) {
         <div className="mainContainer documentContainer postContainer helpContainer">
           <div>
             <header>
-              <h1>Need help?</h1>
+              <h1>
+                <p className="headings">Need help?</p>
+              </h1>
             </header>
             <GridBlock
               contents={supportLinks.slice(0, 3)}
@@ -74,7 +76,9 @@ export default function Help(props) {
               align="left"
             />
             <section>
-              <h2>Buy a Course</h2>
+              <h1>
+                <p className="headings">Buy a course</p>
+              </h1>
               <p>
                 Learn how to test JavaScript with{' '}
                 <ExternalLink href="https://kentcdodds.com">
@@ -96,7 +100,9 @@ export default function Help(props) {
               </div>
             </section>
             <header className="postHeader">
-              <h1>Want to help?</h1>
+              <h1>
+                <p className="headings">Want to help?</p>
+              </h1>
             </header>
             <p>
               Thanks! The Testing Library maintainers are happy to maintain this