From e34c4c05795a27860fdb4e2dfa4b2acd3b4ee07d Mon Sep 17 00:00:00 2001 From: KETF Date: Wed, 17 Jan 2024 14:45:27 -0500 Subject: [PATCH] Removed instagram icon and updated twitter icon in footer. --- src/components/social-icons/social-icon.js | 4 +- src/components/social-icons/social-icons.js | 4 +- src/data.js | 17 ++-- .../icons/twitter-footer-icon-x-hover.svg | 3 + src/files/icons/twitter-footer-icon-x.svg | 3 + src/sass/components/_footer.scss | 97 +++++++++++++++---- 6 files changed, 93 insertions(+), 35 deletions(-) create mode 100644 src/files/icons/twitter-footer-icon-x-hover.svg create mode 100644 src/files/icons/twitter-footer-icon-x.svg diff --git a/src/components/social-icons/social-icon.js b/src/components/social-icons/social-icon.js index 1f235730..ed3ce16e 100644 --- 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 }) => ( - +const SocialIcon = ({ link, icon, iconHover, alt, platform }) => ( + {alt} {alt} diff --git a/src/components/social-icons/social-icons.js b/src/components/social-icons/social-icons.js index 81a25ea8..afcfc13c 100644 --- 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 + let { link, alt, icon, iconHover, platform } = item + return }) return (
diff --git a/src/data.js b/src/data.js index b59fef5f..f271238d 100644 --- 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 new file mode 100644 index 00000000..56368dd4 --- /dev/null +++ b/src/files/icons/twitter-footer-icon-x-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/files/icons/twitter-footer-icon-x.svg b/src/files/icons/twitter-footer-icon-x.svg new file mode 100644 index 00000000..437e2bfd --- /dev/null +++ b/src/files/icons/twitter-footer-icon-x.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/sass/components/_footer.scss b/src/sass/components/_footer.scss index bfb682c0..ae19037a 100644 --- 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; + } + } + + } } }