Merge pull request #1662 from blockchain/tbozz-changes

Tbozz changes

Author: plondon

packages/blockchain-info-components/src/Buttons/Button.js

@@ -43,7 +43,11 @@ const BaseButton = styled.button.attrs({
 
   &:hover {
     border-color: ${props =>
-      props.disabled ? 'none' : darken(0.1, props.theme[props.borderColor])};
+      props.disabled
+        ? 'none'
+        : props.hoverBorderColor
+        ? props.theme[props.hoverBorderColor]
+        : darken(0.1, props.theme[props.borderColor])};
     background-color: ${props =>
       props.disabled
         ? 'none'
@@ -63,7 +67,8 @@ const selectColor = (nature, disabled, small) => {
       return {
         color: small ? 'brand-secondary' : 'gray-6',
         backgroundColor: 'white',
-        borderColor: 'gray-2'
+        borderColor: 'gray-2',
+        hoverBorderColor: 'white'
       }
     case 'light':
       return {
@@ -138,15 +143,19 @@ const selectColor = (nature, disabled, small) => {
     default:
       return {
         color: 'gray-6',
-        backgroundColor: 'white',
-        borderColor: 'gray-2'
+        backgroundColor: 'grey000',
+        borderColor: 'gray-2',
+        hoverBorderColor: 'white'
       }
   }
 }
 
 const Button = props => {
   const { children, nature, disabled, small, ...rest } = props
-  const { color, backgroundColor, borderColor } = selectColor(nature, small)
+  const { color, backgroundColor, borderColor, hoverBorderColor } = selectColor(
+    nature,
+    small
+  )
 
   return (
     <BaseButton
@@ -155,6 +164,7 @@ const Button = props => {
       color={color}
       backgroundColor={backgroundColor}
       borderColor={borderColor}
+      hoverBorderColor={hoverBorderColor}
     >
       {children}
     </BaseButton>

packages/blockchain-info-components/src/Buttons/__snapshots__/Button.spec.js.snap

@@ -10,6 +10,7 @@ exports[`Button component default renders correctly 1`] = `
   disabled={false}
   fullwidth={false}
   height="40px"
+  hoverBorderColor="white"
   rounded={false}
   size="14px"
   uppercase={false}

packages/blockchain-info-components/src/Colors/Default.js

@@ -136,8 +136,10 @@ export default {
   whiteFade100: 'rgba(255,255,255,0.1)',
   greyFade800: 'rgba(18, 29, 51, 0.8)',
   greyFade200: 'rgba(5, 24, 61, 0.2)',
+  grey000: '#F0F2F7',
   grey100: '#DFE3EB',
   grey600: '#677185',
+  grey800: '#353F52',
   blue000: '#ECF5FE',
   blue100: '#D8EBFD',
   blue200: '#BBDBFC',

packages/blockchain-wallet-v4-frontend/src/components/MenuLeft/index.js

@@ -15,7 +15,8 @@ export const MenuItem = styled.button`
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  padding: 14px 16px;
+  height: 48px;
+  padding: 0px 16px;
   margin-bottom: 8px;
   box-sizing: border-box;
   border-width: 0px;
@@ -76,7 +77,7 @@ export const MenuItem = styled.button`
       background: ${props =>
         props.colorCode && transparentize(0.75, props.theme[props.colorCode])};
       .destination {
-        color: ${props => props.theme['grey600']};
+        color: ${props => props.theme['grey800']};
       }
     }
   }

packages/blockchain-wallet-v4-frontend/src/layouts/Public/ExternalLinks/index.js

@@ -21,6 +21,7 @@ const RightContainer = styled.div`
   align-items: flex-end;
 `
 const Wrapper = styled.div`
+  margin-top: 16px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/Header/Settings/template.js

@@ -38,13 +38,14 @@ const DropdownMenu = styled.div`
   right: 0;
   z-index: 3;
   padding: 8px;
-  border-radius: 8px;
+  border-radius: 4px;
   background: ${props => props.theme['white']};
   box-shadow: 0px 0px 16px rgba(18, 29, 51, 0.25);
 `
 const DropdownMenuItem = styled(MenuItem)`
   white-space: nowrap;
   padding: 8px 16px;
+  margin-bottom: 0;
 `
 const DropdownMenuArrow = styled.div`
   position: absolute;

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Footer/index.js

@@ -14,9 +14,16 @@ const Wrapper = styled.div`
 `
 const AdsButton = styled(Button)`
   margin: 8px auto 0px auto;
-  span > span {
+  transition: background 0.3s;
+  line-height: normal;
+  span > span:not(:first-child) {
     color: ${props => props.theme['blue']};
   }
+  &:hover {
+    span:first-child {
+      color: ${props => props.theme['grey800']};
+    }
+  }
 `
 const ButtonText = styled(Text)`
   display: flex;
@@ -25,6 +32,7 @@ const ButtonText = styled(Text)`
 `
 const ArrowIcon = styled(Icon)`
   margin-left: 4px;
+  font-size: 16px;
 `
 
 const Footer = ({ actions, countryCode, adsBlacklist }) => {
@@ -48,8 +56,8 @@ const Footer = ({ actions, countryCode, adsBlacklist }) => {
         >
           <ButtonText color='gray-4' size='14px' weight={500}>
             <FormattedHTMLMessage
-              id='layouts.wallet.menuleft.footer.bitcoingames'
-              defaultMessage='Bitcoin Games. <span>Play Now</span>'
+              id='layouts.wallet.menuleft.footer.bitcoingames2'
+              defaultMessage='<span>Bitcoin Games.</span> <span>Play Now</span>'
             />
             <ArrowIcon name='short-right-arrow' color='blue' />
           </ButtonText>

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Navigation/template.js

@@ -12,8 +12,8 @@ import {
   MenuIcon,
   MenuItem,
   Separator,
-  SubMenu,
-  SubMenuItem,
+  // SubMenu,
+  // SubMenuItem,
   Wrapper
 } from 'components/MenuLeft'
 import { Text, TooltipIcon, TooltipHost } from 'blockchain-info-components'
@@ -36,7 +36,11 @@ const NewCartridge = styled(Cartridge)`
 `
 const Navigation = props => {
   const { ...rest } = props
-  const { lockboxOpened, lockboxDevices, supportedCoins } = rest
+  const {
+    // lockboxOpened,
+    // lockboxDevices,
+    supportedCoins
+  } = rest
   const coinOrder = [
     supportedCoins.PAX,
     supportedCoins.BTC,
@@ -111,7 +115,7 @@ const Navigation = props => {
           </HelperTipContainer>
         </MenuItem>
       </LinkContainer>
-      {lockboxOpened && (
+      {/* lockboxOpened && (
         <SubMenu>
           {lockboxDevices.map((device, index) => {
             const deviceName = device.device_name
@@ -133,7 +137,7 @@ const Navigation = props => {
             )
           })}
         </SubMenu>
-      )}
+      ) */}
       <Separator />
       {values(
         mapObjIndexed(

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Actions/template.js

@@ -42,9 +42,9 @@ const Actions = ({ showModal, sendAvailable, requestAvailable }) => (
       onClick={() => showModal('SEND')}
       min='100px'
       data-e2e='sendButton'
-      height='40px'
+      height='48px'
     >
-      <ButtonText size='13px' weight={600} color='brand-primary'>
+      <ButtonText size='16px' weight={600} color='brand-primary'>
         <FormattedMessage
           id='layouts.wallet.menutop.send'
           defaultMessage='Send'
@@ -58,9 +58,9 @@ const Actions = ({ showModal, sendAvailable, requestAvailable }) => (
       onClick={() => showModal('REQUEST')}
       min='100px'
       data-e2e='requestButton'
-      height='40px'
+      height='48px'
     >
-      <ButtonText size='13px' weight={600} color='brand-primary'>
+      <ButtonText size='16px' weight={600} color='brand-primary'>
         <FormattedMessage
           id='layouts.wallet.menutop.request'
           defaultMessage='Request'

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/index.js

@@ -12,7 +12,7 @@ const Wrapper = styled.div`
   align-items: center;
   width: 100%;
   height: 100%;
-  padding: 10px 30px;
+  padding: 8px 30px;
   box-sizing: border-box;
   z-index: 10;