Add some styles and do not let user remove card if he has only one

datacenterlight/static/datacenterlight/css/common.css

@@ -171,4 +171,12 @@ footer .dcl-link-separator::before {
 .credit-card-info .align-bottom {
     align-self: flex-end;
     padding-right: 0 !important;
+}
+
+.new-card-head {
+    margin-top: 10px;
+}
+.new-card-button-margin button{
+    margin-top: 5px;
+    margin-bottom: 5px;
 }

datacenterlight/templates/datacenterlight/landing_payment.html

@@ -130,7 +130,7 @@
                                         <div class="col-xs-6">
                                             <h4>{% trans "Add a new credit card" %}</h4>
                                         </div>
-                                        <div class="col-xs-6 text-right">
+                                        <div class="col-xs-6 text-right new-card-button-margin">
                                             <button data-toggle="collapse" data-target="#newcard" class="btn choice-btn">
                                                 <span class="fa fa-plus"></span>&nbsp;&nbsp;{% trans "NEW CARD" %}
                                             </button>

hosting/static/hosting/css/commons.css

@@ -431,3 +431,12 @@
   margin-top: 10px;
   margin-bottom: 10px;
 }
+
+
+.new-card-head {
+    margin-top: 10px;
+}
+.new-card-button-margin button{
+    margin-top: 5px;
+    margin-bottom: 5px;
+}

hosting/templates/hosting/settings.html

@@ -31,6 +31,7 @@
                     <h3>{%trans "Credit Card" %}</h3>
                     <hr>
                     <div>
+                        {% with card_list_len=cards_list|length %}
                         {% for card in cards_list %}
                             <div class="credit-card-details">
                                 <h5 class="billing-head">{% trans "Credit Card" %}</h5>
@@ -38,6 +39,7 @@
                                 <h5 class="membership-lead">{% trans "Type" %}: {{card.brand}}</h5>
                                 <div class="credit-card-details-opt">
                                     <div class="row">
+                                        {% if card_list_len > 1 %}
                                         <div class="col-xs-6">
                                             <a class="caps-link" href="" data-toggle="modal" data-target="#Modal{{ card.id }}"><img src="{% static 'hosting/img/delete.svg' %}" class="svg-img">{% trans "REMOVE CARD" %}</a>
                                             <div class="modal fade" id="Modal{{card.id }}" tabindex="-1" role="dialog">
@@ -63,6 +65,7 @@
                                                 </div>
                                             </div>
                                         </div>
+                                        {% endif %}
                                         <div class="col-xs-6 text-right">
                                             {% if card.preferred %}
                                             {% trans "DEFAULT" %}
@@ -83,6 +86,7 @@
                                 <p>{% blocktrans %}We are using <a href="https://stripe.com">Stripe</a> for payment and do not store your information in our database.{% endblocktrans %}</p>
                             </div>
                         {% endfor %}
+                        {% endwith %}
 
                         <div class="new-card-head">
                             <div class="row">