edit card, remove settings styles

hosting/locale/de/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-08-29 17:41+0530\n"
+"POT-Creation-Date: 2017-08-30 19:54+0530\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -323,9 +323,8 @@ msgid ""
 "You are not making any payment yet. After submitting your card information, "
 "you will be taken to the Confirm Order Page."
 msgstr ""
-"Es wird noch keine Bezahlung vorgenommen. Die Bezahlung wird erst "
+"Es wird noch keine Bezahlung vorgenommen. Die Bezahlung wird erst ausgelöst, "
-"ausgelöst, nachdem Du die Bestellung auf der nächsten Seite bestätigt "
+"nachdem Du die Bestellung auf der nächsten Seite bestätigt hast."
-"hast."
 
 msgid "Submit"
 msgstr "Absenden"
@@ -351,18 +350,46 @@ msgstr "Deine Kreditkartennummer"
 msgid "Reset your password"
 msgstr "Passwort zurücksetzen"
 
-msgid "My Settings"
-msgstr "Meine Einstellungen"
-
 msgid "Last"
 msgstr ""
 
 msgid "Type"
 msgstr "Kartentyp"
 
+msgid "REMOVE CARD"
+msgstr ""
+
+msgid "EDIT CARD"
+msgstr ""
+
 msgid "Add a new Card."
 msgstr ""
 
+#, fuzzy
+#| msgid ""
+#| "\n"
+#| "                                Please fill in your credit card "
+#| "information below. We are using <a\n"
+#| "                                    href=\"https://stripe.com\" target="
+#| "\"_blank\">Stripe</a> for payment and do not store\n"
+#| "                                your information in our database.\n"
+#| "                                "
+msgid ""
+"\n"
+"                                    Please fill in your credit card "
+"information below. We are using <a href=\"https://stripe.com\" target="
+"\"_blank\">Stripe</a> for payment and do not store your information in our "
+"database.\n"
+"                                    "
+msgstr ""
+"\n"
+"Bitte füll Deine Kreditkarteninformationen unten aus. Wir nutzen <a href="
+"\"https://stripe.com\" target=\"_blank\">Stripe</a> für die Bezahlung und "
+"speichern keine Informationen in unserer Datenbank."
+
+msgid "You are not making any payment here."
+msgstr ""
+
 msgid "Add your public SSH key"
 msgstr "Füge deinen öffentlichen SSH-Key hinzu"
 
@@ -519,22 +546,6 @@ msgid ""
 "We could not find the requested VM. Please                            "
 "contact Data Center Light Support."
 msgstr "Kontaktiere den Data Center Light Support."
-<<<<<<< HEAD
-
-#~ msgid ""
-#~ "\n"
-#~ "                                                You are not making any "
-#~ "payment yet. After submitting your card\n"
-#~ "                                                information, you will be "
-#~ "taken to the Confirm Order Page.\n"
-#~ "                                                "
-#~ msgstr ""
-#~ "\n"
-#~ "Es wird noch keine Bezahlung vorgenommen. Nach der Eingabe Deiner "
-#~ "Kreditkateninformationen wirst du auf die Bestellbestätigungsseite "
-#~ "weitergeleitet."
-=======
->>>>>>> master
 
 #~ msgid "Approved"
 #~ msgstr "Akzeptiert"

hosting/static/hosting/css/commons.css

@@ -290,14 +290,14 @@
   min-width: 120px;
 }
 
-.caps_link {
+.caps-link {
   font-weight: 600;
   color: #8da4c0;
   fill: #8da4c0;
   padding: 6px 0;
   display: block;
 }
-.caps_link:hover {
+.caps-link:hover {
   color: #627388;
   fill: #627388;
   text-decoration: none;
@@ -307,6 +307,19 @@
   padding-top: 15px;
 }
 
-.caps_link .un-icon {
+.caps-link .svg-img {
   margin-right: 5px;
+  height: 12px;
+  position: relative;
+  top: 1px;
+}
+
+.settings-container .caps-link {
+  font-size: 12px;
+  letter-spacing: 1.1px;
+}
+
+.settings-container .credit-card-details-opt .btn-vm-contact {
+  font-weight: 600;
+  padding: 4px 15px;
 }

hosting/templates/hosting/settings.html

@@ -27,7 +27,7 @@
                     <hr>
                     <div>
                         <div>
-                            {% if not credit_card_data.last4 %}
+                            {% if credit_card_data.last4 %}
                                 <div class="credit-card-details">
                                     <h5 class="billing-head">{% trans "Credit Card" %}</h5>
                                     <h5 class="membership-lead">{% trans "Last" %} 4: *****{{credit_card_data.last4}}</h5>
@@ -35,7 +35,7 @@
                                     <div class="credit-card-details-opt">
                                         <div class="row">
                                             <div class="col-xs-6">
-                                                <a class="caps_link" href=""><img src="{% static 'hosting/img/delete.svg' %}" class="un-icon">REMOVE CARD</a>
+                                                <a class="caps-link" href=""><img src="{% static 'hosting/img/delete.svg' %}" class="svg-img">{% trans "REMOVE CARD" %}</a>
                                             </div>
                                             <div class="col-xs-6 text-right">
                                                 <a class="btn btn-sm btn-vm-contact" href="">{% trans "EDIT CARD" %}</a>
@@ -44,10 +44,12 @@
                                     </div>
                                 </div>
                             {% else %}
-                                <h4>
+                                <h4>{% trans "Add a new Card." %}</h4>
-                                    {% trans "Add a new Card." %}<br>
+                                <p style="margin-bottom: 15px;">
-                                    {% trans "We are using Stripe for payment and store your information in our database." %}
+                                    {% blocktrans %}
-                                </h4>
+                                    Please fill in your credit card information below. We are using <a href="https://stripe.com" target="_blank">Stripe</a> for payment and do not store your information in our database.
+                                    {% endblocktrans %}
+                                </p>
                                 <form action="" id="payment-form-new" class="credit-card-form" method="POST">
                                     <input type="hidden" name="token"/>
                                     <div class="credit-card-goup">