yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-11-04 12:51:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix spacing on share buttons (#7272)

Browse Source
This commit is contained in:
Aditya Radhakrishnan 2023-02-07 12:02:04 -08:00 committed by GitHub
parent aa2a3ce224
commit cf1e627e55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
datahub-web-react/src/app/shared/share/ShareButtonMenu.tsx
View File

@ -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) {

11
datahub-web-react/src/app/shared/share/items/CopyLinkMenuItem.tsx
View File

@ -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) {
>
<Tooltip title="Copy a shareable link to this entity.">
{isClicked ? <CheckOutlined /> : <StyledLinkOutlined />}
<span>
<TextSpan>
<b>Copy Link</b>
</span>
</TextSpan>
</Tooltip>
</StyledMenuItem>
);

9
datahub-web-react/src/app/shared/share/items/CopyUrnMenuItem.tsx
View File

@ -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
>
<Tooltip title={`Copy the URN for this ${type}. An URN uniquely identifies an entity on DataHub.`}>
{isClicked ? <CheckOutlined /> : <CopyOutlined />}
<span>
<TextSpan>
<b>Copy URN</b>
</span>
</TextSpan>
</Tooltip>
</StyledMenuItem>
);

9
datahub-web-react/src/app/shared/share/items/EmailMenuItem.tsx
View File

@ -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) => (
<Tooltip title={`Share this ${type} via email`}>
{isClicked ? <CheckOutlined /> : <MailOutlined />}
<span>
<TextSpan>
<a href={link} style={{ color: 'inherit' }}>
<b>Email</b>
</a>
</span>
</TextSpan>
</Tooltip>
)}
</EmailShare>