Task/cooks 348 fix header line (#92)

* Centered line on analytics main header

* Change wording for analytics chart, adjusted annotations

* Undid accidental changes to first plot title style

* Remove unused new style

* Fixed unneeded diff

* More diff and unused style removals

* Moved styles to sass

* Linting

* Change factor chart back to original name

protx-client/src/components/ProTx/components/charts/MainChart.jsx

@@ -79,14 +79,12 @@ function MainChart({ data, showInstructions }) {
         )}  County`
       : 'Texas Statewide Data';
     return (
-      <div className="analytics-types-plot-layout">
-        <div className="plot-details-section">
-          <div className="plot-details-section-selected">
-            <span className="plot-details-section-selected-value">
-              {plotDetailSectionTitle}
-            </span>
-          </div>
-        </div>
+      <div className={styles['main-chart']}>
+        <span className={styles['main-chart-title']}>
+          <span className={styles['main-chart-title-text']}>
+            {plotDetailSectionTitle}
+          </span>
+        </span>
         <AnalyticsStateDistribution
           geography={selection.geography}
           selectedGeographicFeature={selection.selectedGeographicFeature}

protx-client/src/components/ProTx/components/charts/MainChart.module.scss

@@ -7,3 +7,18 @@
 .demographics-plot {
   max-height: 55vh;
 }
+.main-chart {
+  min-height: 3vh;
+  margin: 0.5vh 1vw;
+}
+.main-chart-title {
+  display: flex;
+  border-bottom: 1px solid var(--color-gray-very-dark);
+  font-size: calc(var(--font-size-normal) * 1.3);
+  font-weight: var(--font-weight-heavy);
+  text-align: center;
+}
+.main-chart-title-text {
+  display: inline;
+  width: 100%;
+}