content, design fixes

sass/components/_list.scss

@@ -19,3 +19,7 @@
     border-color: $blue-light-508;
   }
 }
+
+.caveats ul {
+  padding-left: 1rem;
+}

src/components/AboutTheData.js

@@ -32,24 +32,28 @@ class AboutTheData extends React.Component {
     const { caveats, links } = content.crimes[crime]
 
     return (
-      <div className="about-the-data" id="about-the-data">
-        <h3 className="mt0 mb4 fs-22 sm-fs-26">
+      <div
+        className="mb4 pt5 border-top border-blue-lighter"
+        id="about-the-data"
+      >
+        <h3 className="mt0 mb3 fs-22 sm-fs-26">
           About {lowerCase(crime)} data
         </h3>
         <div className="lg-flex">
-          <div className="flex-auto mb1 fs-14 sm-fs-16 black">
-            <p>
+          <div className="flex-auto mb1 lg-pr5 fs-14 sm-fs-16 black">
+            <p className="mb3">
               The FBI collects crime data through the&nbsp;
-              <a className="blue underline" href="https://ucr.fbi.gov/">
+              <a className="black underline" href="https://ucr.fbi.gov/">
                 Uniform Crime Reporting (UCR) Program
               </a>.
             </p>
             <div className="caveats">
               {caveats.map((c, i) =>
                 <div key={i}>
-                  <div className="bold">{c.heading}</div>
+                  <div className="mb-tiny bold caps">{c.heading}</div>
                   {/* eslint react/no-danger: 0 */}
                   <div
+                    className="mb3"
                     dangerouslySetInnerHTML={{
                       __html: markdown.render(c.text),
                     }}

src/components/Explorer.js

@@ -100,12 +100,11 @@ class Explorer extends React.Component {
         </div>
         <SidebarContainer onChange={this.handleSidebarChange} />
         <div className="site-content">
-          <div className="container-main mx-auto px2 md-py3 lg-px8">
+          <div className="container-main mx-auto px2 md-py3 lg-px3">
             <ExplorerHeaderContainer />
             {isAgency && <SparklineContainer />}
             {isAgency ? <AgencyChartContainer /> : <TrendContainer />}
             <NibrsContainer />
-            <hr className="mt0 mb3" />
             <AboutTheData
               crime={crime}
               onTermClick={term => dispatch(showTerm(term))}

src/components/Home.js

@@ -158,7 +158,7 @@ const Home = ({ appState, dispatch, router }) => {
           </div>
           <div>
             <Link
-              className="mb1 btn btn-primary btn-lg fs-18"
+              className="mb1 btn btn-primary btn-lg"
               to="/downloads-and-docs"
             >
               See all downloads

src/components/TrendSourceText.js

@@ -28,7 +28,7 @@ const TrendSourceText = ({ crime, place, since, until }) => {
   const hybrid = nibrs && srs
 
   return (
-    <div className="italic serif fs-12 mb8">
+    <div className="fs-12 italic serif">
       {!isArson
         ? <p>
             Source: FBI,

src/containers/NibrsContainer.js

@@ -93,7 +93,7 @@ const NibrsContainer = ({
   }
 
   return (
-    <div className="mb8">
+    <div className="mb6">
       <div className="mb2 p2 sm-p4 bg-white border-top border-blue border-w8">
         <h2 className="mt0 mb1 fs-24 sm-fs-28 sans-serif">
           {startCase(crime)} incident details reported by {placeDisplay}

src/containers/TrendContainer.js

@@ -66,7 +66,7 @@ const TrendContainer = props => {
   const isReady = !summaries.loading
 
   return (
-    <div>
+    <div className="mb7">
       <div className="mb2 p2 sm-p4 bg-white border-top border-blue border-w8">
         <h2 className="mt0 mb3 sm-mb5 fs-24 sm-fs-28 sans-serif">
           {startCase(crime)} rate in {startCase(place)}, {since}-{until}