Merge pull request #256 from CivicActions/MAHOME-1146-update-social-m…

…edia-icons MAHOME-1146: Remove Instagram Icon and Update Twitter Icon
CivicActions · Jan 19, 2024 · 472519f · 472519f
2 parents 8e422cb + 1fd1bfc
commit 472519f
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 35 deletions.
diff --git a/src/components/social-icons/social-icon.js b/src/components/social-icons/social-icon.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
-const SocialIcon = ({ index, link, icon, iconHover, alt }) => (
-  <a className={index} href={link} rel="nofollow" className="social-icon__item">
+const SocialIcon = ({ link, icon, iconHover, alt, platform }) => (
+  <a href={link} rel="nofollow" className={`social-icon__item ${platform}`}>
     <img className='black-icon' src={icon} alt={alt}></img>
       <img className='blue-icon' src={iconHover} alt={alt}></img>
   </a>

diff --git a/src/components/social-icons/social-icons.js b/src/components/social-icons/social-icons.js
@@ -5,8 +5,8 @@ import { socialMediaData } from '../../data';
 const SocialIcons = () => {
   // This component contains data so that it can be used to place social media icons on any page.
   let socialIcons = socialMediaData.map((item, index) => {
-    let { link, alt, icon, iconHover } = item
-    return <SocialIcon key={index} alt={alt} icon={icon} iconHover={iconHover} link={link} />
+    let { link, alt, icon, iconHover, platform } = item
+    return <SocialIcon key={index} alt={alt} icon={icon} iconHover={iconHover} link={link} platform={platform} />
   })
   return (
     <div className='social-icon'>

diff --git a/src/data.js b/src/data.js
@@ -1,32 +1,27 @@
-import twitterIcon from './files/icons/twitter-footer-icon.svg';
-import twitterIconBlue from './files/icons/twitter-footer-icon-blue.svg';
+import twitterIcon from './files/icons/twitter-footer-icon-x.svg';
+import twitterIconHover from './files/icons/twitter-footer-icon-x-hover.svg';
 import vimeoIcon from './files/icons/vimeo-black.svg';
 import vimeoIconBlue from './files/icons/vimeo-blue.svg';
-import instagramIcon from './files/icons/instagram-black.svg';
-import instagramIconBlue from './files/icons/instragram-color.svg';
 import linkedinIcon from './files/icons/linkedin-footer-icon.svg';
 import linkedinIconBlue from './files/icons/linkedin-footer-icon-blue.svg';
 
 export const socialMediaData = [
   {
-    link: "https://www.instagram.com/civicactions/",
-    alt: "Follow us on Instagram",
-    icon: instagramIcon,
-    iconHover: instagramIconBlue
-  },
-  {
+    platform: "vimeo",
     link: "https://vimeo.com/civicactions",
     alt: "Watch our videos on Vimeo",
     icon: vimeoIcon,
     iconHover: vimeoIconBlue
   },
   {
+    platform: "twitter",
     link: "https://twitter.com/civicactions?lang=en",
     alt: "Follow us on Twitter",
     icon: twitterIcon,
-    iconHover: twitterIconBlue
+    iconHover: twitterIconHover
   },
   {
+    platform: "linkedin",
     link: "https://www.linkedin.com/company/civicactions/mycompany/",
     alt: "Follow us on LinkedIn",
     icon: linkedinIcon,

diff --git a/src/files/icons/twitter-footer-icon-x-hover.svg b/src/files/icons/twitter-footer-icon-x-hover.svg
diff --git a/src/files/icons/twitter-footer-icon-x.svg b/src/files/icons/twitter-footer-icon-x.svg
diff --git a/src/sass/components/_footer.scss b/src/sass/components/_footer.scss
@@ -79,6 +79,28 @@
     margin-bottom: px-to-rem(32px);
   }
 
+  .social-icon {
+    display: flex;
+
+    .twitter {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 48px;
+      height: 48px;
+      background: #000;
+      border-radius: 50%;
+      box-sizing: border-box;
+      padding: 0;
+
+      .blue-icon,
+      .black-icon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
   //=========== Tablet styles ============
 
   @media (min-width: $tablet-screen) {
@@ -92,6 +114,19 @@
 
       .social-icon {
         padding-bottom: 0;
+        display: flex;
+        justify-content: flex-start;
+
+        .twitter {
+          width: 48px;
+          height: 48px;
+
+          .blue-icon,
+          .black-icon {
+            width: 24px;
+            height: 24px;
+          }
+        }
       }
     }
     .footer__about-text {
@@ -287,34 +322,56 @@
       }
     }
 
-    .social-icon {
-      text-align: right;
-      padding: 0;
+    .footer__social {
+      .social-icon {
+        text-align: right;
+        padding: 0;
+        display: flex;
+        justify-content: flex-end;
 
-      .blue-icon {
-        display: none;
-      }
+        .blue-icon {
+          display: none;
+        }
 
-      .blue-icon,
-      .black-icon {
-        width: 40px;
-        height: 41px;
-      }
+        .blue-icon,
+        .black-icon {
+          width: 40px;
+          height: 41px;
+        }
 
-      a {
-        &:hover,
-        &:focus,
-        &:focus-within {
-          .blue-icon {
-            display: inline-block;
-          }
+        .twitter {
+          width: 40px;
+          height: 40px;
 
+          .blue-icon,
           .black-icon {
-            display: none;
+            width: 20px;
+            height: 20px;
           }
         }
-      }
 
+        a {
+          &:hover,
+          &:focus,
+          &:focus-within {
+            .blue-icon {
+              display: inline-block;
+            }
+
+            .black-icon {
+              display: none;
+            }
+          }
+
+          &.twitter:hover,
+          &.twitter:focus,
+          &.twitter:focus-within {
+            background: none;
+            border: solid 1px #000;
+          }
+        }
+
+      }
     }
   }