Update twitter icon in sharing button

fork-house · Nov 9, 2023 · d83fe12 · d83fe12
1 parent fb3cb85
commit d83fe12
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/components/ReactIcons/TwitterIcon.tsx 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
@@ -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" />