diff --git a/datahub-web-react/src/app/shared/share/ShareButtonMenu.tsx b/datahub-web-react/src/app/shared/share/ShareButtonMenu.tsx
index 999e7c7109d12..f669836c82186 100644
--- a/datahub-web-react/src/app/shared/share/ShareButtonMenu.tsx
+++ b/datahub-web-react/src/app/shared/share/ShareButtonMenu.tsx
@@ -19,6 +19,10 @@ const StyledMenu = styled(Menu)`
border: 1px solid ${ANTD_GRAY[3]};
border-radius: 4px;
min-width: 140px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 10px;
`;
export default function ShareButtonMenu({ urn, entityType, subType, name }: ShareButtonMenuProps) {
diff --git a/datahub-web-react/src/app/shared/share/items/CopyLinkMenuItem.tsx b/datahub-web-react/src/app/shared/share/items/CopyLinkMenuItem.tsx
index 967f2fe292653..49a3a717dd200 100644
--- a/datahub-web-react/src/app/shared/share/items/CopyLinkMenuItem.tsx
+++ b/datahub-web-react/src/app/shared/share/items/CopyLinkMenuItem.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
import { CheckOutlined, LinkOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import MenuItem from 'antd/lib/menu/MenuItem';
@@ -12,9 +12,14 @@ interface CopyLinkMenuItemProps {
const StyledMenuItem = styled(MenuItem)`
&& {
color: ${ANTD_GRAY[8]};
+ background-color: ${ANTD_GRAY[1]};
}
`;
+const TextSpan = styled.span`
+ padding-left: 12px;
+`;
+
const StyledLinkOutlined = styled(LinkOutlined)`
font-size: 14px;
`;
@@ -35,9 +40,9 @@ export default function CopyLinkMenuItem({ key }: CopyLinkMenuItemProps) {
>
{isClicked ? : }
-
+
Copy Link
-
+
);
diff --git a/datahub-web-react/src/app/shared/share/items/CopyUrnMenuItem.tsx b/datahub-web-react/src/app/shared/share/items/CopyUrnMenuItem.tsx
index a277b69069426..c9388dfe9b181 100644
--- a/datahub-web-react/src/app/shared/share/items/CopyUrnMenuItem.tsx
+++ b/datahub-web-react/src/app/shared/share/items/CopyUrnMenuItem.tsx
@@ -14,9 +14,14 @@ interface CopyUrnMenuItemProps {
const StyledMenuItem = styled(MenuItem)`
&& {
color: ${ANTD_GRAY[8]};
+ background-color: ${ANTD_GRAY[1]};
}
`;
+const TextSpan = styled.span`
+ padding-left: 12px;
+`;
+
export default function CopyUrnMenuItem({ urn, key, type }: CopyUrnMenuItemProps) {
/**
* Whether button has been clicked
@@ -33,9 +38,9 @@ export default function CopyUrnMenuItem({ urn, key, type }: CopyUrnMenuItemProps
>
{isClicked ? : }
-
+
Copy URN
-
+
);
diff --git a/datahub-web-react/src/app/shared/share/items/EmailMenuItem.tsx b/datahub-web-react/src/app/shared/share/items/EmailMenuItem.tsx
index 776d347e92d98..fd94ef8dbde90 100644
--- a/datahub-web-react/src/app/shared/share/items/EmailMenuItem.tsx
+++ b/datahub-web-react/src/app/shared/share/items/EmailMenuItem.tsx
@@ -16,9 +16,14 @@ interface EmailMenuItemProps {
const StyledMenuItem = styled(MenuItem)`
&& {
color: ${ANTD_GRAY[8]};
+ background-color: ${ANTD_GRAY[1]};
}
`;
+const TextSpan = styled.span`
+ padding-left: 12px;
+`;
+
export default function EmailMenuItem({ urn, name, type, key }: EmailMenuItemProps) {
/**
* Whether button has been clicked
@@ -38,11 +43,11 @@ export default function EmailMenuItem({ urn, name, type, key }: EmailMenuItemPro
{(link) => (
{isClicked ? : }
-
+
Email
-
+
)}