design(welcome): improve welcome responsiveness, better scss organization

public/views/onboarding/welcome.html

@@ -1,23 +1,13 @@
 <ion-view id="onboard-welcome" class="onboarding">
   <ion-content ng-controller="welcomeController" ng-init="createProfile()" scroll="false">
-    <!-- <qr-scanner id="shopping-24" on-scan="goImport(data)"></qr-scanner> -->
+    <!-- <qr-scanner id="qrcode" on-scan="goImport(data)"></qr-scanner> -->
-    <article id="logo-tagline">
+    <div id="logo-tagline">
-      <div class="row text-center">
+        <img src='img/bitpay-logo.svg' id="logo" />
-        <img src='img/bitpay-logo.svg' class="logo col col-50" />
+        <p translate class="lead">Take control of your money,<br /> get started with bitcoin.</p>
-      </div>
+    </div>
-      <div class="row text-center">
+    <div id="cta-buttons">
-        <p translate class="text-center col col-60">
+        <button class="button button-block button-primary" id="get-started" href ui-sref="onboarding.tour" translate>Get started</button>
-          Take control of your money, <br /> get started with bitcoin.
+        <button class="button button-block button-secondary button-clear" id="restore" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore</button>
-        </p>
+    </div>
-      </div>
-    </article>
-    <article id="cta-buttons">
-      <div class="row">
-        <button class="button button-block get-started col col-75" href ui-sref="onboarding.tour" translate>Get started</button>
-      </div>
-      <div class="row">
-        <button class="button button-block restore col col-75" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore</button>
-      </div>
-    </article>
   </ion-content>
 </ion-view>

src/sass/main.scss

@@ -1,7 +1,7 @@
 @import "fonts";
 @import "variables";
-@import "icons";
 @import "ionic";
+@import "icons";
 @import "forms";
 @import "mixins/mixins";
 @import "views/views";

src/sass/shame.scss

@@ -92,12 +92,6 @@ input[type=number] {
   }
 }
 
-.button-block {
-  width: 90% !important;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .name-wallet {
   font-size: 14px;
   font-weight: 400;

src/sass/variables.scss

@@ -13,9 +13,15 @@ $light-gray: #9b9bab;
 
 $positive: $soft-blue;
 
+$font-size-base: 16px;
+$font-size-small: 12px;
 $font-family-sans-serif: $roboto;
 $font-family-light-sans-serif: $roboto-light;
 
+$button-border-radius: 6px;
+$button-height: 52px;
+$button-padding: 16px;
+
 $base-background-color: $subtle-gray;
 
 $item-default-active-bg: $subtle-gray;

src/sass/views/onboarding/onboard-welcome.scss

@@ -1,73 +1,39 @@
 #onboard-welcome {
-  ion-content {
+  & > ion-content {
     background: url(../img/onboarding-welcome-bg.png);
     background-position: top center;
     background-size: contain;
     background-repeat: repeat-x;
-    #shopping-24 {
+  }
-      content: url("../img/onboarding-welcome-shopping24.png");
+  #qrcode {
-      position: absolute;
+    content: url("../img/onboarding-welcome-qrcode.png");
-      top: 5%;
+    position: absolute;
-      right: 5%;
+    top: 5%;
-      width: 35px;
+    right: 5%;
-      height: auto;
+    width: 20px;
-    }
+    height: auto;
-    .logo,
+  }
-    p {
+  #logo-tagline {
-      @include center-block();
+    width: 100%;
-    }
+    height: 70%;
-    .logo {
+    display: flex;
-      margin-top: 20rem;
+    flex-direction: column;
-    }
+    justify-content: space-around;
+  }
+  #logo {
+    width: 40%;
+    max-width: 200px;
+    margin: 5rem auto 0;
+  }
+  .lead {
+    line-height: 1.6;
+  }
+  #cta-buttons {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
     button {
-      @include center-block(1rem);
+      max-width: 400px;
-      color: #fff;
-      &.get-started {
-        background: rgb(100, 124, 232);
-        margin-top: 4rem;
-      }
-      &.restore {
-        background: none;
-      }
-    }
-    #cta-buttons {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      button {
-        max-width: 400px;
-        min-width: 300px;
-      }
-    }
-  }
-}
-
-@media (max-width:500px),
-(max-height:800px) {
-  #onboard-welcome {
-    ion-content {
-      .logo {
-        margin-top: 12rem;
-      }
-    }
-  }
-}
-
-@media (max-width:420px) {
-  #onboard-welcome {
-    ion-content {
-      .logo {
-        margin-top: 8rem;
-      }
-    }
-  }
-}
-
-@media (max-height:550px) {
-  #onboard-welcome {
-    #cta-buttons {
-      position: relative !important;
-      float: left;
     }
   }
 }

