Merge pull request #279 from Anti-Pattern-Inc/feature/277

src/components/common/ShareButtons.tsx

@@ -1,9 +1,10 @@
+import XIcon from 'images/x-logo-white.png'
+import Image from 'next/image'
 import {
   FacebookIcon,
   FacebookShareButton,
   LinkedinIcon,
   LinkedinShareButton,
-  TwitterIcon,
   TwitterShareButton,
 } from 'react-share'
 
@@ -19,7 +20,9 @@ const ShareButtons = ({ type, slug }: Props) => {
         <FacebookIcon size={28} round />
       </FacebookShareButton>
       <TwitterShareButton url={`https://anti-pattern.co.jp/${type}/${slug}`}>
-        <TwitterIcon size={28} round />
+        <div className="p-1 w-6 rounded-full bg-black">
+          <Image src={XIcon} alt="Twitter" />
+        </div>
       </TwitterShareButton>
       <LinkedinShareButton url={`https://anti-pattern.co.jp/${type}/${slug}`}>
         <LinkedinIcon size={28} round />

src/components/layouts/Footer.tsx

@@ -1,7 +1,7 @@
 import { Square2StackIcon } from '@heroicons/react/24/outline'
 import Facebook from 'images/fb-w.png'
 import Linkedin from 'images/li-w.png'
-import Twitter from 'images/tw-w.png'
+import X from 'images/x-logo-white.png'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -13,7 +13,7 @@ const images = [
     href: 'https://www.facebook.com/people/Anti-Pattern-Inc/100039176570521/',
   },
   {
-    src: Twitter,
+    src: X,
     alt: 'Twitter',
     href: 'https://twitter.com/antipatterninc',
   },
@@ -48,7 +48,13 @@ const Footer = () => {
               return (
                 <a href={img.href} target="_blank" key={key} rel="noreferrer">
                   <span>
-                    <Image src={img.src} alt={img.alt} className="w-6 inline" />
+                    <Image
+                      src={img.src}
+                      alt={img.alt}
+                      className={
+                        img.alt == 'Twitter' ? 'w-4 inline' : 'w-6 inline'
+                      }
+                    />
                   </span>
                   <span className="text-white text-xs ml-2">{img.alt}</span>
                 </a>