fix(client): adjust guide styles

client/src/components/layouts/GuideLayout.js

@@ -69,7 +69,7 @@ class Layout extends React.Component {
               }) => (
                 <Fragment>
                   <Spacer size={1} />
-                  <Grid>
+                  <Grid className='guide-container'>
                     <Row>
                       <Col
                         md={4}
@@ -110,7 +110,6 @@ class Layout extends React.Component {
   }
 }
 
-
 Layout.displayName = 'Layout';
 Layout.propTypes = propTypes;
 

client/src/components/layouts/components/guide/NavItem.js

@@ -20,7 +20,7 @@ class NavItem extends React.Component {
     const { isStubbed, path, title } = this.props;
     return (
       <li>
-        <Link data-navitem='true' onClick={this.handleClick} to={path}>
+        <Link onClick={this.handleClick} to={path}>
           <span className={'navItemTitle' + (isStubbed ? ' stubbed' : '')}>
             {title}
           </span>

client/src/components/layouts/components/guide/NavPanel.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Panel } from '@freecodecamp/react-bootstrap';
-import { navigate } from 'gatsby';
+import { Link } from 'gatsby';
 
 const propTypes = {
   children: PropTypes.any,
@@ -53,14 +53,13 @@ class NavPanel extends Component {
   }
 
   handleTitleClick() {
-    const { path, toggleDisplaySideNav, onNavigate } = this.props;
+    const { toggleDisplaySideNav, onNavigate } = this.props;
     toggleDisplaySideNav();
-    navigate(path);
     onNavigate();
   }
 
   renderHeader() {
-    const { isExpanded, title } = this.props;
+    const { isExpanded, path, title } = this.props;
     return (
       <div className='title' onClick={this.handleHeaderClick}>
         <span
@@ -68,7 +67,7 @@ class NavPanel extends Component {
             'caret ' + (isExpanded ? 'caretStyle expanded' : 'caretStyle')
           }
         />
-        <span onClick={this.handleTitleClick}>{title}</span>
+        <Link onClick={this.handleTitleClick} to={path}>{title}</Link>
       </div>
     );
   }

client/src/components/layouts/guide.css

@@ -1,47 +1,13 @@
-/* globals */
-
-.colourDarkGrey {
-  color: #444;
-}
-
-.colourGreen {
-  color: #006400;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-:global body {
-  font-family: 'Lato', sans-serif, 'FontAwesome';
+.guide-container {
   font-size: 16px;
 }
 
-:global h1,
-:global h2,
-:global h3,
-:global h4,
-:global h5,
-:global h6 {
-  /* Bootstrap sets weight to 500, we don't have that */
-  font-weight: 700;
-}
-
-:global h2:first-child {
-  margin-top: 0;
-}
-
-:global td,
-:global th {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  padding: 10px;
-}
-
 /* Breadcrumbs */
 
 .breadcrumb {
   display: inline-block;
   padding: 5px 10px;
+  margin: 0;
   margin-bottom: 5px;
   opacity: 0.8;
   transition: opacity 0.1s ease-out;
@@ -55,6 +21,10 @@
   color: #006400;
 }
 
+.breadcrumb > li {
+  margin: 0;
+}
+
 .breadcrumb > li + li:before {
   content: '\203A';
   color: #555;
@@ -105,11 +75,18 @@
   margin-bottom: 0;
 }
 
+.navPanelUl > li {
+  margin-bottom: 0;
+}
+
+.navItemTitle {
+  margin-left: 19px;
+}
+
 .panelStyle {
   border: none !important;
   border-radius: 0;
   box-shadow: none;
-  color: #006400;
   padding: 0;
 }
 
@@ -136,7 +113,11 @@
   border: none;
   border-radius: 0;
   cursor: pointer;
-  color: #006400;
+}
+
+.night .panelStyle,
+.night .title {
+  background-color: #333;
 }
 
 @media (max-width: 992px) {