src/sass/views/onboarding/onboarding-buttons.scss

@@ -0,0 +1,32 @@
+$button-primary-bg:              $positive;
+$button-primary-text:            #fff;
+$button-primary-border:          transparent;
+$button-primary-active-bg:       darken($positive, 5%);
+$button-primary-active-border:   transparent;
+
+$button-secondary-bg:              rgba(215, 215, 215, 0.1);
+$button-secondary-text:            #fff;
+$button-secondary-border:          transparent;
+$button-secondary-active-bg:       rgba(215, 215, 215, 0.2);
+$button-secondary-active-border:   transparent;
+
+.onboarding .button {
+  &.button-primary {
+    @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text);
+    @include button-clear($button-primary-bg);
+    @include button-outline($button-primary-bg);
+  }
+  &.button-secondary {
+    @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text);
+    @include button-clear($button-secondary-text);
+    @include button-outline($button-secondary-text);
+  }
+  &.button-primary,
+  &.button-secondary {
+    &.button-block {
+      width: 85%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}

src/sass/views/onboarding/onboarding.scss

@@ -1,15 +1,10 @@
 .onboarding {
-  background: rgba(30, 49, 134, 1);
+  background: #1e3186;
-  background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
+  background-image: linear-gradient(to bottom, #1e3186 0%, #111b49 100%);
-  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(100%, rgba(17, 27, 73, 1)));
-  background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
-  background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
-  background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
-  background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
-  color: #fff;
   height: 100%;
+  text-align: center;
   .bar.bar-header {
-    background: rgb(30, 49, 134);
+    background: none;
     color: #fff;
     button {
       color: #fff;
@@ -20,9 +15,8 @@
       }
     }
   }
-  .bar.bar-stable{
+  .bar.bar-stable {
-    border-color: transparent;
+    border: 0 none transparent;
-    border:none;
   }
   ion-content {
     height: 100%;
@@ -57,34 +51,18 @@
     @media (min-width: 450px){
       p{
         font-size: 1.1rem;
-        line-height: 1.5rem;
+        line-height: 1.6;
       }
     }
   }
-  .col {
-    @include center-block(.5rem);
-  }
   .swiper-pagination {
     &-bullet {
-      background: rgb(100, 124, 232);
+      background: $soft-blue;
       &-active {
-        background: rgb(100, 124, 232);
+        background: $soft-blue;
       }
     }
   }
-  .button-transparent{
-    background: none !important;
-  }
-  .button-translucent{
-    background: rgba(215, 215, 215, 0.1)
-  }
-  .button-primary{
-    background: rgb(100, 124, 232) !important;
-    color:#fff;
-  }
-  .light-blue{
-    color:rgb(100, 124, 232);
-  }
 }
 
 @media (min-width: 415px){
@@ -95,19 +73,14 @@
       }
       p{
         font-size: 1.4rem;
-        line-height: 1.9rem;
+        line-height: 1.6;
-      }
-      p,h2,h3{
-        max-width: 600px !important;
-      }
-      button{
-        max-width: 400px !important;
       }
     }
   }
 }
 
 @import "terms-of-use";
+@import "onboarding-buttons";
 @import "onboard-welcome";
 @import "onboard-tour";
 @import "onboard-collect-email";