SUP-180: local footer initial work

SU-SWS · Apr 5, 2024 · 8f50956 · 8f50956
1 parent 14f5984
commit 8f50956
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git a/src/components/config-pages/local-footer.tsx b/src/components/config-pages/local-footer.tsx
@@ -19,6 +19,7 @@ import {H2} from "@components/elements/headers";
 import TwitterIcon from "@components/elements/icons/TwitterIcon";
 import YoutubeIcon from "@components/elements/icons/YoutubeIcon";
 import FacebookIcon from "@components/elements/icons/FacebookIcon";
+import InstagramIcon from "@components/elements/icons/InstagramIcon";
 import { Maybe, StanfordLocalFooter} from "@lib/gql/__generated__/drupal.d";
 import {buildUrl} from "@lib/drupal/utils";
 
@@ -59,44 +60,44 @@ const LocalFooter = ({
   }
 
   return (
-    <div className="local-footer bg-foggy-light py-20">
+    <div className="local-footer bg-foggy-light rs-py-6 bg-stone-dark">
       <div className="centered">
-        <div className="mb-20">
+        <div className="rs-mb-6">
           <FooterLockup {...lockupProps} />
         </div>
 
         <div
-          className="grid md:grid-cols-2 lg:grid-cols-4 gap-32 [&_a]:font-normal [&_a]:no-underline [&_a:hover]:underline [&_a:hover]:text-black [&_a:focus]:underline [&_a:focus]:text-black [&_a]:transition">
+          className="grid md:grid-cols-2 lg:grid-cols-4 gap-32 [&_a]:font-normal [&_a]:underline [&_a]:text-white [&_a]:decoration-fog-dark [&_a:hover]:underline [&_a:hover]:text-fog-dark [&_a:focus]:underline [&_a:focus]:text-fog-dark [&_a]:transition">
           <div>
 
-            {suLocalFootAddress &&
-              <Address {...suLocalFootAddress}/>
-            }
-
-            {suLocalFootAction &&
-              <ul className="list-unstyled">
-                {suLocalFootAction.map((link, index) => {
+          {suLocalFootSocial &&
+              <ul className="list-unstyled flex gap-2">
+                {suLocalFootSocial.map((link, index) => {
                   if (!link.url) return;
                   return (
                     <li key={`footer-action-link-${index}`}>
                       <Link href={link.url}>
-                        {link.title}
+                        <SocialIcon url={link.url}/>
+                        <span className="sr-only">{link.title}</span>
                       </Link>
                     </li>
                   )
                 })}
               </ul>
             }
 
-            {suLocalFootSocial &&
-              <ul className="list-unstyled flex gap-2">
-                {suLocalFootSocial.map((link, index) => {
+            {/* {suLocalFootAddress &&
+              <Address {...suLocalFootAddress}/>
+            } */}
+
+            {suLocalFootAction &&
+              <ul className="list-unstyled">
+                {suLocalFootAction.map((link, index) => {
                   if (!link.url) return;
                   return (
                     <li key={`footer-action-link-${index}`}>
                       <Link href={link.url}>
-                        <SocialIcon url={link.url}/>
-                        <span className="sr-only">{link.title}</span>
+                        {link.title}
                       </Link>
                     </li>
                   )
@@ -160,9 +161,10 @@ const LocalFooter = ({
 }
 
 const SocialIcon = ({url}: { url: string }) => {
+  if (url.includes('facebook')) return <FacebookIcon/>
   if (url.includes('twitter.com')) return <TwitterIcon/>
   if (url.includes('youtube.com')) return <YoutubeIcon/>
-  if (url.includes('facebook')) return <FacebookIcon/>
+  if (url.includes('instagram')) return <InstagramIcon/>
   return null;
 }
 

diff --git a/src/components/elements/icons/TwitterIcon.tsx b/src/components/elements/icons/TwitterIcon.tsx
@@ -2,13 +2,13 @@ import {HTMLAttributes} from "react";
 
 const TwitterIcon = (props: HTMLAttributes<HTMLOrSVGElement>) => (
   <svg
-    width={28}
-    viewBox="0 0 512 512"
+    width={21}
+    viewBox="0 0 1200 1200"
     {...props}
   >
     <path
       fill="currentColor"
-      d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+      d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
     />
   </svg>
 )