feat(wallet): add new header

blockchain · Apr 24, 2020 · 5379801 · 5379801
1 parent 1890ff8
commit 5379801
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 7 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/HorizontalMenu/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/HorizontalMenu/index.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
 
-const Wrapper = styled.div<{ marginBottom: string }>`
+const Wrapper = styled.div<{ border: boolean; marginBottom: string }>`
   box-sizing: border-box;
   background-color: ${props => props.theme.white};
-  border-bottom: 1px solid ${props => props.theme.grey000};
+  border-bottom: 1px solid
+    ${props => (props.border ? props.theme['grey000'] : 'transparent')};
   margin-bottom: ${props => props.marginBottom};
   padding-bottom: 12px;
   width: 100%;
@@ -28,13 +29,15 @@ const Container = styled.div`
 `
 
 const HorizontalMenu = ({
+  border = true,
   marginBottom = '12px',
   children
 }: {
+  border?: boolean
   children: any
   marginBottom?: string
 }) => (
-  <Wrapper marginBottom={marginBottom}>
+  <Wrapper border={border} marginBottom={marginBottom}>
     <Container>{children}</Container>
   </Wrapper>
 )

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Menu/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Menu/index.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux'
 import { Field, reduxForm } from 'redux-form'
 import { FormattedMessage } from 'react-intl'
-import { Icon, TabMenu, TabMenuItem } from 'blockchain-info-components'
+import { Icon, TabMenu, TabMenuItem, Text } from 'blockchain-info-components'
 import { LinkContainer } from 'react-router-bootstrap'
 import { model } from 'data'
 import { StickyHeader } from 'components/Layout'
@@ -14,7 +14,6 @@ const { WALLET_TX_SEARCH } = model.form
 
 const Container = styled.div`
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
   align-items: center;
   width: 100%;
@@ -23,7 +22,6 @@ const Container = styled.div`
 const Search = styled.div`
   position: relative;
   display: flex;
-  flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   width: auto;
@@ -36,9 +34,58 @@ const SearchIcon = styled(Icon)`
   top: 10px;
   right: 10px;
 `
+
+const MenuHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.5rem;
+`
+
+const IconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${props => props.theme.blue000};
+  height: 2.5rem;
+  width: 2.5rem;
+  border-radius: 50%;
+`
+
+const Row = styled.div`
+  display: flex;
+`
+
+const Title = styled(Text)`
+  margin-left: 1rem;
+`
+
+const Subtitle = styled(Text)`
+  margin-top: 1rem;
+`
+
 const MenuTop = () => (
   <StickyHeader>
-    <HorizontalMenu>
+    <MenuHeader>
+      <Row>
+        <IconWrapper>
+          <Icon color='blue600' name='wallet-filled' size='24px' />
+        </IconWrapper>
+        <Title size='32px' weight={600} color='black'>
+          <FormattedMessage
+            id='scenes.settings.menu.title'
+            defaultMessage='Wallets & Addresses'
+          />
+        </Title>
+      </Row>
+
+      <Subtitle size='16px' weight={500} color='grey600'>
+        <FormattedMessage
+          id='scenes.settings.menu.subtitle'
+          defaultMessage='Manage your wallet names, addresses and private keys.'
+        />
+      </Subtitle>
+    </MenuHeader>
+    <HorizontalMenu border={false}>
       <Container>
         <TabMenu>
           <LinkContainer to='/settings/addresses/btc'>