From 04da844b2248f50c783c2207e5223594f9a542b4 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Fri, 28 Jul 2017 21:13:03 -0400
Subject: [PATCH] radio styling

---
 .../settingsBillingChangePaymentController.js |  8 +++++
 .../views/settingsBillingChangePayment.html   |  8 ++---
 src/app/settings/views/settingsPremium.html   |  8 ++---
 src/less/vault.less                           | 36 ++++++++++++++++++-
 4 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/app/settings/settingsBillingChangePaymentController.js b/src/app/settings/settingsBillingChangePaymentController.js
index 2afce9ac4fe..bd1d3cf5315 100644
--- a/src/app/settings/settingsBillingChangePaymentController.js
+++ b/src/app/settings/settingsBillingChangePaymentController.js
@@ -45,11 +45,17 @@
 
         $scope.submit = function () {
             $scope.submitPromise = getPaymentToken($scope.card).then(function (token) {
+                if (!token) {
+                    throw 'No payment token.';
+                }
+
                 var request = {
                     paymentToken: token
                 };
 
                 return apiService.accounts.putPayment(null, request).$promise;
+            }, function (err) {
+                throw err;
             }).then(function (response) {
                 $scope.card = null;
                 if (existingPaymentMethod) {
@@ -73,6 +79,8 @@
             if ($scope.paymentMethod === 'paypal') {
                 return btInstance.requestPaymentMethod().then(function (payload) {
                     return payload.nonce;
+                }).catch(function (err) {
+                    throw err.message;
                 });
             }
             else {
diff --git a/src/app/settings/views/settingsBillingChangePayment.html b/src/app/settings/views/settingsBillingChangePayment.html
index e12e0c772bc..c2c907ef51b 100644
--- a/src/app/settings/views/settingsBillingChangePayment.html
+++ b/src/app/settings/views/settingsBillingChangePayment.html
@@ -14,13 +14,13 @@
             </ul>
         </div>
         <div ng-if="showPaymentOptions">
-            <label class="radio-inline">
+            <label class="radio-inline radio-boxed">
                 <input type="radio" name="PaymentMethod" value="card" ng-model="paymentMethod"
-                       ng-change="changePaymentMethod('card')"> Credit Card
+                       ng-change="changePaymentMethod('card')"><i class="fa fa-fw fa-credit-card"></i> Credit Card
             </label>
-            <label class="radio-inline">
+            <label class="radio-inline radio-boxed">
                 <input type="radio" name="PaymentMethod" value="paypal" ng-model="paymentMethod"
-                       ng-change="changePaymentMethod('paypal')"> PayPal
+                       ng-change="changePaymentMethod('paypal')"><i class="fa fa-fw fa-paypal"></i> PayPal
             </label>
             <hr />
         </div>
diff --git a/src/app/settings/views/settingsPremium.html b/src/app/settings/views/settingsPremium.html
index f9496c4e987..522c844b7c2 100644
--- a/src/app/settings/views/settingsPremium.html
+++ b/src/app/settings/views/settingsPremium.html
@@ -89,13 +89,13 @@
                 <h3 class="box-title">Payment Information</h3>
             </div>
             <div class="box-body">
-                <label class="radio-inline">
+                <label class="radio-inline radio-lg radio-boxed">
                     <input type="radio" name="PaymentMethod" value="card" ng-model="paymentMethod"
-                           ng-change="changePaymentMethod()"> Credit Card
+                           ng-change="changePaymentMethod()"><i class="fa fa-fw fa-credit-card"></i> Credit Card
                 </label>
-                <label class="radio-inline">
+                <label class="radio-inline radio-lg radio-boxed">
                     <input type="radio" name="PaymentMethod" value="paypal" ng-model="paymentMethod"
-                           ng-change="changePaymentMethod()"> PayPal
+                           ng-change="changePaymentMethod()"><i class="fa fa-fw fa-paypal"></i> PayPal
                 </label>
                 <hr />
                 <div ng-if="paymentMethod === 'paypal'">
diff --git a/src/less/vault.less b/src/less/vault.less
index d78353ebc12..d298d242308 100644
--- a/src/less/vault.less
+++ b/src/less/vault.less
@@ -332,6 +332,26 @@ form .btn .loading-icon {
     }
 }
 
+.radio-boxed {
+    border: 1px solid @table-border-color;
+    border-radius: 3px;
+    padding: 10px 10px 10px 30px;
+
+    @media (min-width: @screen-xs) {
+        padding: 10px 20px 10px 30px;
+
+        + .radio-lg {
+            margin-left: 20px;
+        }
+    }
+}
+
+.radio-lg {
+    @media (min-width: @screen-xs) {
+        font-size: @font-size-large;
+    }
+}
+
 /* Modals */
 
 .modal-footer {
@@ -620,10 +640,24 @@ h1, h2, h3, h4, h5, h6 {
     }
 }
 
-.braintree-placeholder {
+.braintree-placeholder, .braintree-sheet__header {
     display: none;
 }
 
+.braintree-sheet__content--button {
+    text-align: left;
+    padding: 0;
+    min-height: 0;
+}
+
+.braintree-sheet__container {
+    margin-bottom: 0;
+}
+
+.braintree-sheet {
+    border: none;
+}
+
 .clickable {
     cursor: pointer;
 }