Convert all the css into tailwind css of SocialMedia component (#1742)

Author: subhajit20

components/SocialMedia/SocialMedia.js

@@ -6,40 +6,39 @@ import YouTubeLogo from 'static/images/icons/youtube_logo.svg';
 import LinkedInLogo from 'static/images/icons/linkedin_logo_circle.svg';
 import SocialMediaContainer from './SocialMediaContainer/SocialMediaContainer';
 import SocialMediaItem from './SocialMediaItem/SocialMediaItem';
-import styles from './SocialMedia.module.css';
 
 function SocialMedia() {
   return (
     <SocialMediaContainer>
       <SocialMediaItem
         href="https://facebook.com/operationcode.org"
         name="Facebook"
-        svg={<FacebookLogo className={styles.logo} />}
+        svg={<FacebookLogo className="fill-white w-6" />}
       />
       <SocialMediaItem
         href="https://twitter.com/operation_code"
         name="Twitter"
-        svg={<TwitterLogo className={styles.logo} />}
+        svg={<TwitterLogo className="fill-white w-6" />}
       />
       <SocialMediaItem
         href="https://www.instagram.com/operation_code/"
         name="Instagram"
-        svg={<InstagramLogo className={styles.logo} />}
+        svg={<InstagramLogo className="fill-white w-6" />}
       />
       <SocialMediaItem
         href="https://www.youtube.com/channel/UCAoJt4a_KEBmgXfoQUrNbSA"
         name="YouTube"
-        svg={<YouTubeLogo className={styles.logo} />}
+        svg={<YouTubeLogo className="fill-white w-6" />}
       />
       <SocialMediaItem
         href="https://www.linkedin.com/company/operationcode/"
         name="LinkedIn"
-        svg={<LinkedInLogo className={styles.logo} />}
+        svg={<LinkedInLogo className="fill-white w-6" />}
       />
       <SocialMediaItem
         href="https://github.com/OperationCode/"
         name="GitHub"
-        svg={<GitHubLogo className={styles.logo} />}
+        svg={<GitHubLogo className="fill-white w-6" />}
       />
     </SocialMediaContainer>
   );

components/SocialMedia/SocialMedia.module.css

@@ -1,10 +1,9 @@
 import { arrayOf, element } from 'prop-types';
-import styles from './SocialMediaContainer.module.css';
 
 SocialMediaContainer.propTypes = { children: arrayOf(element).isRequired };
 
 function SocialMediaContainer({ children }) {
-  return <div className={styles.SocialMediaContainer}>{children}</div>;
+  return <div className="flex flex-row justify-around items-center">{children}</div>;
 }
 
 export default SocialMediaContainer;

components/SocialMedia/SocialMediaContainer/SocialMediaContainer.js

@@ -2,7 +2,7 @@
 
 exports[`SocialMediaContainer should render with required props 1`] = `
 <div
-  className="SocialMediaContainer"
+  className="flex flex-row justify-around items-center"
 >
   <div>
     Testing 1

components/SocialMedia/SocialMediaContainer/SocialMediaContainer.module.css

@@ -1,7 +1,6 @@
 import { node, string } from 'prop-types';
 import OutboundLink from 'components/OutboundLink/OutboundLink';
 import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
-import styles from './SocialMediaItem.module.css';
 
 SocialMediaItem.propTypes = {
   name: string.isRequired,
@@ -11,7 +10,7 @@ SocialMediaItem.propTypes = {
 
 function SocialMediaItem({ name, href, svg }) {
   return (
-    <div className={styles.SocialMediaItem}>
+    <div className="my-0 mx-2 opacity-80 hover:opacity-100">
       <OutboundLink
         analyticsEventLabel={`Social Media Engagement: ${name}`}
         hasIcon={false}

components/SocialMedia/SocialMediaContainer/__tests__/__snapshots__/SocialMediaContainer.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`SocialMediaItem should render with required props 1`] = `
 <div
-  className="SocialMediaItem"
+  className="my-0 mx-2 opacity-80 hover:opacity-100"
 >
   <a
     className="OutboundLink"

components/SocialMedia/SocialMediaItem/SocialMediaItem.js

@@ -7,7 +7,7 @@ exports[`SocialMedia should render with no props passed passed 1`] = `
     name="Facebook"
     svg={
       <Svg
-        className="logo"
+        className="fill-white w-6"
       />
     }
   />
@@ -16,7 +16,7 @@ exports[`SocialMedia should render with no props passed passed 1`] = `
     name="Twitter"
     svg={
       <Svg
-        className="logo"
+        className="fill-white w-6"
       />
     }
   />
@@ -25,7 +25,7 @@ exports[`SocialMedia should render with no props passed passed 1`] = `
     name="Instagram"
     svg={
       <Svg
-        className="logo"
+        className="fill-white w-6"
       />
     }
   />
@@ -34,7 +34,7 @@ exports[`SocialMedia should render with no props passed passed 1`] = `
     name="YouTube"
     svg={
       <Svg
-        className="logo"
+        className="fill-white w-6"
       />
     }
   />
@@ -43,7 +43,7 @@ exports[`SocialMedia should render with no props passed passed 1`] = `
     name="LinkedIn"
     svg={
       <Svg
-        className="logo"
+        className="fill-white w-6"
       />
     }
   />
@@ -52,7 +52,7 @@ exports[`SocialMedia should render with no props passed passed 1`] = `
     name="GitHub"
     svg={
       <Svg
-        className="logo"
+        className="fill-white w-6"
       />
     }
   />