fix(pit-copy-mobile): Fixed placement of image and button

blockchain · Jul 24, 2019 · 9bc719d · 9bc719d
1 parent 65f8eda
commit 9bc719d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 17 deletions.
diff --git a/packages/blockchain-info-components/src/Images/Images.js b/packages/blockchain-info-components/src/Images/Images.js
@@ -62,7 +62,6 @@ 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'
 import stellarPlanet2 from './img/stellar-planet@2x.png'
@@ -201,7 +200,6 @@ export default {
   'sfox-logo': sfoxLogo,
   'silver-approved': silverApproved,
   'starfield-banner-bg': starfieldBannerBg,
-  starfield: starfield,
   starfield2: starfield2,
   'stellar-planet': stellarPlanet,
   'stellar-planet2': stellarPlanet2,

diff --git a/packages/blockchain-info-components/src/Images/img/starfield.png b/packages/blockchain-info-components/src/Images/img/starfield.png
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/ThePit/template.js b/packages/blockchain-wallet-v4-frontend/src/scenes/ThePit/template.js
@@ -35,6 +35,9 @@ const Row = styled.div`
   &:last-child {
     margin-top: 32px;
   }
+  ${media.tablet`
+    flex-direction: column;
+  `};
 `
 const Content = styled(Text)`
   margin: 15px 0 20px 0;
@@ -69,6 +72,23 @@ const Column = styled.div`
   align-items: center;
   justify-content: center;
 `
+
+const FooterColumn = styled(Column)`
+  padding-left: 25px;
+  ${media.tablet`
+    padding-left: 0;
+  `}
+`
+
+const StarfieldColumn = styled(Column)`
+  background-image: url('/img/starfield2.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 15px;
+  ${media.tablet`
+    padding: 20px 0;
+  `}
+`
 const SubTextGroup = styled(TextGroup)`
   padding-right: 25px;
   ${media.tablet`
@@ -106,10 +126,7 @@ const FooterLink = styled(Link)`
 const PitLogo = styled(Image)`
   margin-bottom: 10px;
   filter: invert(0);
-`
-
-const Starfield = styled(Image)`
-  position: absolute;
+  height: 40px;
 `
 
 const ThePit = props => {
@@ -134,23 +151,17 @@ const ThePit = props => {
               </Content>
             </TitleTextGroup>
           </Column>
-          <Column>
-            <Starfield
-              name='starfield'
-              srcset={{
-                starfield2: '2x'
-              }}
-            />
+          <StarfieldColumn>
             <StarfieldTextGroup>
-              <PitLogo name='the-pit-text' height='40px' />
+              <PitLogo name='the-pit-text' />
               <StarfieldText weight={600}>
                 <FormattedMessage
                   id='scenes.thepit.image.subtitle'
                   defaultMessage='The only Exchange that connects to your Wallet.'
                 />
               </StarfieldText>
             </StarfieldTextGroup>
-          </Column>
+          </StarfieldColumn>
         </Row>
         <Row>
           <SubTextGroup>
@@ -205,7 +216,7 @@ const ThePit = props => {
               />
             </FooterButton>
           </Column>
-          <Column style={{ paddingLeft: '25px' }}>
+          <FooterColumn>
             <FooterLink
               href='https://pit.blockchain.com/'
               target='_blank'
@@ -218,7 +229,7 @@ const ThePit = props => {
                 />
               </FooterButton>
             </FooterLink>
-          </Column>
+          </FooterColumn>
         </Row>
       </Container>
     </Wrapper>