feat(coinbase): clearer expectations on coinbase integration onboarding

This commit is contained in:
Jason Dreyzehner 2017-02-01 15:24:02 -05:00
commit c9802c1a0a
2 changed files with 16 additions and 12 deletions

View file

@ -11,31 +11,34 @@
text-align: center; text-align: center;
&-logo { &-logo {
display: inline-block; display: inline-block;
margin-bottom: 1em;
img { img {
max-width: 170px; max-width: 170px;
} }
} }
&-heading {
font-size: 20px;
margin: 1rem;
}
&-description { &-description {
margin-top: 0; margin-top: 0;
margin-left: 2rem; margin-left: 2rem;
margin-right: 2rem; margin-right: 2rem;
margin-bottom: 100px; margin-bottom: 130px;
opacity: .6; opacity: .6;
max-width: 300px; max-width: 300px;
} }
&-support-link {
cursor: pointer;
}
&-cta, &-oauthform { &-cta, &-oauthform {
position: absolute; position: absolute;
bottom: 5vh; bottom: 5vh;
width: 100%; width: 100%;
max-width: 350px;
} }
&-oauthform { &-oauthform {
.item {
border: 0 none;
}
.item-floating-label {
padding-left: 0;
margin-left: 1em;
margin-right: 1em;
}
input { input {
border-bottom: 2px solid $light-gray; border-bottom: 2px solid $light-gray;
} }

View file

@ -15,11 +15,11 @@
<div class="integration-onboarding-logo"> <div class="integration-onboarding-logo">
<img src="img/coinbase-logo.png"> <img src="img/coinbase-logo.png">
</div> </div>
<div class="integration-onboarding-heading" translate>Connect a Coinbase Account</div> <div class="integration-onboarding-description" ng-hide="showOauthForm" translate>Coinbase's service is available in 33 countries, and can take 3-5 days to buy or sell bitcoin.</div>
<div class="integration-onboarding-description" translate>If you have trouble with the Coinbase service, please <a class="integration-onboarding-support-link" ng-click="coinbase.openSupportWindow()">contact Coinbase support</a> for direct assistance.</div> <div class="integration-onboarding-description" ng-show="showOauthForm" translate>If you have trouble, contact Coinbase support for direct assistance.</div>
<div class="integration-onboarding-cta" ng-show="!showOauthForm"> <div class="integration-onboarding-cta" ng-show="!showOauthForm">
<button class="button button-standard button-primary" ng-click="coinbase.openAuthenticateWindow()" translate>Connect to Coinbase</button> <button class="button button-standard button-primary" ng-click="coinbase.openAuthenticateWindow()" translate>Connect Coinbase Account</button>
<button class="button button-standard button-secondary" ng-click="coinbase.openSignupWindow()" translate>Create an Account</button> <button class="button button-standard button-secondary" ng-click="coinbase.openSignupWindow()" translate>Sign Up for Coinbase</button>
</div> </div>
<div ng-show="showOauthForm" class="integration-onboarding-oauthform"> <div ng-show="showOauthForm" class="integration-onboarding-oauthform">
@ -35,6 +35,7 @@
<input <input
class="button button-standard button-primary" class="button button-standard button-primary"
type="submit" value="Connect Coinbase Account" ng-disabled="oauthCodeForm.$invalid"> type="submit" value="Connect Coinbase Account" ng-disabled="oauthCodeForm.$invalid">
<button type="button" class="button button-standard button-secondary" ng-click="coinbase.openSignupWindow()" translate>Coinbase Support &rarr;</button>
</form> </form>
</div> </div>
</div> </div>