feat(Airdrops): green airdrop active menuleft

blockchain · Nov 22, 2019 · 2885439 · 2885439
1 parent 5c30f9e
commit 2885439
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 8 deletions.
diff --git a/packages/blockchain-info-components/src/Colors/DarkMode.js b/packages/blockchain-info-components/src/Colors/DarkMode.js
@@ -60,11 +60,15 @@ export default {
   blue200: '#BBDBFC',
   blue500: '#3D89F5',
   green000: '#E6F5EB',
+  green100: '#D1F0DB',
+  green200: '#B8E5C7',
+  green300: '#8BDCB3',
   green400: '#59CD93',
   green500: '#339F7B',
-  green600: '#00994C',
+  green600: '#00875A',
   green700: '#006B47',
   green800: '#04593D',
+  green900: '#004025',
   red000: '#FAECEB',
   red100: '#F5D9D7',
   red200: '#F0C3C0',

diff --git a/packages/blockchain-info-components/src/Colors/Default.js b/packages/blockchain-info-components/src/Colors/Default.js
@@ -153,9 +153,12 @@ export default {
   blue200: '#BBDBFC',
   blue500: '#3D89F5',
   green000: '#E6F5EB',
+  green100: '#D1F0DB',
+  green200: '#B8E5C7',
+  green300: '#8BDCB3',
   green400: '#59CD93',
   green500: '#339F7B',
-  green600: '#00994C',
+  green600: '#00875A',
   green700: '#006B47',
   green800: '#04593D',
   green900: '#004025',

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/MenuLeft/index.js b/packages/blockchain-wallet-v4-frontend/src/components/MenuLeft/index.js
@@ -61,6 +61,26 @@ export const MenuItem = styled.button`
       color: ${props => props.theme['deep-blue']};
     }
   }
+  &.airdrop {
+    &:hover {
+      background: ${props => props.theme['green000']};
+    }
+    &.active {
+      background: ${props => props.theme['green100']};
+    }
+    &:active {
+      background: ${props => props.theme['green200']};
+    }
+    &:hover,
+    &.active {
+      .icon {
+        color: ${props => props.theme['green600']};
+      }
+      .destination {
+        color: ${props => props.theme['green800']};
+      }
+    }
+  }
   &.coin {
     .coin-icon {
       width: 30px;

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Navigation/template.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Navigation/template.js
@@ -92,7 +92,7 @@ const Navigation = props => {
         </MenuItem>
       </SpotlightLinkContainer>
       <SpotlightLinkContainer to='/airdrops' activeClassName='active'>
-        <MenuItem data-e2e='airdropLink'>
+        <MenuItem data-e2e='airdropLink' className='airdrop'>
           <JoyrideSpotlight className='airdrop-tooltip' />
           <MenuIcon name='parachute' size='24px' />
           <Destination>
@@ -102,10 +102,10 @@ const Navigation = props => {
             />
           </Destination>
           <NewCartridge>
-            <Text color='orange' size='12' weight={500} uppercase>
+            <Text color='green600' size='12' weight={600} uppercase>
               <FormattedMessage
-                id='layouts.wallet.menuleft.navigation.transactions.new'
-                defaultMessage='New'
+                id='layouts.wallet.menuleft.navigation.airdrop.active'
+                defaultMessage='Active'
               />
             </Text>
           </NewCartridge>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/AirdropInfo/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/AirdropInfo/index.js
@@ -11,7 +11,7 @@ export const Box = styled.div`
   padding: 24px;
   border-radius: 8px;
   border: 1px solid ${props => props.theme['grey000']};
-  width: 300px;
+  width: 280px;
 `
 
 const AirdropBox = styled(Box)`

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/StxAirdrop/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/StxAirdrop/index.js
@@ -82,7 +82,7 @@ const StxAirdrop = props => {
           </Text>
         </Date>
       </StatusContainer>
-      <Text size='11px' color='grey600' style={{ marginTop: '12px' }}>
+      <Text size='11px' color='grey600' style={{ marginTop: '36px' }}>
         <FormattedMessage
           id='scenes.airdrop.stx.regulatory'
           defaultMessage="*For regulatory reasons, USA, Canada and Japan nationals can't participate in the airdrop."