Merge pull request #76 from hotosm/enhancement/6321-update-social-med…

…ia-links

Change `Twitter Icon` to `X`

frontend/src/components/footer/index.js

@@ -23,7 +23,7 @@ import {
 import './styles.scss';
 
 const socialNetworks = [
-  { link: ORG_TWITTER, icon: <TwitterIcon style={{ height: '20px', width: '20px' }} /> },
+  { link: ORG_TWITTER, icon: <TwitterIcon style={{ height: '20px', width: '20px' }} noBg /> },
   { link: ORG_FB, icon: <FacebookIcon style={{ height: '20px', width: '20px' }} /> },
   { link: ORG_YOUTUBE, icon: <YoutubeIcon style={{ height: '20px', width: '20px' }} /> },
   { link: ORG_INSTAGRAM, icon: <InstagramIcon style={{ height: '20px', width: '20px' }} /> },

frontend/src/components/projectDetail/shareButton.js

@@ -6,7 +6,7 @@ import messages from './messages';
 import { ORG_CODE } from '../../config';
 import { createPopup } from '../../utils/login';
 import { getTwitterLink, getLinkedInLink, getFacebookLink } from '../../utils/shareFunctions';
-import { TwitterIconNoBg, FacebookIcon, LinkedinIcon, ShareIcon } from '../svgIcons';
+import { TwitterIcon, FacebookIcon, LinkedinIcon, ShareIcon } from '../svgIcons';
 
 export function ShareButton({ projectId }: Object) {
   const iconStyle = { width: '1.4em', height: '1.4em' };
@@ -41,7 +41,7 @@ export function ShareButton({ projectId }: Object) {
                 className="link no-underline base-font f6 pointer pv1"
                 onClick={() => twitterPopup(msg)}
               >
-                <TwitterIconNoBg style={iconStyle} className="light-blue v-mid pb1 pr2" />
+                <TwitterIcon style={iconStyle} className="light-blue v-mid pb1 pr2" />
                 Tweet
               </div>
               <div

frontend/src/components/svgIcons/index.js

@@ -69,7 +69,6 @@ export { LoadingIcon } from './loading';
 export { EnvelopeIcon } from './envelope';
 export { LinkedinIcon } from './linkedin';
 export { MarkerIcon } from './marker';
-export { TwitterIconNoBg } from './twitterNoBg';
 export { ZoomPlusIcon } from './zoomPlus';
 export { SidebarIcon } from './sidebar';
 export { QuestionCircleIcon } from './questionCircle';

frontend/src/components/svgIcons/twitter.js

@@ -3,15 +3,20 @@ import React from 'react';
 export class TwitterIcon extends React.PureComponent {
   render() {
     return (
-      <svg width="15" height="14" viewBox="0 0 15 14" {...this.props} aria-label="Twitter">
-        <g fill="none" fillRule="evenodd">
-          <path d="M-13-13h40v40h-40z" />
-          <path
-            d="M12.394 14h-10.5a1.75 1.75 0 0 1-1.75-1.75V1.75C.144.784.928 0 1.894 0h10.5c.966 0 1.75.784 1.75 1.75v10.5a1.75 1.75 0 0 1-1.75 1.75zM5.52 10.556c3.3 0 5.107-2.737 5.107-5.106 0-.078 0-.154-.004-.232.35-.252.655-.57.896-.93a3.637 3.637 0 0 1-1.032.283c.37-.22.654-.574.79-.994a3.57 3.57 0 0 1-1.14.434 1.797 1.797 0 0 0-3.059 1.638 5.096 5.096 0 0 1-3.7-1.876 1.8 1.8 0 0 0 .556 2.398 1.815 1.815 0 0 1-.811-.224v.024c0 .868.619 1.596 1.438 1.76a1.75 1.75 0 0 1-.808.032 1.795 1.795 0 0 0 1.676 1.246 3.6 3.6 0 0 1-2.656.745 5.105 5.105 0 0 0 2.747.802z"
-            fill="currentColor"
-            fillRule="nonzero"
-          />
-        </g>
+      <svg
+        width="15"
+        height="15"
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...this.props}
+        aria-label="Twitter"
+      >
+        {!this.props.noBg && <rect width="15" height="15" rx="1" fill="black" />}
+        <path
+          d="M8.54822 6.66248L12.644 2H11.6735L8.1156 6.04753L5.27595 2H2L6.29505 8.12111L2 13.01H2.97043L6.72541 8.7347L9.72488 13.01H13.0008L8.54822 6.66248ZM7.21864 8.17485L6.7828 7.56494L3.32038 2.71647H4.81116L7.60626 6.63082L8.04027 7.24073L11.6731 12.3285H10.1823L7.21864 8.17485Z"
+          fill="white"
+        />
       </svg>
     );
   }

frontend/src/components/userDetail/headerProfile.js

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import messages from '../user/messages';
-import { TwitterIconNoBg, FacebookIcon, LinkedinIcon, ProfilePictureIcon } from '../svgIcons';
+import { TwitterIcon, FacebookIcon, LinkedinIcon, ProfilePictureIcon } from '../svgIcons';
 import { MappingLevelMessage } from '../mappingLevel';
 import { NextMappingLevel } from '../user/topBar';
 import { UserOrganisations } from './userTeamsOrgs';
@@ -26,7 +26,7 @@ export const SocialMedia = ({ data }) => {
 
     switch (field) {
       case 'twitterId':
-        return <TwitterIconNoBg style={iconStyle} className="light-blue v-mid" />;
+        return <TwitterIcon style={iconStyle} className="light-blue v-mid" />;
       case 'facebookId':
         return <FacebookIcon style={iconStyle} className="dark-blue v-mid" />;
       case 'linkedinId':