update the social-icons svg path and tweak the layout

GSA · Aug 14, 2024 · 3e09731 · 3e09731
1 parent e06a799
commit 3e09731
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 23 deletions.
diff --git a/app/assets/images/facebook.svg b/app/assets/images/facebook.svg
diff --git a/app/assets/images/github.svg b/app/assets/images/github.svg
diff --git a/app/assets/images/instagram.svg b/app/assets/images/instagram.svg
diff --git a/app/assets/images/linkedin.svg b/app/assets/images/linkedin.svg
diff --git a/app/assets/images/twitter.svg b/app/assets/images/twitter.svg
diff --git a/app/assets/images/youtube.svg b/app/assets/images/youtube.svg
diff --git a/app/assets/uswds/_uswds-theme.scss b/app/assets/uswds/_uswds-theme.scss
@@ -1,4 +1,5 @@
-@use "uswds-core" with ($theme-image-path: "images",
+@use "uswds-core" with (
+  $theme-image-path: "images",
   $theme-font-path: "fonts"
 );
 
@@ -19,7 +20,11 @@
 }
 
 .usa-footer__social-links .usa-social-link__icon {
-  background-color: white;
+  /*
+   * override the default svg stroke color to match .bg-primary-darker background-color: #162e51
+   * from: https://codepen.io/sosuke/pen/Pjoqqp
+   */
+  filter: invert(12%) sepia(50%) saturate(1798%) hue-rotate(191deg) brightness(94%) contrast(89%);
 }
 
 .usa-social-link {

diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
@@ -1,15 +1,13 @@
 <footer class="usa-footer usa-footer--big">
   <div class="usa-footer__primary-section">
     <div class="grid-container">
-      <div class="grid-container usa-footer__return-to-top">
+      <div class="usa-footer__return-to-top">
         <a href="#">Return to top</a>
       </div>
-      <div class="grid-row grid-gap">
         <div class="tablet:grid-col-8">
           <nav class="usa-footer__nav" aria-label="Footer navigation,,">
-            <div class="grid-row grid-gap-4">
+            <div class="grid-row grid-gap-4 usa-footer__primary-content usa-footer__primary-content--collapsible">
               <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
-                <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
                   <%# Col 1 %>
                   <ul class="usa-list usa-list--unstyled">
                     <li class="usa-footer__secondary-link">
@@ -25,10 +23,8 @@
                       <a href="javascript:void(0);">Privacy Policy</a>
                     </li>
                   </ul>
-                </section>
               </div>
               <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
-                <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
                   <%# Col 2 %>
                   <ul class="usa-list usa-list--unstyled">
                     <li class="usa-footer__secondary-link">
@@ -44,10 +40,8 @@
                       <a href="javascript:void(0);">Active Challenges</a>
                     </li>
                   </ul>
-                </section>
               </div>
               <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
-                <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
                   <%# Col 3 %>
                   <ul class="usa-list usa-list--unstyled">
                     <li class="usa-footer__secondary-link">
@@ -63,12 +57,10 @@
                       <a href="javascript:void(0);">USA.gov</a>
                     </li>
                   </ul>
-                </section>
               </div>
             </div>
           </nav>
         </div>
-      </div>
     </div>
   </div>
   <div class="usa-footer__secondary-section bg-primary-darker footer-white">
@@ -88,27 +80,27 @@
           <div class="usa-footer__social-links grid-row grid-gap-1">
             <div class="grid-col-auto">
               <a class="usa-social-link" href="javascript:void(0);">
-                <img class="usa-social-link__icon" src="<%= image_path('twitter.svg') %>" alt="Twitter" />
+                <%= image_tag('images/usa-icons/twitter.svg', class: "usa-social-link__icon", alt: "Twitter") %>
               </a>
             </div>
             <div class="grid-col-auto">
               <a class="usa-social-link" href="javascript:void(0);">
-                <img class="usa-social-link__icon" src="<%= image_path('facebook.svg') %>" alt="Facebook" />
+                <%= image_tag('images/usa-icons/facebook.svg', class: "usa-social-link__icon", alt: "Facebook") %>
               </a>
             </div>
             <div class="grid-col-auto">
               <a class="usa-social-link" href="javascript:void(0);">
-                <img class="usa-social-link__icon" src="<%= image_path('youtube.svg') %>" alt="YouTube" />
+                <%= image_tag('images/usa-icons/youtube.svg', class: "usa-social-link__icon", alt: "YouTube") %>
               </a>
             </div>
             <div class="grid-col-auto">
               <a class="usa-social-link" href="javascript:void(0);">
-                <img class="usa-social-link__icon" src="<%= image_path('linkedin.svg') %>" alt="LinkedIn" />
+                <%= image_tag('images/usa-icons/linkedin.svg', class: "usa-social-link__icon", alt: "LinkedIn") %>
               </a>
             </div>
             <div class="grid-col-auto">
               <a class="usa-social-link" href="javascript:void(0);">
-                <img class="usa-social-link__icon" src="<%= image_path('github.svg') %>" alt="Github" />
+                <%= image_tag('images/usa-icons/github.svg', class: "usa-social-link__icon", alt: "Github") %>
               </a>
             </div>
           </div>