Merge pull request #253 from plondon/upgrade-dialogue

Upgrade dialogue slider

app/partials/upgrade.jade

@@ -3,18 +3,36 @@
 .modal-body.upgrade-modal
   uib-alert(type="danger", close="insist = false", ng-show="insist")
     span(translate="NEED_SECOND_PASSWORD_FOR_UPGRADE")
-  p(translate="UPGRADE_WELCOME")
-  p(translate="UPGRADE_EASY")
-  ul
-    li(translate="UPGRADE_NEW_DESIGN")
-    li(translate="UPGRADE_SECURITY_CENTER")
-    li(translate="UPGRADE_PRIVACY")
-    li(translate="UPGRADE_BACKUP")
-    li(translate="UPGRADE_FUND_MANAGEMENT")
-  p
-    span(translate="UPGRADE_LIMITATIONS")
-    span  
-      b(translate="UPGRADE_DISABLES_API_ACCESS", ng-show="settings.apiAccess")
+  div.header
+    p(translate="UPGRADE_WELCOME").type-h4
+    p(translate="UPGRADE_EASY").subtext
+    p(translate="UPGRADE_BETTER").subtext
+  uib-carousel(no-wrap="true")
+    uib-slide
+      div
+        img(src="assets/icons/png/new-design.png").logo
+      li(translate="UPGRADE_NEW_DESIGN").type-h4
+    uib-slide
+      div
+        img(src="assets/icons/png/security-upgrade.png").logo
+      li(translate="UPGRADE_SECURITY_CENTER").type-h4
+    uib-slide
+      div
+        img(src="assets/icons/png/privacy.png").logo
+      li(translate="UPGRADE_PRIVACY").type-h4
+    uib-slide
+      div
+        img(src="assets/icons/png/backup.png").logo
+      li(translate="UPGRADE_BACKUP").type-h4
+    uib-slide
+      div
+        img(src="assets/icons/png/fund-management.png").logo
+      li(translate="UPGRADE_FUND_MANAGEMENT").type-h4
+    uib-slide
+      div
+        img(src="assets/icons/png/watch-only-shared-coin.png").logo
+        li(translate="UPGRADE_LIMITATIONS").type-h4
+          b(translate="UPGRADE_DISABLES_API_ACCESS", ng-show="settings.apiAccess").type-h4
 .modal-footer.pal.flex-end
   button.button-muted.mrm(ng-click="cancel()", translate="CANCEL", ng-disabled="busy")
   button.button-success(ui-ladda="busy", ng-click="upgrade()" ng-disabled="waiting", ladda-translate="UPGRADE_NOW", data-style="expand-left")

assets/css/modules/_upgrade.scss

@@ -1,7 +1,96 @@
 .upgrade-modal {
-  li:before
-  {
-      content: '✔';
-      margin-right: .25em;
+  .header {
+    margin: 0 auto;
+    max-width: 500px;
+    text-align: center;
+    p {
+      margin: 0;
+      &.subtext {
+        color: $mid-grey;
+      }
+    }
+  }
+  .carousel {
+    margin-top: 10px;
+    .carousel-inner {
+      .item {
+        margin-bottom: 40px;
+        @include transition(transform $slow);
+        > div {
+          display: inline-block;
+          position: relative;
+          &:before {
+            content: '';
+            position: absolute;
+            top: 5px;
+            left: 10px;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: #fdb0ad;
+            box-shadow: 12px 0 0 #fdeaa2, 24px 0 0 #d7edb4;
+          }
+        }
+        li {
+          list-style-type: none;
+        }
+        .logo {
+          margin: 0 auto;
+          max-height: 250px;
+          margin-bottom: 15px;
+          border: 1px solid $light-grey;
+          border-radius: 4px 4px 0px 0px;
+          border-top: 16px solid $light-grey;
+        }
+        // customization because the copy is longer (unsupported features in upgrade)
+        &:last-child {
+          > div:before {
+            display: none;
+          }
+          li {
+            max-width: 525px;
+            font-size: 1em;
+            margin: 0 auto;
+          }
+          .logo {
+            border: 0px;
+            max-height: 242px;
+          }
+        }
+      }
+    }
+    .carousel-control {
+      top: -80px;
+      background-image: none;
+      &.left {
+        display: none;
+      }
+      &.right {
+        > span {
+          text-shadow: none;
+          &:before {
+            color: $blue;
+            content: '\e649';
+            font-family: 'ThemifyIcons';
+          }
+        }
+      }
+    }
+  }
+  .carousel-indicators {
+    bottom: 0px;
+    margin-bottom: 0px;
+    > li {
+      margin: 4px;
+      border: 1px solid $blue;
+      background-color: white;
+      @include transition(background-color $slow);
+      &.active {
+        margin: 4px;
+        width: 10px;
+        height: 10px;
+        background-color: $blue;
+      }
+    }
   }
 }

assets/css/utilities/_animations.scss

@@ -1,3 +1,9 @@
+//////////
+//speeds//
+//////////
+$slow: 0.4s;
+$fast: 0.2s;
+
 ////////////////////////////////
 //modal collapse and come back//
 ////////////////////////////////

locales/en-human.json

@@ -253,7 +253,8 @@
   "UPGRADE_DISABLES_API_ACCESS" : "Upgrading will disable API access.",
   "UPGRADE_NOW" : "Upgrade Now",
   "UPGRADE_WELCOME" : "Welcome to the new version of the Blockchain Wallet!",
-  "UPGRADE_EASY" : "The upgrade takes just a second and your bitcoins and history will be safe. Here is what’s better:",
+  "UPGRADE_EASY" : "The upgrade takes just a second and your bitcoins and history will be safe.",
+  "UPGRADE_BETTER": "Here is what’s better:",
   "UPGRADE_NEW_DESIGN" : "Completely updated design and user experience",
   "UPGRADE_SECURITY_CENTER" : "Robust security center",
   "UPGRADE_PRIVACY" : "Enhanced Privacy",