From d83fe1279b9320d7eb7733b836c0c9d7edd3f636 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 9 Nov 2023 04:07:49 +0000
Subject: [PATCH] Update twitter icon in sharing button

---
 src/components/ReactIcons/TwitterIcon.tsx | 23 +++++++++++++++++++++++
 src/components/ShareRoadmapButton.tsx     | 15 ++++++++-------
 2 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ReactIcons/TwitterIcon.tsx

diff --git a/src/components/ReactIcons/TwitterIcon.tsx b/src/components/ReactIcons/TwitterIcon.tsx
new file mode 100644
index 000000000000..59ccb4e71adf
--- /dev/null
+++ b/src/components/ReactIcons/TwitterIcon.tsx
@@ -0,0 +1,23 @@
+type TwitterIconProps = {
+  className?: string;
+};
+
+export function TwitterIcon(props: TwitterIconProps) {
+  const { className } = props;
+
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M8.9285 6.35221L14.5135 0H13.1905L8.339 5.5144L4.467 0H0L5.8565 8.33955L0 15H1.323L6.443 9.17535L10.533 15H15M1.8005 0.976187H3.833L13.1895 14.0718H11.1565"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/ShareRoadmapButton.tsx b/src/components/ShareRoadmapButton.tsx
index 4ca67c89bb8e..9463fff8f4ad 100644
--- a/src/components/ShareRoadmapButton.tsx
+++ b/src/components/ShareRoadmapButton.tsx
@@ -3,6 +3,7 @@ import { useRef, useState } from 'react';
 import { useOutsideClick } from '../hooks/use-outside-click.ts';
 import { useCopyText } from '../hooks/use-copy-text.ts';
 import { cn } from '../lib/classname.ts';
+import { TwitterIcon } from './ReactIcons/TwitterIcon.tsx';
 
 type ShareRoadmapButtonProps = {
   description: string;
@@ -62,7 +63,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
                 copyText(pageUrl);
                 setIsDropdownOpen(false);
               }}
-              className="flex w-full items-center rounded-sm gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+              className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
             >
               <div className="flex w-[20px] items-center justify-center">
                 <Copy size="15px" className="text-slate-400" />
@@ -72,17 +73,17 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
             <a
               href={twitterUrl}
               target={'_blank'}
-              className="mt-1 flex w-full items-center rounded-sm gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+              className="mt-1 flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
             >
               <div className="flex w-[20px] items-center justify-center">
-                <Twitter size="16px" className="text-slate-400" />
+                <TwitterIcon className="h-[16px] text-slate-400" />
               </div>
               Twitter
             </a>
             <a
               href={fbUrl}
               target={'_blank'}
-              className="flex w-full items-center rounded-sm gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+              className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
             >
               <div className="flex w-[20px] items-center justify-center">
                 <Facebook size="16px" className="text-slate-400" />
@@ -92,7 +93,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
             <a
               href={hnUrl}
               target={'_blank'}
-              className="flex w-full items-center rounded-sm gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+              className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
             >
               <div className="flex w-[20px] items-center justify-center">
                 <img
@@ -106,7 +107,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
             <a
               href={redditUrl}
               target={'_blank'}
-              className="flex w-full items-center rounded-sm gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+              className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
             >
               <div className="flex w-[20px] items-center justify-center">
                 <img
@@ -120,7 +121,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
             <a
               href={linkedinUrl}
               target={'_blank'}
-              className="flex w-full items-center rounded-sm gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+              className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
             >
               <div className="flex w-[20px] items-center justify-center">
                 <Linkedin size="16px" className="text-slate-400" />