Merge pull request #1747 from blockchain/fix/the-pit-banner-styling

Fix/the pit banner styling

Author: plondon

packages/blockchain-info-components/src/Images/Images.js

@@ -61,6 +61,7 @@ import shapeshiftLogo from './img/shapeshift-logo.png'
 import silverApproved from './img/silver-approved.svg'
 import smartphone from './img/smartphone.png'
 import sophisticated from './img/sophisticated.svg'
+import starfieldBannerBg from './img/starfield-banner-bg.png'
 import starfield from './img/starfield.png'
 import starfield2 from './img/starfield2.png'
 import stellarPlanet from './img/stellar-planet.png'
@@ -199,6 +200,7 @@ export default {
   'sfox-landing': sfoxLanding,
   'sfox-logo': sfoxLogo,
   'silver-approved': silverApproved,
+  'starfield-banner-bg': starfieldBannerBg,
   starfield: starfield,
   starfield2: starfield2,
   'stellar-planet': stellarPlanet,

packages/blockchain-info-components/src/Images/img/starfield-banner-bg.png

@@ -29,6 +29,7 @@ const HelperTipContainer = styled.div`
     color: ${props => props.theme['gray-3']};
   }
 `
+
 const NewCartridge = styled(Cartridge)`
   color: ${props => props.theme['orange']} !important;
   background-color: ${props => props.theme['white']};

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

@@ -11,12 +11,9 @@ const Wrapper = styled.div`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  box-sizing: border-box;
-  background: ${props =>
-    `linear-gradient(312.54deg, ${props.theme.purple} -25.42%, ${
-      props.theme.black
-    } 70.12%)`};
-  border-radius: 4px;
+  background-image: url('/img/starfield-banner-bg.png');
+  background-size: cover;
+  border-radius: 8px;
   overflow: hidden;
   padding: 20px;
 
@@ -34,6 +31,7 @@ const NewCartridge = styled(Cartridge)`
   color: ${props => props.theme['pitTurquoise']};
   margin-left: 0px;
   margin-right: 20px;
+  border-radius: 4px;
 `
 const Copy = styled(Text)`
   display: flex;
@@ -47,8 +45,9 @@ const Copy = styled(Text)`
 const BannerButton = styled(Button)`
   ${media.mobile`
     font-size: 14px;
-    height: 40px;
+    height: 48px;
     margin-top: 8px;
+    padding: 10px;
   `}
 `