feat(Tabs): restyle tabmenuitem

blockchain · Jan 29, 2020 · 6a96a67 · 6a96a67
1 parent 7badddb
commit 6a96a67
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 28 deletions.
diff --git a/packages/blockchain-info-components/src/Menus/TabMenu/TabMenu.js b/packages/blockchain-info-components/src/Menus/TabMenu/TabMenu.js
@@ -6,7 +6,8 @@ const BaseTabMenu = styled.div`
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  width: 100%;
+  border-radius: 8px;
+  background-color: ${props => props.theme.grey000};
 `
 
 const TabMenu = props => {

diff --git a/packages/blockchain-info-components/src/Menus/TabMenu/TabMenuItem.js b/packages/blockchain-info-components/src/Menus/TabMenu/TabMenuItem.js
@@ -4,35 +4,24 @@ import styled from 'styled-components'
 
 const BaseTabMenuItem = styled.span`
   position: relative;
-  padding: 6px 8px;
+  padding: 12px 20px;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-weight: 500;
   font-size: 14px;
   text-align: center;
+  border-radius: 8px;
+  margin: 2px;
   color: ${props =>
-    props.selected ? props.theme.blue600 : props.theme['gray-3']};
+    props.selected ? props.theme.blue600 : props.theme.grey400};
   cursor: pointer;
+  ${props =>
+    props.selected &&
+    `
+    background-color: ${props.theme.white};
+    color: ${props.theme.blue600};
+  `}
 
-  &:not(:last-child) {
-    margin-right: 15px;
-  }
-
-  &:hover {
-    color: ${props => props.theme['gray-5']};
-  }
-
-  &.active {
-    color: ${props => props.theme['gray-5']};
-    & :after {
-      position: absolute;
-      content: '';
-      top: 39px;
-      left: 0;
-      width: 100%;
-      border-bottom: 4px solid ${props => props.theme.blue600};
-    }
-  }
   @media (max-width: 480px) {
     font-size: 13px;
   }

diff --git a/...es/blockchain-wallet-v4-frontend/src/components/Form/TabMenuTransactionStatus/template.js b/...es/blockchain-wallet-v4-frontend/src/components/Form/TabMenuTransactionStatus/template.js
@@ -11,7 +11,7 @@ const TabMenuTransactionStatus = props => {
     <TabMenu>
       {statuses.indexOf('') > -1 && (
         <TabMenuItem
-          className={value === '' ? 'active' : ''}
+          selected={value === ''}
           onClick={() => handleClick('')}
           data-e2e='transactionTabMenuAll'
         >
@@ -23,7 +23,7 @@ const TabMenuTransactionStatus = props => {
       )}
       {statuses.indexOf('received') > -1 && (
         <TabMenuItem
-          className={value === 'received' ? 'active' : ''}
+          selected={value === 'received'}
           onClick={() => handleClick('received')}
           data-e2e='transactionTabMenuReceived'
         >
@@ -35,7 +35,7 @@ const TabMenuTransactionStatus = props => {
       )}
       {statuses.indexOf('sent') > -1 && (
         <TabMenuItem
-          className={value === 'sent' ? 'active' : ''}
+          selected={value === 'sent'}
           onClick={() => handleClick('sent')}
           data-e2e='transactionTabMenuSent'
         >
@@ -47,7 +47,7 @@ const TabMenuTransactionStatus = props => {
       )}
       {statuses.indexOf('transferred') > -1 && (
         <TabMenuItem
-          className={value === 'transferred' ? 'active' : ''}
+          selected={value === 'transferred'}
           onClick={() => handleClick('transferred')}
           data-e2e='transactionTabMenuTransferred'
         >

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/index.tsx
@@ -17,8 +17,7 @@ import Success from './template.success'
 export const Wrapper = styled.div`
   width: 100%;
   margin: 12px 30px;
-  padding-top: 24px;
-  border-top: 1px solid ${(props) => props.theme.blue100};
+  padding-top: 8px;
 `
 export const Header = styled.div`
   margin-bottom: 40px;