From 29c8c3e76f92bcc6913a8908fc834785c676bd11 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 7 Sep 2024 12:58:48 +0100
Subject: [PATCH] Update UI for share button

---
 src/components/ReactIcons/TwitterIcon.tsx | 8 +++++---
 src/components/ShareRoadmapButton.tsx     | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/ReactIcons/TwitterIcon.tsx b/src/components/ReactIcons/TwitterIcon.tsx
index 9297dc141..05e6a5683 100644
--- a/src/components/ReactIcons/TwitterIcon.tsx
+++ b/src/components/ReactIcons/TwitterIcon.tsx
@@ -1,9 +1,11 @@
 interface TwitterIconProps {
   className?: string;
+  boxColor?: string;
 }
 
 export function TwitterIcon(props: TwitterIconProps) {
-  const { className } = props;
+  const { className, boxColor = 'transparent' } = props;
+
   return (
     <svg
       width="23"
@@ -13,10 +15,10 @@ export function TwitterIcon(props: TwitterIconProps) {
       xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
-      <rect width="23" height="23" rx="3" fill="currentColor" />
+      <rect width="23" height="23" rx="3" fill={boxColor} />
       <path
         d="M12.9285 10.3522L18.5135 4H17.1905L12.339 9.5144L8.467 4H4L9.8565 12.3395L4 19H5.323L10.443 13.1754L14.533 19H19M5.8005 4.97619H7.833L17.1895 18.0718H15.1565"
-        fill="#E5E5E5"
+        fill='currentColor'
       />
     </svg>
   );
diff --git a/src/components/ShareRoadmapButton.tsx b/src/components/ShareRoadmapButton.tsx
index 1df842caf..f40a74ed3 100644
--- a/src/components/ShareRoadmapButton.tsx
+++ b/src/components/ShareRoadmapButton.tsx
@@ -70,7 +70,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
       </button>
 
       {isDropdownOpen && (
-        <div className="absolute right-0 z-[999] mt-1 w-40 rounded-md bg-slate-800 text-sm text-white shadow-lg ring-1 ring-black ring-opacity-5">
+        <div className="absolute right-0 z-[999] mt-1 w-40 rounded-md bg-slate-800 text-sm text-white shadow-lg ring-1 ring-black ring-opacity-5 w-[175px]">
           <div className="flex flex-col px-1 py-1">
             <button
               onClick={() => {
@@ -103,7 +103,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
               target={'_blank'}
               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">
+              <div className="flex w-[20px] flex-shrink-0 items-center justify-center">
                 <TwitterIcon className="h-[16px] text-slate-400" />
               </div>
               Twitter