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 - + )}