style(payment): Add cryptocurrency logos.

Author: gtandersen

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

@@ -121,7 +121,7 @@ <h2> Payment method </h2>
     <div class="paymentMethods">
         <app-payment-method
             logo="/assets/payment/Credit_Cards_PayPal.png"
-            logo_alt="Stripe logo"
+            logo_alt="Credit card and PayPal logos"
 	        disable_payment="{{total <= 0}}"
             (clicked)="initiatePayment('stripe')"
           >
@@ -134,8 +134,8 @@ <h4>
         </app-payment-method>
 
         <app-payment-method
-            logo="/assets/payment/bitcoin.png"
-            logo_alt="Bitcoin logo"
+            logo="/assets/payment/Cryptocurrencies.png"
+            logo_alt="Cryptocurrency logos"
 	        disable_payment="{{total <= 0}}"
             (clicked)="initiatePayment('coinbase')"
           >

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/assets/payment/Cryptocurrencies.png

@@ -1583,6 +1583,19 @@ 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%;
@@ -1593,6 +1606,10 @@ app-calendar-event-editor-dialog p {
     }
 }
 
+.paymentMethodTitle {
+    font-size: 20px !important;
+}
+
 /*** Runbox components ***/
 
 .dev.runbox-components .nice_green_timer {