fix(SecurityCenter): sizing for mobile width

blockchain · May 3, 2018 · 34cc1cc · 34cc1cc
1 parent 3d78f5d
commit 34cc1cc
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 12 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Security/SecurityContainer.js b/packages/blockchain-wallet-v4-frontend/src/components/Security/SecurityContainer.js
@@ -9,6 +9,7 @@ const SecurityContainer = styled.div`
   padding: 20px;
     @media (min-width: 400px) and (max-width: 991px) {
       display: block;
+      width: 95%;
     }
 `
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Security/SecurityDescription.js b/packages/blockchain-wallet-v4-frontend/src/components/Security/SecurityDescription.js
@@ -2,12 +2,14 @@ import styled from 'styled-components'
 import { Color } from 'blockchain-info-components'
 
 const SecurityDescription = styled.div`
-  text-align: justify;
   padding: 10px 0;
   font-family: 'Montserrat', sans-serif;
   font-weight: 200;
   font-size: 14px;
   color: ${Color('gray-5')};
+  @media(min-width: 480px) {
+    text-align: justify;
+  }
 
   & > * { display: inline; margin-right: 5px; }
 `

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Security/SecurityHeader.js b/packages/blockchain-wallet-v4-frontend/src/components/Security/SecurityHeader.js
@@ -7,9 +7,12 @@ const SecurityHeader = styled.div`
   align-items: flex-start;
   font-family: 'Montserrat', sans-serif;
   font-weight: 500;
-  font-size: 16px;
+  font-size: 18px;
   color: ${Color('gray-5')};
   width: 100%;
+  @media(min-width: 480px) {
+    font-size: 16px;
+}
 
   & > * { margin-right: 10px; }
 `

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Security/SecurityIcon.js b/packages/blockchain-wallet-v4-frontend/src/components/Security/SecurityIcon.js
@@ -3,14 +3,17 @@ import styled from 'styled-components'
 import { Icon } from 'blockchain-info-components'
 
 const Circle = styled.div`
-  display: flex;
+  display: none;
   justify-content: center;
   align-self: center;
   align-items: center;
   width: 74px;
   height: 74px;
   border: 2px solid ${props => props.enabled ? props.theme['success'] : props.theme['gray-2']};
   border-radius: 74px;
+  @media(min-width: 480px) {
+    display: flex;
+  }
 `
 const StyledIcon = styled(Icon)`
   display: flex;

diff --git a/.../blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/EmailAddress/template.success.js b/.../blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/EmailAddress/template.success.js
@@ -44,9 +44,11 @@ const EmailButton = styled(Button)`
   }
 `
 const IconAndHeaderContainer = styled.div`
-  display: grid;
-  grid-template-columns: 15% 85%;
   opacity: ${props => props.success ? 0.3 : 1};
+  @media(min-width: 480px) {
+    display: grid;
+    grid-template-columns: 15% 85%;
+  }
 `
 const GridContainer = styled(SecurityContainer)`
   grid-template-columns: 85% 15%;

diff --git a/...hain-wallet-v4-frontend/src/scenes/SecurityCenter/TwoStepVerification/template.success.js b/...hain-wallet-v4-frontend/src/scenes/SecurityCenter/TwoStepVerification/template.success.js
@@ -15,7 +15,7 @@ import { spacing } from 'services/StyleService'
 const pulseAnimation = keyframes`${pulse}`
 
 const SecuritySummaryChoice = styled(SecuritySummary)`
-  width: 100%;  
+  width: 100%;
   @media(min-width: 992px) {
     width: 120%;
   }
@@ -26,9 +26,11 @@ const SecurityTwoStepContainer = SecurityContainer.extend`
   grid-template-columns: 85% 15%;
 `
 const IconAndHeaderContainer = styled.div`
-  display: grid;
-  grid-template-columns: 15% 85%;
   opacity: ${props => props.success ? 0.3 : 1};
+  @media(min-width: 480px) {
+    display: grid;
+    grid-template-columns: 15% 85%;
+}
 `
 const DisableContainer = styled.div`
   width: 100%;

diff --git a/...tend/src/scenes/SecurityCenter/WalletRecoveryPhrase/RecordBackupPhrase/FirstStep/index.js b/...tend/src/scenes/SecurityCenter/WalletRecoveryPhrase/RecordBackupPhrase/FirstStep/index.js
@@ -33,7 +33,11 @@ const FirstStepContainer = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 118%;
+  width: 100%;
+  @media(min-width: 480px){
+    width: 118%;
+  }
+
 `
 const Buttons = styled.div`
   display: flex;

diff --git a/...ain-wallet-v4-frontend/src/scenes/SecurityCenter/WalletRecoveryPhrase/template.success.js b/...ain-wallet-v4-frontend/src/scenes/SecurityCenter/WalletRecoveryPhrase/template.success.js
@@ -13,7 +13,9 @@ const SecurityGridContainer = SecurityContainer.extend`
 `
 const IconAndHeaderContainer = styled.div`
   display: grid;
-  grid-template-columns: 15% 85%;
+  @media(min-width: 480px) {
+    grid-template-columns: 15% 85%;
+  }
   `
 const BackupButton = styled(Button)`
   width: 100px;

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/template.js b/packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/template.js
@@ -42,7 +42,7 @@ const BodyContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  width: 90%;
+  width: 100%;
   & > * {
     margin-top: 20px;
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Security/template.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Security/template.js
@@ -8,8 +8,11 @@ import BasicSecurity from './BasicSecurity'
 import AdvancedSecurity from './AdvancedSecurity'
 
 const Wrapper = styled.section`
-  padding: 30px;
+  padding: 20px;
   box-sizing: border-box;
+  @@media (min-width: 480px) {
+    padding: 30px;
+  }
 `
 const ButtonContainer = styled.div`
   padding: 10px 0;