Merge pull request #157 from GSA/wwang-issue135

update styles based on QA design feedback

sass/_components/home.scss

@@ -22,12 +22,12 @@
       }
       .usa-logo-img {
         float: left;
-        height: units(5);
+        height: 5rem;
         margin-right: units(1);
 
         @include at-media($theme-header-min-width) {
           margin-top: 0;
-          height: units(6);
+          height: 5rem;
         }
 
         + .usa-logo__text {
@@ -38,7 +38,7 @@
 
     &.usa-header--extended .usa-logo-img {
       @include at-media($theme-header-min-width) {
-        height: 6rem;
+        height: 5rem;
       }
     }
   }
@@ -47,6 +47,7 @@
 // Hero Section
 .usa-hero{
     color: color('ink');
+    line-height: line-height('body', 6);
     .usa-hero__callout{
         background-color: white;
         max-width: 27em;
@@ -60,19 +61,30 @@
   display:flex;
   align-items: center;
 }
+.usa-graphic-list{
+  font-size: 1em;
+}
+
 .usa-section--dark{
-  color: white;
-  h2, h3 {
+    line-height: line-height('body', 6);
     color: white;
-  }
+    background-color: color('primary-dark');
+    h2, h3 {
+      color: white;
+    }
 }
 
+
 // based on new design, h1-h3 are using Merriweather and use base darkest color
 h1, h2, h3{
   font-family: family('serif');
   color: color('base-darkest');
 }
 
+h2 {
+  font-size: 1.75em;
+}
 .base-color{
   color:color('base');
-}
+}
+

sass/_uswds-theme-custom-styles.scss

@@ -26,6 +26,7 @@ i.e.
 
 html, body {
    height: 100%;
+   line-height: line-height('body', 6);
 }
 
 .flex-shrink-0 {
@@ -39,4 +40,5 @@ html, body {
 }
 .flex-fill {
    flex: 1 0 auto;
-}
+}
+

src/components/Businesslines.astro

@@ -1,16 +1,16 @@
 ---
-import redcard from "../assets/images/red-card.png"
-import bluecard from "../assets/images/blue-card.png"
-import silvercard from "../assets/images/silver-card.png"
-import greencard from "../assets/images/green-card.png"
-import yellowcard from "../assets/images/yellow-card.png"
+import redcard from "../assets/images/red-card.svg"
+import bluecard from "../assets/images/blue-card.svg"
+import silvercard from "../assets/images/silver-card.svg"
+import greencard from "../assets/images/green-card.svg"
+import yellowcard from "../assets/images/yellow-card.svg"
 ---
 <section class="usa-graphic-list usa-section usa-section--dark">
   <div class="grid-container">
     <div class="grid-row grid-gap margin-bottom-4">
       <div class="tablet:grid-col-6">
         <div class="padding-left-1">
-          <h2>Business Line</h2>
+          <h2>Business Lines</h2>
         </div>
       </div>
       <div class="tablet:grid-col-6 align-items-center">
@@ -24,7 +24,9 @@ import yellowcard from "../assets/images/yellow-card.png"
         <div class="grid-container padding-0">
           <div class="grid-row grid-gap">
             <div class="mobile-lg:grid-col">
-              <img src={redcard} class="usa-media-block__img" alt="Red charge card with the word Purchase and numbers 1234 5678 9012 3456 and the name John Smith, with a bird in the background">
+              <img src={redcard} class="usa-media-block__img" 
+              width="217px"
+              alt="Red charge card with the word Purchase and numbers 1234 5678 9012 3456 and the name John Smith, with a bird in the background">
             </div>
             <div class="usa-media-block__body mobile-lg:grid-col">
               <h3 class="usa-graphic-list__heading">Purchase</h3>

src/components/Callout.astro

@@ -6,40 +6,40 @@ import callout_forum from '../assets/images/callout_forum.svg'
 <section class="sp_callout">
     <div class="grid-container margin-y-6">
         <div class="grid-row grid-gap ">
-          <div class="tablet:grid-col-6">
+          <div class="tablet:grid-col-6 margin-top-1">
             <img
              src ={callout_889}
              alt ="Three panels from a screen, the first panel has a magnifying glass and reads use the 889 search to find your vendor, the second panel has a green check mark and reads in compliance with Section 889, and third panel has a red exclamation mark and reads not in compliance with Section 889."
             >
           </div>
           <div class="tablet:grid-col-6">
-            <h2>Section 889 Search</h2>
+            <h2 class="margin-top-0">Section 889 Search</h2>
             <p>Our Section 889 search tool makes it easy to check an entity’s Section 889 status in <a href="https://sam.gov/" class="usa-link--external">SAM.gov</a>.</p>
             <p><a href="https://889.smartpay.gsa.gov/" class="usa-link--external">Go to the 889 search tool</a></p>
           </div>
         </div>
         <div class="grid-row grid-gap margin-y-2">
-            <div class="tablet:grid-col-6">
+            <div class="tablet:grid-col-6 margin-top-1">
                 <img
                 src ={callout_map}
                 alt ="A map of the contiguous United States with Utah highlighted in a darker color than the rest of the states, with Alaska, Hawaii, and U.S territories also shown."
                 >
             </div>
             <div class="tablet:grid-col-6">
-                <h2>State Tax Information</h2>
+                <h2 class="margin-top-0">State Tax Information</h2>
                 <p>Check the tax-exempt status and policies of U.S. states and territories.</p>
                 <p><a href="#">Go to tax information</a></p>
             </div>
         </div>
         <div class="grid-row grid-gap">
-            <div class="tablet:grid-col-6">
+            <div class="tablet:grid-col-6 margin-top-1">
                 <img
                 src ={callout_forum}
                 alt ="An illustration of a computer display showing a blue, red, and green charge card in a panel on one side and an illustration of a person wearing a headset and microphone in a panel on the other side."
                 >
             </div>
             <div class="tablet:grid-col-6">
-                <h2>2023 GSA SmartPay Virtual Training Forum</h2>
+                <h2 class="margin-top-0 margin-bottom-1">2023 GSA SmartPay Virtual Training Forum</h2>
                 <span class="base-color">June 13-15, 2023</span>
                 <p>This three-day virtual event will feature comprehensive training covering all aspects of how to successfully manage your charge card program.
                 </p>

src/components/GSAHeader.astro

@@ -1,5 +1,5 @@
 ---
-import GSALogo from '../assets/images/gsa-smartpay-logo.png'
+import GSALogo from '../assets/images/gsa-smartpay-program-logo.svg'
 import closeIcon from '../assets/images/usa-icons/close.svg'
 import searchIcon from "../assets/images/usa-icons/search--white.svg"
 
@@ -117,7 +117,7 @@ import searchIcon from "../assets/images/usa-icons/search--white.svg"
               aria-expanded="false"
               aria-controls="extended-nav-section-policy"
             >
-              <span>Policy&Audits</span>
+              <span>Policies & Audits</span>
             </button>
             <ul id="extended-nav-section-policy" class="usa-nav__submenu">
               <li class="usa-nav__submenu-item">