design(onboarding): polish backup warning screen and screenshot warning modal

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 */
 

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;
   }
 }

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;
     }
   }
 }

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);
+  }
 }