feat(Layout): mobile cleanup

blockchain · Feb 3, 2020 · 51fa8ba · 51fa8ba
1 parent b622783
commit 51fa8ba
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 14 deletions.
diff --git a/packages/blockchain-info-components/src/Menus/TabMenu/TabMenuItem.js b/packages/blockchain-info-components/src/Menus/TabMenu/TabMenuItem.js
@@ -22,8 +22,9 @@ const BaseTabMenuItem = styled.span`
     color: ${props.theme.blue600};
   `}
 
-  @media (max-width: 480px) {
+  @media (max-width: 767px) {
     font-size: 13px;
+    padding: 10px 16px;
   }
 `
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Navbar/NavbarBrand.js b/packages/blockchain-wallet-v4-frontend/src/components/Navbar/NavbarBrand.js
@@ -14,11 +14,8 @@ const BaseBrand = styled.div`
   }
   ${media.tablet`
     padding-left: 15px;
-    img {
-      height: 14px;
-    }
     > span:first-child {
-      display: block;
+      display: flex;
     }
   `}
 `

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Navbar/NavbarNavItem.js b/packages/blockchain-wallet-v4-frontend/src/components/Navbar/NavbarNavItem.js
@@ -11,8 +11,8 @@ const BaseNavItem = styled.li`
   }
 
   ${media.tablet`
-    margin-right: 2px !important;
-    min-width: 24px;
+    min-width: 26px;
+    > a  > span,
     > div > a  > span {
       font-size: 18px;
     }

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/Header/template.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/Header/template.js
@@ -24,14 +24,18 @@ import WhatsNewIcon from './WhatsNewIcon'
 const BlockchainLogoImage = styled(Image)`
   width: 200px;
   display: block;
-  margin-left: 6px;
-  @media (min-width: 768px) {
-    height: 20px;
-    margin-left: 0;
-  }
+  height: 20px;
+  margin-left: 0;
+  ${media.tablet`
+    width: 160px;
+    margin-left: 6px;
+  `}
 `
 const NavbarNavItemSpacer = styled(NavbarNavItem)`
   margin-right: 12px;
+  ${media.tablet`
+    margin-right: 8px;
+  `}
 `
 const NavbarNavItemWithText = styled(NavbarNavItem)`
   padding: 0 26px;
@@ -43,6 +47,7 @@ const NavbarNavItemWithText = styled(NavbarNavItem)`
   ${media.tablet`
     padding: 0px;
     border-left: 0px;
+    margin-right: 8px;
   `}
 `
 const NavbarStyled = styled(Navbar)`
@@ -51,6 +56,10 @@ const NavbarStyled = styled(Navbar)`
 const NavbarMenuStyled = styled(NavbarMenu)`
   width: 100%;
   margin-left: 42px;
+  ${media.tablet`
+    margin-left: 16px;
+    overflow-x: scroll;
+  `}
 `
 
 const Header = props => {

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/index.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/index.js
@@ -17,6 +17,7 @@ const Wrapper = styled.div`
   width: 100%;
   margin: 6px 0 16px;
   padding-left: 16px;
+  box-sizing: border-box;
 `
 const TitleText = styled(Text)`
   margin-right: 8px;

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/template.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/template.js
@@ -27,6 +27,7 @@ const Nav = styled.div`
   background-color: ${props => props.theme.blue900};
 `
 const Content = styled.div`
+  box-sizing: border-box;
   position: relative;
   display: flex;
   flex-direction: column;

diff --git a/...ages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionFilters/template.js b/...ages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionFilters/template.js
@@ -6,6 +6,7 @@ import { model } from 'data'
 import { StickyHeader } from 'components/Layout'
 import { TabMenuTransactionStatus, TextBox } from 'components/Form'
 import HorizontalMenu from 'components/HorizontalMenu'
+import media from 'services/ResponsiveService'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -19,9 +20,12 @@ const Search = styled.div`
   align-items: center;
   width: 300px;
 
-  @media (max-width: 1265px) {
+  ${media.laptop`
     width: inherit;
-  }
+  `}
+  ${media.tablet`
+    margin-top: 8px;
+  `}
 `
 const EthPrivateKeysWrapper = styled.div`
   display: flex;