Ftr/dev 15216 Continue the Award Data Archive Visual Enhancements

src/_scss/pages/bulkDownload/archive/_archiveForm.scss

@@ -1,85 +1,51 @@
-.award-data-archive-form {
-  background-color: #f3fafc;
-  padding: rem(15) rem(5);
+form {
+  .award-data-archive-form {
+    background-color: $gray-5;
+    border-radius: rem(8);
+    padding: rem(24);
+    display: flex;
 
-  .form-title__wrapper {
-    @include display(flex);
-    @include justify-content(space-between);
-    margin-bottom: rem(10);
-  }
-  .form-title {
-    padding-left: rem(15);
-    font-size: 18px;
-    font-weight: 600;
-    line-height: 23px;
-  }
-  .form-width-master {
-    width: 100%;
-  }
-  form {
-    @include media($medium-screen) {
-      @include display(flex);
-      @include justify-content(space-around);
-    }
-    @import "../form/agencyPicker";
+    .combo-box {
+      margin: 0;
 
-    .filter-picker {
-      padding: 0 rem(15);
-      .select-label {
-        font-size: rem(14);
-        text-transform: capitalize;
+      &:first-of-type {
+        margin-right: rem(24);
+        width: 75%;
       }
-      .field-picker {
-        margin: rem(5) 0 0 0;
-        .selected-button {
-          width: 100%;
-          border: solid 1px $color-gray-light;
-          background-color: $color-white;
-          &:hover,
-          &:active {
-            background-color: $color-white;
-          }
-          .label {
-            font-weight: 400;
-            font-size: 14px;
-            width: 100%;
-            @include display(flex);
-            @include justify-content(space-between);
+    }
+  }
 
-            .arrow-icon {
-              @include align-self(center);
-            }
-          }
-          .label--disabled {
-            color: #d2d3d6;
-          }
-        }
-        .field-list {
-          width: auto;
-        }
-      }
-      @include media($medium-screen) {
-        &.agency-picker {
-          width: 45%;
+  .award-type__container {
+    display: flex;
+    align-items: center;
+    margin: rem(24) 0 rem(12) 0;
+    font-size: $small-font-size;
+    font-weight: $font-semibold;
+    line-height: 1.5;
+
+    .award-type__buttons {
+      margin-left: $global-margin;
+
+      button {
+        margin: 0;
+        padding: rem(10);
+        border: rem(2) solid $blue-60v;
+        background-color: transparent;
+        color: $blue-60v;
+
+        &.active {
+          background-color: $blue-60v;
+          color: $color-white;
         }
-        &.type-picker {
-          width: 25%;
+
+        &:first-of-type {
+          border-radius: rem(4) 0 0 rem(4);
         }
-        &.fy-picker {
-          width: 15%;
+
+        &:last-of-type {
+          border-radius: 0 rem(4) rem(4) 0;
         }
       }
     }
-    .form__button {
-      padding: 0 rem(15);
-      @include media($medium-screen) {
-        width: rem(120);
-      }
-      input {
-        width: 100%;
-        margin-top: rem(19);
-        height: rem(36);
-      }
-    }
   }
 }

src/_scss/pages/bulkDownload/archive/_archiveTable.scss

@@ -1,5 +1,5 @@
 .award-data-archive-table {
-  overflow-x: scroll;
+  overflow-x: auto;
   table {
     margin-top: 0;
     thead {

src/_scss/pages/bulkDownload/archive/archive.scss

@@ -1,11 +1,41 @@
 .award-data-archive-content {
+  color: $gray-90;
+
   @include media($medium-screen) {
     padding: 0 rem(30);
   }
+
   h2 {
-    margin-top: 0;
-    font-weight: 400;
+    margin: 0;
+    font-size: $lead-font-size;
+    line-height: 1.5;
+    font-weight: $font-semibold;
   }
+
+  p {
+    margin: 0;
+
+    &:first-of-type {
+      margin: 0 0 rem(24) 0;
+    }
+  }
+
+  ul {
+    margin: 0;
+
+    li {
+      margin: 0;
+    }
+  }
+
+  .download-filter__title-wrapper {
+    margin-top: rem(40);
+
+    .download-filter__title {
+      font-size: $base-font-size;
+    }
+  }
+
   @import "archiveForm";
   @import "archiveTable";
 }

src/_scss/pages/bulkDownload/form/downloadForm.scss

@@ -1,5 +1,7 @@
 .download-center-form,
 .bulk-download {
+  @import "filterSectionTitle";
+
   .download-filter {
     padding: 0;
     padding-bottom: rem(40);
@@ -8,8 +10,6 @@
       width: 96%;
     }
 
-    @import "filterSectionTitle";
-
     .download-filter__container {
       display: flex;
     }

src/js/components/bulkDownload/FilterSelectionTitle.jsx

@@ -76,7 +76,7 @@ const titleData = {
         icon: "list",
         preSpan: "Select a",
         span: "Budget Function",
-        postSpan: <> and/or <span 
+        postSpan: <> and/or <span
             className={`download-filter__title_em no-right-margin`}
             style={{backgroundColor: '#F7F2FF'}} >
             Agency
@@ -121,7 +121,7 @@ const titleData = {
         icon: "calendar",
         preSpan: "Select a",
         span: "Fiscal Year",
-        postSpan: <> and <span 
+        postSpan: <> and <span
             className={`download-filter__title_em no-right-margin`}
             style={{backgroundColor: '#E8F5FF'}} >
             Period
@@ -131,6 +131,26 @@ const titleData = {
         background: '#E8F5FF',
         fill: '#0B4778',
         addClassName: ""
+    },
+    agencyFy: {
+        icon: "building-columns",
+        preSpan: "Select an ",
+        span: "Agency",
+        postSpan: (
+            <>
+                and
+                <span
+                    className={`download-filter__title_em no-right-margin`}
+                    style={{backgroundColor: '#E5FAFF'}} >
+                    Fiscal Year
+                </span>
+                &nbsp;to filter the table below.
+            </>
+        ),
+        showRequired: false,
+        background: '#E5FAFF',
+        fill: '#0E4F5C',
+        addClassName: ""
     }
 }
 
@@ -152,13 +172,13 @@ const FilterSectionTitle = ({
     return (
         <div className="download-filter__title-wrapper">
             <h4 className="download-filter__title">
-                <div 
-                    className="title-icon" 
+                <div
+                    className="title-icon"
                     style={{backgroundColor: background}} >
                     <FontAwesomeIcon icon={icon} color={fill} />
                 </div>
                 {preSpan}
-                <span 
+                <span
                     className={`download-filter__title_em ${addClassName}`}
                     style={{backgroundColor: background}} >
                     {span}

src/js/components/bulkDownload/archive/AwardDataArchiveContent.jsx

@@ -5,7 +5,6 @@
 
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router';
 
 import isMobileContext from "context/IsMobileContext";
 import AwardDataArchiveForm from './AwardDataArchiveForm';
@@ -34,26 +33,25 @@ const AwardDataArchiveContent = ({
 
     return (
         <div className="award-data-archive-content">
-            <h2>Award Data Archive</h2>
+            <h2>Download major agencies’ award transaction data for full fiscal years.</h2>
             <p>
-                Welcome to the <b>Award Data Archive</b>, which features major agencies&rsquo; award transaction data
-                for full fiscal years.
-                They&rsquo;re a great way to get a view into broad spending trends and, best of all, the files are
-                already prepared &mdash; you can access them instantaneously.
+                A great way to get a view into broad spending trends and, best of all,
+                the files are already prepared — you can access them instantaneously.
             </p>
             <p>
                 New files are uploaded by the 15th of each month.
-                Check the Data As Of column to see the last time files were generated.
-                <b> Full files</b> feature data for the fiscal year up until the date the file was prepared, and <b>delta
-                files</b> feature only new, modified, and deleted data since the date the last month&apos;s files were
-                generated.
-                The `correction_delete_ind` column in the delta files indicates whether a record has been modified (C),
-                deleted (D), or added (blank).
-                To download data prior to FY 2008, visit our
-                <Link className="usa-bold-link" to="/download_center/custom_award_data"> Custom Award Data </Link>
-                page.
+                Check the &#39;Data As Of&#39; column to see the last time files were generated.
+                There are two downloadable archive file types:
             </p>
-            <p>Ready to grab your data? Complete the form below.</p>
+            <ul>
+                <li>
+                    <b> Full files</b> - data for the fiscal year up until the date the file was prepared
+                </li>
+                <li>
+                    <b>Delta files</b> - only new, modified, and deleted data since the date the last month&#39;s files were generated.
+                    The `correction_delete_ind` column in the delta files indicates whether a record has been modified (C), deleted (D), or added (blank).
+                </li>
+            </ul>
             <AwardDataArchiveForm
                 filters={filters}
                 updateFilter={updateFilter}