chore: Tweak styling and naming for step component

src/components/CodeSnippet.module.scss

@@ -6,6 +6,7 @@
   overflow-y: scroll;
 
   pre {
+    box-sizing: border-box;
     margin: 0;
     height: 100%;
     overflow-y: scroll;

src/components/Intro.js

@@ -7,7 +7,7 @@ const Intro = ({ children }) => (
 );
 
 Intro.propTypes = {
-  children: Proptypes.node,
+  children: Proptypes.node.isRequired,
 };
 
 export default Intro;

src/components/Step.js

@@ -2,18 +2,18 @@ import React from 'react';
 import styles from './Step.module.scss';
 import Proptypes from 'prop-types';
 
-const Step = ({ children, stepNumber, stepTitle }) => (
+const Step = ({ children, stepNumber, title }) => (
   <div className={styles.wrapper}>
     {stepNumber && <p className={styles.stepNumber}>{`Step ${stepNumber}`}</p>}
-    {stepTitle && <p className={styles.stepTitle}>{stepTitle}</p>}
+    {title && <p className={styles.title}>{title}</p>}
     <div className={styles.container}>{children}</div>
   </div>
 );
 
 Step.propTypes = {
-  children: Proptypes.node,
+  children: Proptypes.node.isRequired,
   stepNumber: Proptypes.string,
-  stepTitle: Proptypes.string,
+  title: Proptypes.string,
 };
 
 export default Step;

src/components/Step.module.scss

@@ -7,7 +7,7 @@
     font-size: 0.75rem;
     color: var(--color-neutrals-600);
   }
-  .stepTitle {
+  .title {
     color: var(--color-neutrals-900);
     font-weight: bold;
     margin-bottom: 1rem;

src/components/styles.scss

@@ -58,6 +58,8 @@ main {
 
 a {
   cursor: pointer;
+  text-decoration: none;
+  color: var(--color-brand-800);
 }
 
 img {
@@ -128,6 +130,18 @@ button,
   }
 }
 
+ul {
+  padding-left: 30px;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--color-neutrals-700);
+  font-size: 1rem;
+}
+
+li {
+  margin-bottom: 1rem;
+}
+
 /*-- Layout Styles --*/
 .Layout {
   min-height: 100vh;

src/markdown-pages/example.mdx

@@ -19,34 +19,36 @@ This guide requires that you have the following:
 - API Key
 - New Relic One CLI downloaded
 
+<br/>
+
 ### Set up the sample application
 
 You can use this application for trying things out. Or, skip this section and start with "Add time picker" below, if you just want to add the time picker to an existing applicaiton. 
 
-<Step stepNumber="1 of 4" stepTitle="Clone the example application">
+<Step stepNumber="1 of 4" title="Clone the example application">
 
 This repo contains an example application and code that supports a handful of how to guides for cool and useful features you migth want in your applications. If you've tried other how to guides, you might have already cloned this repo, in which case, you should probably go ahead and update from master.
 
-```
+```shell lineNumbers=false
 git clone https://github.com/newrelic/nr1-how-to.git
 ```
 
 </Step>
 
-<Step stepNumber="2 of 4" stepTitle="Set up and run the application locally">
+<Step stepNumber="2 of 4" title="Set up and run the application locally">
 
 Use the New Relic One CLI to update the application UUID and run the application locally. In the terminal,  change to the time picker directory.
 
-```
+```shell lineNumbers=false
 cd /nr1-howto/add-time-picker
 ```
 </Step>
 
-<Step stepNumber="3 of 4" stepTitle="Make sure you're getting data from the right New Relic account">
+<Step stepNumber="3 of 4" title="Make sure you're getting data from the right New Relic account">
 
 In your preferred text editor, open the `/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet/index.js` and then edit the following line to use your account ID (find your account ID in the Profile section of the Developer Center, where you downloaded the New Relic One CLI):
 
-```
+```jsx
 this.accountId = <REPLACE ME WITH YOUR ACCOUNT ID>;
 ```
 
@@ -56,7 +58,7 @@ this.accountId = <REPLACE ME WITH YOUR ACCOUNT ID>;
 
 Update the UUID and serve the application by running the following:
 
-```
+```shell lineNumbers=false
 nr1 nerdpack:uuid -gf
 nr1 nerdpack:serve
 ```
@@ -75,5 +77,4 @@ Click the launcher, and the dashboard opens with your New Relic account transact
 ### Related info
 
 - [New Relic documentation](https://docs.newrelic.com)
-- [Community page for how to add a time picker](https://discuss.newrelic.com/t/how-to-add-the-time-picker-to-nrql-queries/94268)
-- 
+- [Community page for how to add a time picker](https://discuss.newrelic.com/t/how-to-add-the-time-picker-to-nrql-queries/94268)