style(payment): Replace PayPal with Stripe, add new payment method logos, and improve layout.

src/app/account-app/payment-method.component.ts

@@ -22,9 +22,9 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 @Component({
     selector: 'app-payment-method',
     template: `
-<mat-card style="height: 250px">
+<mat-card>
     <div style="display: flex; justify-content: center">
-        <img mat-card-image src="{{ logo }}" alt="{{ logo_alt }}" style="margin: 10px 0; width: auto; height: 100px; cursor: pointer" (click)="clicked.emit()">
+        <img mat-card-image src="{{ logo }}" alt="{{ logo_alt }}" (click)="clicked.emit()">
     </div>
     <mat-card-content>
         <ng-content>

src/app/account-app/paypal-payment-dialog.component.ts

@@ -25,7 +25,7 @@ import { RunboxWebmailAPI } from '../rmmapi/rbwebmail';
 @Component({
     selector: 'app-paypal-payment-dialog-component',
     template: `
-<h1 mat-dialog-title>PayPal payment</h1>
+<h1 mat-dialog-title class="paymentMethodTitle">PayPal payment</h1>
   <div mat-dialog-content>
     <div *ngIf="!redirect_url">
       <div> We're preparing your Paypal payment, please wait...</div>

src/app/account-app/shopping-cart.component.html

@@ -120,48 +120,34 @@ <h2> Payment method </h2>
 
     <div class="paymentMethods">
         <app-payment-method
-            logo="/_img/pay/stripe-logo.png"
-            logo_alt="Stripe logo"
-	    disable_payment="{{total <= 0}}"
+            logo="/assets/payment/Credit_Cards_PayPal.png"
+            logo_alt="Credit card and PayPal logos"
+	        disable_payment="{{total <= 0}}"
             (clicked)="initiatePayment('stripe')"
           >
             <h4>
-                Pay with a payment card or digital wallet
+                Pay with a payment card or PayPal
             </h4>
             <p>
-                We support all major payment cards and wallets.
+                All major cards and wallets are accepted.
             </p>
         </app-payment-method>
 
         <app-payment-method
-            logo="/_img/pay/bitcoin.png"
-            logo_alt="Bitcoin logo"
-	    disable_payment="{{total <= 0}}"
+            logo="/assets/payment/Cryptocurrencies.png"
+            logo_alt="Cryptocurrency logos"
+	        disable_payment="{{total <= 0}}"
             (clicked)="initiatePayment('coinbase')"
-        >
+          >
             <h4>
                  Pay with cryptocurrencies using Coinbase
             </h4>
             <p>
-                Your transaction is secured by cryptography.
+                All major cryptocurrencies are accepted.
             </p>
         </app-payment-method>
 
-        <app-payment-method
-          logo="/_img/pay/paypal_bundle_s.png"
-          logo_alt="PayPal logo"
-	  disable_payment="{{total <= 0}}"
-	  (click)="initiatePayment('paypal')"
-          >
-          <h4>
-            Pay with a PayPal wallet or payment card
-          </h4>
-          <p>
-            Note that your subscription will not recur automatically with PayPal.
-          </p>
-        </app-payment-method>
-
-        <mat-expansion-panel style="margin: 50px 10px; text-align: center;">
+        <mat-expansion-panel [expanded]="true" id="otherPaymentMethods">
           <mat-expansion-panel-header>
             <mat-panel-title style="text-align: center"> Other payment methods </mat-panel-title>
           </mat-expansion-panel-header>

src/app/account-app/stripe-payment-dialog.component.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Card payment</h1>
+<h1 mat-dialog-title class="paymentMethodTitle">Card payment</h1>
   <div mat-dialog-content>
     <div [style.display]="state === 'initial' ? 'block' : 'none'">
       <div>

src/styles.scss

@@ -1583,7 +1583,32 @@ app-calendar-event-editor-dialog p {
     padding: 10px !important;
 }
 
+app-payment-method {
+    mat-card {
+        height: 300px;
+    }
+
+    img {
+        margin: 10px 0 20px 0 !important;
+        width: auto !important;
+        height: 125px !important;
+        cursor: pointer;
+    }
+}
+
+#otherPaymentMethods {
+    margin: 20px 0 50px 0;
+    max-width: 90%;
+    text-align: center;
+
+    mat-panel-title {
+        font-size: 20px;
+    }
+}
 
+.paymentMethodTitle {
+    font-size: 20px !important;
+}
 
 /*** Runbox components ***/