diff --git a/src/js/routes.js b/src/js/routes.js index ba1c14fec..138c12ba2 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -33,6 +33,9 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr $ionicConfigProvider.backButton.icon('icon ion-ios-arrow-thin-left').text(''); $ionicConfigProvider.backButton.previousTitleText(false); + // CHECKBOX CIRCLE + $ionicConfigProvider.form.checkbox('circle'); + $logProvider.debugEnabled(true); $provide.decorator('$log', ['$delegate', 'platformInfo', function($delegate, platformInfo) { diff --git a/src/sass/views/includes/modals/modals.scss b/src/sass/views/includes/modals/modals.scss index af025f0c5..3510425dc 100644 --- a/src/sass/views/includes/modals/modals.scss +++ b/src/sass/views/includes/modals/modals.scss @@ -17,7 +17,7 @@ &-warning { background: $warning-orange; } - padding: 2rem; + padding: 1rem; border-radius: $unmistakable-radius $unmistakable-radius 0 0; min-height: 120px; &-img{ @@ -41,7 +41,7 @@ } } &-content { - padding: 1rem 2rem; + padding: 0rem 1rem; } &-heading { margin:0 0 1rem; diff --git a/src/sass/views/onboarding/onboard-backup-request.scss b/src/sass/views/onboarding/onboard-backup-request.scss index 255309ea7..19f8630ad 100644 --- a/src/sass/views/onboarding/onboard-backup-request.scss +++ b/src/sass/views/onboarding/onboard-backup-request.scss @@ -10,13 +10,6 @@ margin: 20px auto 5px; height: 10vh; } - @media (min-width: 570px){ - #backup-description { - max-width: 500px; - margin-left: auto; - margin-right: auto; - } - } #arrow-down { font-size: 4.2rem; color: $soft-blue; @@ -24,8 +17,30 @@ #backup-tldr { font-size: 16px; } + #backup-description { + max-width: 500px; + margin: auto; + padding: 1rem 0.5rem 0 1rem; + @media (max-height: 480px) { + padding-top: 40px; + } + } .cta-buttons { @extend %cta-buttons; padding-bottom: 4vw; } + @media (max-height: 480px) { + #warning { + display: block; + } + #backup-description { + font-size: 14px; + } + #backup-tldr { + font-size: 14px; + } + #arrow-down { + display: none; + } + } } diff --git a/src/sass/views/onboarding/onboard-disclaimer.scss b/src/sass/views/onboarding/onboard-disclaimer.scss index 25c824386..f5f84330a 100644 --- a/src/sass/views/onboarding/onboard-disclaimer.scss +++ b/src/sass/views/onboarding/onboard-disclaimer.scss @@ -1,4 +1,14 @@ #onboarding-disclaimer { + .checkbox input, .checkbox-icon { + position: relative; + width: 50px; + height: 50px; + display: block; + border: 0; + background: transparent; + cursor: pointer; + -webkit-appearance: none; + } color: #fff; height: 100%; transition: transform 2.5s ease; @@ -7,12 +17,13 @@ } &-container { max-width: 450px; - display: flex; - flex-direction: column; justify-content: center; margin-left: auto; margin-right: auto; - height: calc(100vh - 160px); + padding-top: 3rem; + @media(max-height: 480px) { + padding-top: 1.5rem; + } } .has-header > &-container { height: calc(100vh - 210px); @@ -22,6 +33,9 @@ } #disclaimer-description { margin: 1rem 1rem 2rem; + @media(max-height: 480px) { + font-size: 14px; + } } ion-content { height: 101%; @@ -45,6 +59,9 @@ &:first-child{ padding-top: 0; } + @media(max-height: 480px) { + font-size: 14px; + } } } .item { @@ -162,14 +179,17 @@ .checkbox input:checked + .checkbox-icon:before { border-color: rgb(19, 229, 182); } - button{ - margin-top:1.5rem; + button { + margin-top: 1.5rem; position: relative; } + @media (max-height:480px) { + padding: 0.5rem; + } } -@media (max-height:460px){ - #agree-to-terms{ - position: relative; - float:left; - } +@media (max-height:460px) { + #agree-to-terms{ + position: relative; + float:left; + } } diff --git a/src/sass/views/onboarding/onboard-tour.scss b/src/sass/views/onboarding/onboard-tour.scss index 7e97560c5..f50d0fc16 100644 --- a/src/sass/views/onboarding/onboard-tour.scss +++ b/src/sass/views/onboarding/onboard-tour.scss @@ -9,9 +9,6 @@ padding-bottom: 12vh; } #onboarding-illustration-currency-exchange-rate { - background-color: $soft-blue; - border-radius: $button-border-radius; - box-shadow: $subtle-box-shadow; font-size: 14px; font-weight: normal; height: 40px; diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss index 6e480b67c..9878e6043 100644 --- a/src/sass/views/onboarding/onboarding.scss +++ b/src/sass/views/onboarding/onboarding.scss @@ -34,6 +34,9 @@ @media(max-width: 350px) { line-height: 1.3; } + @media(max-height: 480px) { + font-size: 16px; + } } .onboarding-tldr { font-size: 18px; @@ -43,6 +46,9 @@ @media(max-width: 350px) { font-size: 16px; } + @media(max-height: 480px) { + font-size: 14px; + } } } @@ -67,16 +73,32 @@ @import "onboard-push-notifications"; %onboarding-illustration { - position: absolute; width: 100%; - height: 45%; - margin-top: 25vh; - top: 0; + margin-top: 1rem; background-position: center; background-repeat: no-repeat; background-size: contain; z-index: -1; } + +@media(max-height: 600px) { + %onboarding-illustration { + height: 35%; + } +} + +@media(max-height: 480px) { + %onboarding-illustration { + height: 23%; + } +} + +@media(min-height: 600px) { + %onboarding-illustration { + height: 40%; + } +} + .onboarding-illustration { &-secure { @extend %onboarding-illustration; diff --git a/src/sass/views/wallet-backup-phrase.scss b/src/sass/views/wallet-backup-phrase.scss index 68e55f414..8828b0bad 100644 --- a/src/sass/views/wallet-backup-phrase.scss +++ b/src/sass/views/wallet-backup-phrase.scss @@ -33,14 +33,13 @@ text-align: center; .backup-phrase { background-color: $subtle-gray; - padding: 12px; + margin: auto; border: 2px dashed darken($subtle-gray, 10%); border-radius: $subtle-radius; color: #2b2b2b; text-align: center; max-width: 500px; - min-height: 10rem; - width: 85%; + min-height: 9rem; display: flex; justify-content: center; align-items: center; @@ -61,70 +60,96 @@ } } } - &-step-1, + &-step-1 { + height: 70%; + color: $dark-gray; + .initial-prompt { + padding: 3rem; + @media(max-height: 480px) { + padding: 2rem; + } + } + .tldr-prompt { + padding-bottom: 3rem; + @media(max-height: 480px) { + height: 30%; + padding-bottom: 1rem; + font-size: 14px; + } + } + } &-step-2 { - display: flex; - flex-direction: column; + display: block; height: 70%; width: 100%; justify-content: center; align-items: center; - } - &-step-1 { - height: 70%; - } - &-step-2 { - height: 60% + .confirmation-prompt { + padding: 3rem; + @media(max-height: 480px) { + padding: 1rem; + } + } + #select-phrase { + background: $subtle-gray; + .select-word { + &.button[disabled] { + background: transparent !important; + box-shadow: none !important; + color: transparent; + border: 1px solid rgb(211, 211, 211); + } + } + &-content { + max-width: 500px; + margin-left: auto; + margin-right: auto; + .tldr-prompt { + font-weight: bold; + padding: 1rem; + @media(max-height: 480px) { + padding: 0.5rem; + font-size: 14px; + } + } + } + .cta-buttons { + padding-bottom: 0; + } + } + .select-word { + background: #fff; + box-shadow: $subtle-box-shadow; + display: inline-block; + margin: 3px 0; + min-height: 35px; + line-height: 33px; + padding: 0 8px; + @media (min-width: 400px) { + margin: 4px 3px; + padding: 0 16px; + } + @media(max-height: 480px) { + font-size: 14px; + } + } + .tldr-prompt { + padding-bottom: 3rem; + @media(max-height: 480px) { + height: 30%; + padding-bottom: 1rem; + font-size: 14px; + } + } } &-step-3 { - } - .initial-prompt, - .confirmation-prompt, - .tldr-prompt { - color: $dark-gray; - padding-bottom: 1.5rem; - } - .initial-prompt, - .confirmation-prompt { - padding-top: 1.5rem; - } - .tldr-prompt { - font-weight: bold; } .cta-buttons { @extend %cta-buttons; padding-bottom: 5vh; - } - .select-word { - background: #fff; - box-shadow: $subtle-box-shadow; - display: inline-block; - margin: 3px 0; - min-height: 38px; - line-height: 33px; - padding: 0 8px; - @media (min-width: 400px) { - margin: 4px 3px; - padding: 0 16px; - } - } - #select-phrase { - background: $subtle-gray; - padding: 5% 0; - .select-word { - &.button[disabled] { - background: transparent !important; - box-shadow: none !important; - color: transparent; - border: 1px solid rgb(211, 211, 211); - } - } - &-content { - max-width: 500px; - width: 90%; - margin-left: auto; - margin-right: auto; + @media(max-height: 480px) { + padding-bottom: 3vh; } } ion-content.has-tabs{