Snapshot content

src/Home.css

@@ -50,13 +50,3 @@
 .home p {
   margin-top: 0;
 }
-.home .usa-button-secondary {
-  margin-top: 0;
-}
-.home .usa-label {
-  background-color: #f9c642;
-  color: #212121;
-  font-size: 0.8em;
-  font-weight: bold;
-  letter-spacing: 1.5px;
-}

src/common/Header.css

@@ -8,12 +8,17 @@
   margin-top: 3em;
 }
 
-.header .usa-font-lead,
+.header .font-lead,
 .header p {
   color: #5b616b;
   margin-top: 0;
 }
 
+.header .text-small {
+  font-size: 1.6rem;
+  max-width: 77rem;
+}
+
 .header.disabled h4 {
   color: #5b616b;
 }

src/common/LoadingIcon.css

@@ -44,8 +44,3 @@
   height: 30px;
   animation: loading-spin 1.2s linear infinite;
 }
-
-.usa-alert .LoadingIcon {
-  border: 4px solid #d6d7d9;
-  border-left-color: #0071bc;
-}

src/common/NotFound.css

@@ -0,0 +1,8 @@
+.NotFound {
+  max-width: 1040px;
+  margin: 0 auto;
+  padding: 0 3rem;
+}
+.NotFound .header {
+  border-bottom: none;
+}

src/common/NotFound.jsx

@@ -2,18 +2,18 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import Header from './Header.jsx'
 
+import './NotFound.css'
+
 const NotFound = () => {
   return (
-    <div className="usa-grid" id="main-content">
-      <div className="usa-width-one-whole">
-        <Header
-          type={1}
-          headingText="Sorry, something went wrong."
-          paragraphText="We can't seem to find the page you are looking for."
-        >
-          <Link to="/">Return to the data publication home page.</Link>
-        </Header>
-      </div>
+    <div className="NotFound" id="main-content">
+      <Header
+        type={1}
+        headingText="Sorry, something went wrong."
+        paragraphText="We can't seem to find the page you are looking for."
+      >
+        <Link to="/">Return to the data publication home page.</Link>
+      </Header>
     </div>
   )
 }

src/reports/Disclosure.jsx

@@ -70,7 +70,6 @@ class Disclosure extends React.Component {
         <p>Respondent ID: {institution.respondentId}</p>
         <a
           href="#"
-          className="usa-font-small"
           onClick={e => {
             e.preventDefault()
             this.setInstitution(institution)
@@ -134,7 +133,9 @@ class Disclosure extends React.Component {
                 name={
                   params.msaMdId
                     ? msaMd.name
-                    : params.institutionId ? 'Select a MSA/MD' : ''
+                    : params.institutionId
+                    ? 'Select a MSA/MD'
+                    : ''
                 }
                 id={params.msaMdId ? msaMd.id : ''}
                 link={
@@ -152,13 +153,17 @@ class Disclosure extends React.Component {
                   params.reportId
                     ? report.label
                     : params.msaMdId
-                      ? 'Select a report'
-                      : params.institutionId ? '' : ''
+                    ? 'Select a report'
+                    : params.institutionId
+                    ? ''
+                    : ''
                 }
                 id={params.reportId ? report.value : ''}
                 link={
                   params.msaMdId
-                    ? `/disclosure-reports/${params.year}/${institutionId}/${msaMd.id}`
+                    ? `/disclosure-reports/${params.year}/${institutionId}/${
+                        msaMd.id
+                      }`
                     : null
                 }
               />

src/reports/NationalAggregate.jsx

@@ -54,7 +54,7 @@ class NationalAggregate extends React.Component {
       <React.Fragment>
         <div className="NationalAggregate" id="main-content">
           {header}
-          <ol className="ProgressCards usa-grid-full">
+          <ol className="ProgressCards">
             <li>
               <ProgressCard
                 title="report"

src/reports/Report.jsx

@@ -25,10 +25,9 @@ class Report extends React.Component {
   generateCSV() {
     const report = this.state.report
     // TODO: create a function for this, it's also used in render as the "headingText"
-    let theCSV = `"Table ${report.table}: ${report.description}${report.table ===
-    'R1'
-      ? '"'
-      : `, ${report.year}"`}\n`
+    let theCSV = `"Table ${report.table}: ${report.description}${
+      report.table === 'R1' ? '"' : `, ${report.year}"`
+    }\n`
     const msa = report.msa
       ? `"MSA/MD: ${report.msa.id} - ${report.msa.name}"\n`
       : '"Nationwide"\n'
@@ -121,7 +120,9 @@ class Report extends React.Component {
         msaMdId = 'nationwide'
         reportId = 'IRS'
       }
-      url += `disclosure/${year}/${params.institutionId}/${msaMdId}/${reportId}.txt`
+      url += `disclosure/${year}/${
+        params.institutionId
+      }/${msaMdId}/${reportId}.txt`
     } else {
       url += `national/${year}/${reportId}.txt`
     }
@@ -242,9 +243,9 @@ class Report extends React.Component {
     let table = report.table
     if (table === 'IRS') table = 'R1'
     const headingText = report
-      ? `Table ${table}: ${report.description}${table === 'R1'
-          ? ''
-          : `, ${report.year}`}`
+      ? `Table ${table}: ${report.description}${
+          table === 'R1' ? '' : `, ${report.year}`
+        }`
       : null
 
     return (
@@ -267,9 +268,7 @@ class Report extends React.Component {
         </Header>
 
         {this.selectReport(report, reportType)}
-        <p className="usa-text-small report-date">
-          Report date: {report.reportDate}
-        </p>
+        <p className="report-date">Report date: {report.reportDate}</p>
       </div>
     )
   }

src/reports/Selector.css

@@ -6,6 +6,6 @@
   margin-bottom: 450px;
 }
 
-.Select .usa-alert {
+.Select .alert {
   color: #212121 !important;
 }

src/reports/Selector.jsx

@@ -31,9 +31,9 @@ class Selector extends React.Component {
           menuIsOpen
           options={this.props.options}
           noResultsText={
-            <div className="usa-alert usa-alert-error" role="alert">
-              <div className="usa-alert-body">
-                <h3 className="usa-alert-heading">No results found!</h3>
+            <div className="alert alert-error" role="alert">
+              <div className="alert-body">
+                <h3 className="alert-heading">No results found!</h3>
                 Sorry, there doesn't seem to be a match found. Please try again.
               </div>
             </div>

src/reports/snapshot/index.jsx

@@ -15,7 +15,14 @@ const Snapshot = () => {
           to download in both .csv and pipe delimited text file formats, and the 
           file specification files are available to download in PDF format."
       >
-        <p className="usa-text-small">
+        <p className="text-small">
+          Snapshot data has preserved some elements of historic LAR data files
+          that are not present in the Dynamic Data. These columns are "As of
+          Date", "Edit Status", "Sequence Number", and "Application Date
+          Indicator". Be aware that data load procedures that handle both files
+          will need to recognize this difference.
+        </p>
+        <p className="text-small">
           Use caution when analyzing loan amount and income, which do not have
           an upper limit and may contain outliers.
         </p>