feat(header): move send/receive to navbar

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

@@ -5,7 +5,9 @@ const Default = {
   whiteFade100: 'rgba(255, 255, 255, 0.1)',
   whiteFade400: 'rgba(255, 255, 255, 0.4)',
   whiteFade600: 'rgba(255, 255, 255, 0.6)',
+  whiteFade700: 'rgba(255, 255, 255, 0.7)',
   whiteFade800: 'rgba(255, 255, 255, 0.8)',
+  whiteFade900: 'rgba(255, 255, 255, 0.9)',
   greyFade100: 'rgba(5, 24, 61, 0.1)',
   greyFade200: 'rgba(5, 24, 61, 0.2)',
   greyFade400: 'rgba(5, 24, 61, 0.4)',

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Actions/index.js → packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/Header/SendRequest/index.js

@@ -5,9 +5,9 @@ import React from 'react'
 
 import { actions } from 'data'
 import { getData } from './selectors'
-import Actions from './template'
+import SendRequest from './template'
 
-class ActionsContainer extends React.PureComponent {
+class SendRequestContainer extends React.PureComponent {
   showModal = type => {
     const {
       coin,
@@ -33,7 +33,7 @@ class ActionsContainer extends React.PureComponent {
   render () {
     const { sendAvailable, requestAvailable } = this.props
     return (
-      <Actions
+      <SendRequest
         sendAvailable={sendAvailable}
         requestAvailable={requestAvailable}
         showModal={this.showModal}
@@ -49,4 +49,4 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
   getData,
   mapDispatchToProps
-)(ActionsContainer)
+)(SendRequestContainer)

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

@@ -4,7 +4,6 @@ import React from 'react'
 import styled, { css } from 'styled-components'
 
 import { IconButton, Text } from 'blockchain-info-components'
-import { spacing } from 'services/StyleService'
 import media from 'services/ResponsiveService'
 
 const Wrapper = styled.div`
@@ -18,11 +17,38 @@ const Wrapper = styled.div`
     margin-top: 0;
   }
 `
+const Divider = styled.div`
+  height: 18px;
+  border-left: 1px solid ${props => props.theme.whiteFade400};
+`
 const ActionButton = styled(IconButton)`
   position: relative;
-  > span {
-    color: ${props => props.theme.blue900};
+  border: none;
+  background-color: transparent;
+  margin-left: 4px;
+  margin-right: 8px;
+
+  & > span {
+    color: ${props => props.theme.whiteFade700};
+    font-size: 20px;
+  }
+  & > div > span {
+    color: ${props => props.theme.whiteFade700};
+    font-size: 14px;
+  }
+
+  &:hover {
+    background-color: transparent;
+    color: ${props => props.theme.whiteFade900};
+
+    & > span {
+      color: ${props => props.theme.whiteFade900};
+    }
+    & > div > span {
+      color: ${props => props.theme.whiteFade900};
+    }
   }
+
   ${media.mobile`
     padding: 10px 10px;
     div:last-of-type {
@@ -55,15 +81,15 @@ const ButtonText = styled(Text)`
   margin-left: 6px;
 `
 
-const Actions = ({ showModal, sendAvailable, requestAvailable }) => (
+const SendRequest = ({ showModal, sendAvailable, requestAvailable }) => (
   <Wrapper>
+    <Divider />
     <ActionButton
-      name='send'
+      data-e2e='sendButton'
       disabled={!sendAvailable}
+      name='send'
       onClick={() => showModal('SEND')}
-      min='100px'
-      data-e2e='sendButton'
-      height='48px'
+      width='70px'
     >
       <SendSpotlight className='wallet-intro-tour-step-3' />
       <ButtonText size='16px' weight={600} color='blue900'>
@@ -73,14 +99,14 @@ const Actions = ({ showModal, sendAvailable, requestAvailable }) => (
         />
       </ButtonText>
     </ActionButton>
+    <Divider />
     <ActionButton
-      style={spacing('ml-15')}
+      data-e2e='requestButton'
       disabled={!requestAvailable}
       name='request'
       onClick={() => showModal('REQUEST')}
-      min='100px'
-      data-e2e='requestButton'
-      height='48px'
+      style={{ marginLeft: '6px' }}
+      width='70px'
     >
       <RequestSpotlight className='wallet-intro-tour-step-2' />
       <ButtonText size='16px' weight={600} color='blue900'>
@@ -93,10 +119,10 @@ const Actions = ({ showModal, sendAvailable, requestAvailable }) => (
   </Wrapper>
 )
 
-Actions.propTypes = {
+SendRequest.propTypes = {
   sendAvailable: PropTypes.bool.isRequired,
   requestAvailable: PropTypes.bool.isRequired,
   showModal: PropTypes.func.isRequired
 }
 
-export default Actions
+export default SendRequest

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

@@ -9,11 +9,7 @@ const WhatsNewLink = styled(Link)`
   position: relative;
   padding: 5px;
   border-radius: 4px;
-  background-color: rgba(
-    0,
-    0,
-    0,
-    ${props => (props.highlighted ? '0.2' : '0')}
+  background-color: z
   );
 `
 const NotificationBadge = styled.div`

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

@@ -1,5 +1,4 @@
 import { NavLink } from 'react-router-dom'
-import { transparentize } from 'polished'
 import PropTypes from 'prop-types'
 import React from 'react'
 import styled from 'styled-components'
@@ -18,13 +17,14 @@ import FaqIcon from './FaqIcon'
 import media from 'services/ResponsiveService'
 import RefreshIcon from './RefreshIcon'
 import SecurityCenter from './SecurityCenter'
+import SendRequest from './SendRequest'
 import Settings from './Settings'
 import WhatsNewIcon from './WhatsNewIcon'
 
 const BlockchainLogoImage = styled(Image)`
-  height: 16px;
+  width: 200px;
   display: block;
-  margin-left: 10px;
+  margin-left: 6px;
   @media (min-width: 768px) {
     height: 20px;
     margin-left: 0;
@@ -36,7 +36,7 @@ const NavbarNavItemSpacer = styled(NavbarNavItem)`
 const NavbarNavItemWithText = styled(NavbarNavItem)`
   padding: 0 26px;
   margin: 0;
-  border-left: 1px solid ${props => transparentize(0.9, props.theme.white)};
+  border-left: 1px solid ${props => props.theme.whiteFade400};
   &:last-child {
     padding-right: 0;
   }
@@ -45,17 +45,24 @@ const NavbarNavItemWithText = styled(NavbarNavItem)`
     border-left: 0px;
   `}
 `
+const NavbarStyled = styled(Navbar)`
+  background-color: ${props => props.theme.grey900};
+`
+const NavbarMenuStyled = styled(NavbarMenu)`
+  width: 100%;
+  margin-left: 30px;
+`
 
 const Header = props => {
   const { handleToggle, ...rest } = props
   return (
-    <React.Fragment>
-      <Navbar height='60px'>
+    <>
+      <NavbarStyled height='60px'>
         <NavbarHeader>
           <NavbarBrand>
             <Icon
               name='hamburger-menu'
-              color='white'
+              color='whiteFade600'
               size='16px'
               onClick={handleToggle}
             />
@@ -64,7 +71,8 @@ const Header = props => {
             </NavLink>
           </NavbarBrand>
         </NavbarHeader>
-        <NavbarMenu>
+        <NavbarMenuStyled>
+          <SendRequest />
           <NavbarNav>
             <NavbarNavItem>
               <WhatsNewIcon />
@@ -82,11 +90,11 @@ const Header = props => {
               <Settings {...rest} />
             </NavbarNavItemWithText>
           </NavbarNav>
-        </NavbarMenu>
-      </Navbar>
+        </NavbarMenuStyled>
+      </NavbarStyled>
       <Announcements type='service' alertArea='wallet' />
       <Announcements type='static' />
-    </React.Fragment>
+    </>
   )
 }
 

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

@@ -9,7 +9,6 @@ import ExchangeProfileMenu from 'scenes/Settings/Profile/Menu'
 import Header from './Header'
 import Menu from 'scenes/Transactions/Menu'
 import MenuLeft from './MenuLeft'
-import MenuTop from './MenuTop'
 import Modals from 'modals'
 import Page from './Page'
 import SettingsAddressesMenu from 'scenes/Settings/Addresses/Menu'
@@ -44,9 +43,6 @@ const Content = styled.div`
     width: 100%;
   }
 `
-const Top = styled.div`
-  width: 100%;
-`
 
 // TODO: @header issue
 // change this so that pages control their own scroll
@@ -66,9 +62,6 @@ const WalletLayout = props => {
           <MenuLeft location={location} />
           <TrayRight />
           <Content data-e2e={`page${replace(/\//g, '-', location.pathname)}`}>
-            <Top>
-              <MenuTop />
-            </Top>
             {location.pathname.includes('/transactions') && (
               <Menu coin={coin} />
             )}