info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-09 02:36:40 +02:00
Code Issues Releases Wiki Activity

Update UI for share button

Browse Source
This commit is contained in:
Kamran Ahmed
2024-09-07 12:58:48 +01:00
parent 48e3832dbd
commit 29c8c3e76f
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ReactIcons/TwitterIcon.tsx
View File

@@ -1,9 +1,11 @@
interface TwitterIconProps { interface TwitterIconProps {
className?: string; className?: string;
boxColor?: string;
} }
export function TwitterIcon(props: TwitterIconProps) { export function TwitterIcon(props: TwitterIconProps) {
const { className } = props; const { className, boxColor = 'transparent' } = props;
return ( return (
<svg <svg
width="23" width="23"
@@ -13,10 +15,10 @@ export function TwitterIcon(props: TwitterIconProps) {
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className} className={className}
> >
<rect width="23" height="23" rx="3" fill="currentColor" /> <rect width="23" height="23" rx="3" fill={boxColor} />
<path <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" 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> </svg>
); );

4
src/components/ShareRoadmapButton.tsx
View File

@@ -70,7 +70,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
</button> </button>
{isDropdownOpen && ( {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"> <div className="flex flex-col px-1 py-1">
<button <button
onClick={() => { onClick={() => {
@@ -103,7 +103,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
target={'_blank'} 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" 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" /> <TwitterIcon className="h-[16px] text-slate-400" />
</div> </div>
Twitter Twitter