style(pit sidenav): match callout closer to designs

blockchain · Oct 22, 2019 · 0f87790 · 0f87790
1 parent e9083e0
commit 0f87790
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/packages/blockchain-info-components/src/Tooltip/template.js b/packages/blockchain-info-components/src/Tooltip/template.js
@@ -7,28 +7,29 @@ const StyledTip = styled(ReactTooltip)`
   cursor: pointer;
   font-weight: 400;
   text-align: left;
-  padding: ${({ toolTipPad }) => toolTipPad || '7px 12px'};
+  padding: ${({ padding }) => padding || '7px 12px'};
   text-transform: none;
   z-index: 2000 !important;
   font-size: 11px !important;
   pointer-events: auto !important;
   background-color: ${({ bgColor }) => bgColor + ' !important'};
-  opacity: ${({ toolTipOpacity }) => toolTipOpacity + ' !important'};
+  opacity: ${({ opacity }) => opacity + ' !important'};
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   max-width: ${props => props.maxWidth || '200px'};
+  max-height: ${props => props.maxHeight || ''};
 `
 
 const Tooltip = props => {
-  const { id, children, bgColor, toolTipOpacity, toolTipPad, ...rest } = props
+  const { id, children, bgColor, opacity, padding, ...rest } = props
 
   return (
     <StyledTip
       id={id}
       delayHide={250}
       bgColor={bgColor}
-      toolTipOpacity={toolTipOpacity}
-      toolTipPad={toolTipPad}
+      opacity={opacity}
+      padding={padding}
       effect='solid'
       {...rest}
     >

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Tooltips/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Tooltips/index.js
@@ -323,10 +323,10 @@ class Tooltips extends React.PureComponent {
         <Tooltip
           id='pitSideNavConnected'
           bgColor='grey800'
-          toolTipPad='13px'
-          toolTipOpacity='1'
+          padding='13px 20px'
+          opacity='1'
         >
-          <Text color='green400' weight={700} uppercase>
+          <Text color='green400' weight={700} uppercase size='12px'>
             <FormattedMessage
               id='pit-side-nav-tooltip-connected'
               defaultMessage='connected'