From 6dcf78256eb9f729704cde8c9963f1cd04c5ff9f Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Thu, 6 Oct 2016 22:42:45 -0400 Subject: [PATCH] design(onboarding): polish backup warning screen and screenshot warning modal --- src/sass/variables.scss | 3 ++ src/sass/views/backup-warning.scss | 54 ++----------------- src/sass/views/includes/modals/modals.scss | 47 ++++++++-------- src/sass/views/onboarding/onboarding.scss | 5 ++ www/views/backupWarning.html | 28 +++------- .../includes/screenshotWarningModal.html | 17 +++--- 6 files changed, 50 insertions(+), 104 deletions(-) diff --git a/src/sass/variables.scss b/src/sass/variables.scss index a725ea5e5..545a4b9e5 100644 --- a/src/sass/variables.scss +++ b/src/sass/variables.scss @@ -5,12 +5,15 @@ $fill-blue: #D5DFFF; $subtle-gray: #f5f5f5; $roboto: "Roboto", sans-serif; $roboto-light: "Roboto-Light", sans-serif-light; +$success-green: #17ae8c; +$warning-orange: #ffa500; $dark-gray: #445; $mid-gray: #667; $light-gray: #9b9bab; $subtle-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); $hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3); $visible-radius: 6px; +$unmistakable-radius: 12px; /* Set ionic variables */ diff --git a/src/sass/views/backup-warning.scss b/src/sass/views/backup-warning.scss index ee1017bcc..71ac7efee 100644 --- a/src/sass/views/backup-warning.scss +++ b/src/sass/views/backup-warning.scss @@ -1,54 +1,6 @@ #backup-warning{ - .warning{ - margin:4rem auto 1rem; - height: 11rem; - } - button{ - color:#fff; - } - #arrow-down{ - font-size: 4.2rem; - } - .cta-buttons{ - float:none; - bottom:67px; - position: absolute; - width:100%; - button{ - max-width: 400px; - } - } -} - -@media (max-width: 400px){ - #backup-warning{ - .warning{ - margin: 2rem auto 1rem; - height: 8rem; - } - h3{ - font-size:1.3rem; - } - p{ - font-size:.9rem; - max-width: 80%; - flex: 0 0 80%; - } - .warning-image{ - height: 11rem; - } - .cta-buttons{ - float:none; - bottom:65px; - position: absolute; - } - } -} -@media (max-height: 540px){ - #backup-warning{ - .cta-buttons{ - float:left; - position: relative; - } + #cta-buttons { + @extend %cta-buttons; + height: 250px; } } diff --git a/src/sass/views/includes/modals/modals.scss b/src/sass/views/includes/modals/modals.scss index c38918e7c..98078e354 100644 --- a/src/sass/views/includes/modals/modals.scss +++ b/src/sass/views/includes/modals/modals.scss @@ -7,16 +7,17 @@ width: 90%; max-width: 350px; transform: translate(-50%, -50%); - border-radius: .25rem; + border-radius: $unmistakable-radius; + text-align: center; &-header { &-success { - background: rgb(1, 209, 162); + background: $success-green; } &-warning { - background: orange; + background: $warning-orange; } - padding: 1rem; - border-radius: .25rem .25rem 0 0; + padding: 2rem; + border-radius: $unmistakable-radius $unmistakable-radius 0 0; min-height: 120px; &-img{ height: 6rem; @@ -39,28 +40,30 @@ } } &-content { - padding: .5rem .8rem; - h5,p{ - margin:0 0 1rem; - } - h5 { - color: rgb(74, 74, 74); - font-weight: bold; - font-size: 1.3rem; - margin-top:1rem; - } - p{ - font-weight: 200; - } + padding: 1rem 2rem; + } + &-heading { + margin:0 0 1rem; + color: $dark-gray; + font-weight: bold; + font-size: 1.3rem; + margin-top:1rem; + } + &-message { + color: $mid-gray; + font-weight: 200; + } + .button { + margin-top: 1rem; } &-content-success { - button{ - color:rgb(23, 174, 140) !important; + .button { + color: $success-green !important; } } &-content-warning { - button{ - color: orange !important; + .button { + color: $warning-orange !important; } } } diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss index 1d7d699d6..5dc5ace31 100644 --- a/src/sass/views/onboarding/onboarding.scss +++ b/src/sass/views/onboarding/onboarding.scss @@ -72,6 +72,7 @@ background-position: center; background-repeat: no-repeat; background-size: contain; + z-index: -1; } .onboarding-illustration { &-secure { @@ -90,4 +91,8 @@ @extend %onboarding-illustration; background-image: url(../img/onboarding-push-notifications.svg); } + &-backup-warning { + @extend %onboarding-illustration; + background-image: url(../img/backup-warning.svg); + } } diff --git a/www/views/backupWarning.html b/www/views/backupWarning.html index 55464baac..9b24b68e9 100644 --- a/www/views/backupWarning.html +++ b/www/views/backupWarning.html @@ -1,5 +1,5 @@ - + +
Are you being watched?
+
Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?
+
+
+
Anyone with your backup phrase can access or spend your bitcoin.
+
diff --git a/www/views/includes/screenshotWarningModal.html b/www/views/includes/screenshotWarningModal.html index bd7f2abba..b0e7dd606 100644 --- a/www/views/includes/screenshotWarningModal.html +++ b/www/views/includes/screenshotWarningModal.html @@ -1,15 +1,12 @@