From 742cce164ca7bf1adc9197a3b80fe222d94f245f Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Mon, 15 Jun 2020 15:15:01 -0700
Subject: [PATCH] feat: More tweaks to component doc styling

---
 src/components/PageTitle.module.scss             |  1 -
 src/components/PropList.module.scss              |  9 ++++++---
 src/components/ReferenceExample.module.scss      |  2 ++
 src/components/ReferencePreview.js               |  1 -
 src/templates/ComponentReferenceTemplate.js      | 16 +++++++---------
 .../ComponentReferenceTemplate.module.scss       |  2 ++
 src/templates/ReferenceTemplate.module.scss      |  6 ++++++
 7 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/PageTitle.module.scss b/src/components/PageTitle.module.scss
index 73f266323..f45086b11 100644
--- a/src/components/PageTitle.module.scss
+++ b/src/components/PageTitle.module.scss
@@ -1,6 +1,5 @@
 .pageTitle {
   font-size: 2.5rem;
-  margin-top: 0;
   margin-bottom: 0;
   font-weight: normal;
 }
diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss
index f49307611..c6302b766 100644
--- a/src/components/PropList.module.scss
+++ b/src/components/PropList.module.scss
@@ -1,8 +1,11 @@
 .container {
   display: flex;
-  border-bottom: solid var(--color-neutrals-200) 1px;
-  padding-bottom: 2rem;
-  margin-top: 1rem;
+
+  &:not(:last-child) {
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+    border-bottom: solid var(--color-neutrals-200) 1px;
+  }
 }
 
 .info {
diff --git a/src/components/ReferenceExample.module.scss b/src/components/ReferenceExample.module.scss
index bd97e7e85..7d3a880af 100644
--- a/src/components/ReferenceExample.module.scss
+++ b/src/components/ReferenceExample.module.scss
@@ -10,5 +10,7 @@
 }
 
 .title {
+  font-weight: bold;
+  font-size: 1.25rem;
   margin-bottom: 1rem;
 }
diff --git a/src/components/ReferencePreview.js b/src/components/ReferencePreview.js
index f027d712e..c2348b1a6 100644
--- a/src/components/ReferencePreview.js
+++ b/src/components/ReferencePreview.js
@@ -8,7 +8,6 @@ const EXAMPLE_CSS = `
 .nr1-ReferenceExample {
   line-height: 1.36;
   font-weight: 400;
-  background-color: #fff;
   color: #000e0e;
   font-size: 12px;
   font-family: Open Sans,Segoe UI,Tahoma,sans-serif;
diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js
index 63e26d911..d38cc355c 100644
--- a/src/templates/ComponentReferenceTemplate.js
+++ b/src/templates/ComponentReferenceTemplate.js
@@ -50,15 +50,13 @@ const ComponentReferenceTemplate = ({ data }) => {
         <ReactMarkdown source={componentDescription} />
       </section>
 
-      <section className={templateStyles.section}>
-        <h2>Usage</h2>
-        <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
-      </section>
-
       {examples.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>Examples</h2>
           <div>
+            <h2 className={templateStyles.sectionTitle}>Examples</h2>
+            <div className={templateStyles.section}>
+              <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
+            </div>
             {examples.map((example, i) => (
               <ReferenceExample
                 key={i}
@@ -79,13 +77,13 @@ const ComponentReferenceTemplate = ({ data }) => {
       )}
 
       <section className={templateStyles.section}>
-        <h2>Props</h2>
+        <h2 className={templateStyles.sectionTitle}>Props</h2>
         <PropList propTypes={propTypes} />
       </section>
 
       {methods.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>Methods</h2>
+          <h2 className={templateStyles.sectionTitle}>Methods</h2>
           {methods.map((method, i) => (
             <MethodReference key={i} method={method} />
           ))}
@@ -94,7 +92,7 @@ const ComponentReferenceTemplate = ({ data }) => {
 
       {typeDefs.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>Type definitions</h2>
+          <h2 className={templateStyles.sectionTitle}>Type definitions</h2>
           {typeDefs.map((typeDef, i) => (
             <TypeDefReference key={i} typeDef={typeDef} />
           ))}
diff --git a/src/templates/ComponentReferenceTemplate.module.scss b/src/templates/ComponentReferenceTemplate.module.scss
index 887a5965d..2b0b44c18 100644
--- a/src/templates/ComponentReferenceTemplate.module.scss
+++ b/src/templates/ComponentReferenceTemplate.module.scss
@@ -1,4 +1,6 @@
 .componentExample:not(:last-child) {
+  border-bottom: 1px solid var(--color-neutrals-100);
+  padding-bottom: 2rem;
   margin-bottom: 2rem;
 }
 
diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss
index 26cf29ff0..32003863d 100644
--- a/src/templates/ReferenceTemplate.module.scss
+++ b/src/templates/ReferenceTemplate.module.scss
@@ -11,3 +11,9 @@
 .section:not(:last-child) {
   margin-bottom: 2rem;
 }
+
+.sectionTitle {
+  margin-bottom: 1rem;
+  font-size: 1.75rem;
+  font-weight: bold;
+}