fix(ui): fix spacing on share buttons (datahub-project#7272)

ericyomi · Feb 8, 2023 · 4e97f68 · 4e97f68
1 parent 731e19c
commit 4e97f68
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git 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
@@ -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>
     );

diff --git 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
         >
             <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>
     );

diff --git 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) => (
                     <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>