sidenav and header icons and spacings

packages/blockchain-info-components/src/Icons/Icomoon.js

@@ -5,7 +5,7 @@ export default {
   bch: '\\e98c',
   'bch-circle': '\\e98b',
   'bch-circle-filled': '\\e905',
-  bell: '\\e93b',
+  bell: '\\e90c',
   'birthday-cake-light': '\\e986',
   bsv: '\\e914',
   btc: '\\e97c',
@@ -72,8 +72,8 @@ export default {
   plus: '\\ea0a',
   present: '\\e96d',
   'question-in-circle': '\\e96e',
-  'question-in-circle-filled': '\\e912',
-  refresh: '\\e94c',
+  'question-in-circle-filled': '\\e909',
+  refresh: '\\e90a',
   request: '\\e92a',
   'right-arrow': '\\e94e',
   safe: '\\e94f',

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

@@ -22,14 +22,14 @@ export const MenuItem = styled.li`
   font-size: 14px;
   width: 100%;
   &:hover {
-    color: ${props => props.theme['marketing-primary']};
+    color: #0c6cf2;
   }
   & > *:not(div) {
     cursor: pointer;
     transition: color 0.3s;
-    color: ${props => props.theme['gray-4']};
+    color: #677185;
     &:hover {
-      color: ${props => props.theme['marketing-primary']};
+      color: #0c6cf2;
     }
   }
   & > span:first-child {
@@ -39,7 +39,7 @@ export const MenuItem = styled.li`
   &.active {
     font-weight: 500;
     & > *:not(div) {
-      color: ${props => props.theme['marketing-primary']};
+      color: #0c6cf2;
     }
   }
 `

packages/blockchain-wallet-v4-frontend/src/components/Navbar/NavbarNavItem.js

@@ -4,7 +4,7 @@ import media from 'services/ResponsiveService'
 
 const BaseNavItem = styled.li`
   box-sizing: border-box;
-  margin-right: 28px;
+  margin-right: 8px;
   cursor: pointer;
   &:last-child {
     margin-right: 0px;

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

@@ -1,7 +1,7 @@
 import React from 'react'
-import { FormattedMessage } from 'react-intl'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
+
 import media from 'services/ResponsiveService'
 import { Link, Icon, TooltipHost } from 'blockchain-info-components'
 
@@ -16,10 +16,6 @@ const FaqLink = styled(Link)`
     ${props => (props.highlighted ? '0.2' : '0')}
   );
 
-  > span:last-child {
-    display: none;
-  }
-
   ${media.mobile`
     background-color: transparent;
     padding: 0;
@@ -47,11 +43,10 @@ const FaqIcon = props => {
         highlighted={highlighted}
         data-e2e='faqLink'
       >
-        <FormattedMessage id='faq.help' defaultMessage='Help?' />
         <Icon
           id='faq-icon'
-          name='question-in-circle'
-          size='18px'
+          name='question-in-circle-filled'
+          size='22px'
           color='white'
           cursor
         />

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

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
-import { Icon, Link } from 'blockchain-info-components'
+import { Icon, Link, Text } from 'blockchain-info-components'
 
 const LogoutLink = styled(Link)`
   > span:first-child {
@@ -25,17 +25,13 @@ const Logout = props => {
   const { handleLogout } = props
 
   return (
-    <LogoutLink
-      size='14px'
-      weight={400}
-      color='white'
-      onClick={handleLogout}
-      data-e2e='logoutLink'
-    >
-      <FormattedMessage
-        id='layouts.wallet.header.signout'
-        defaultMessage='Sign Out'
-      />
+    <LogoutLink onClick={handleLogout} data-e2e='logoutLink'>
+      <Text size='13px' weight={700} color='white' uppercase>
+        <FormattedMessage
+          id='layouts.wallet.header.signout'
+          defaultMessage='Sign Out'
+        />
+      </Text>
       <Icon name='switch' size='18px' color='white' />
     </LogoutLink>
   )

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

@@ -14,6 +14,7 @@ const animationRule = css`
 `
 
 export const SpinningIcon = styled(Icon)`
+  margin-top: 2px;
   animation: ${({ rotating }) => rotating && animationRule};
 `
 
@@ -29,7 +30,7 @@ const RefreshIcon = ({ handleRefresh, rotating, animateTime }) => (
     >
       <SpinningIcon
         name='refresh'
-        size='16px'
+        size='24px'
         color='white'
         cursor
         rotating={rotating}

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

@@ -40,7 +40,7 @@ const WhatsNewIcon = props => {
         {numOfNewAnnouncements > 0 ? (
           <NotificationBadge>{numOfNewAnnouncements}</NotificationBadge>
         ) : null}
-        <Icon id='whatsnew-icon' name='bell' color='white' size='18px' cursor />
+        <Icon id='whatsnew-icon' name='bell' color='white' size='22px' cursor />
       </WhatsNewLink>
     </TooltipHost>
   )

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

@@ -58,7 +58,7 @@ const Header = props => {
             <NavbarNavItem>
               <FaqIcon />
             </NavbarNavItem>
-            <NavbarNavItem>
+            <NavbarNavItem style={{ margin: '0 6px 0 36px' }}>
               <Logout />
             </NavbarNavItem>
           </NavbarNav>

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

@@ -22,6 +22,9 @@ import {
 
 const HelperTipContainer = styled.div`
   margin-left: auto;
+  > div span {
+    color: #677185;
+  }
 `
 const NewCartridge = styled(Cartridge)`
   color: #f28b24 !important;
@@ -89,7 +92,7 @@ const Navigation = props => {
                   colorCode={coin.colorCode}
                 >
                   <Icon name={coin.icons.circleFilled} size='20px' />
-                  {coin.displayName}
+                  <span>{coin.displayName}</span>
                   {coin.showNewTagSidenav && (
                     <NewCartridge>
                       <Text color='#F28B24' size='12' weight={500} uppercase>