payments ui fixes

pages/_data/payments.yml

-- name: "2checkout Dark"
-  payment: "2checkout-dark"
 - name: "2checkout"
-  payment: "2checkout"
-- name: "Alipay Dark"
-  payment: "alipay-dark"
+  logo: "2checkout"
 - name: "Alipay"
-  payment: "alipay"
-- name: "Amazon Dark"
-  payment: "amazon-dark"
+  logo: "alipay"
 - name: "Amazon"
-  payment: "amazon"
-- name: "Americanexpress Dark"
-  payment: "americanexpress-dark"
+  logo: "amazon"
 - name: "Americanexpress"
-  payment: "americanexpress"
-- name: "Applepay Dark"
-  payment: "applepay-dark"
+  logo: "americanexpress"
 - name: "Applepay"
-  payment: "applepay"
-- name: "Bancontact Dark"
-  payment: "bancontact-dark"
+  logo: "applepay"
 - name: "Bancontact"
-  payment: "bancontact"
-- name: "Bitcoin Dark"
-  payment: "bitcoin-dark"
+  logo: "bancontact"
 - name: "Bitcoin"
-  payment: "bitcoin"
-- name: "Bitpay Dark"
-  payment: "bitpay-dark"
+  logo: "bitcoin"
 - name: "Bitpay"
-  payment: "bitpay"
-- name: "Blik Dark"
-  payment: "blik-dark"
+  logo: "bitpay"
 - name: "Blik"
-  payment: "blik"
-- name: "Cirrus Dark"
-  payment: "cirrus-dark"
+  logo: "blik"
 - name: "Cirrus"
-  payment: "cirrus"
-- name: "Clickandbuy Dark"
-  payment: "clickandbuy-dark"
+  logo: "cirrus"
 - name: "Clickandbuy"
-  payment: "clickandbuy"
-- name: "Coinkite Dark"
-  payment: "coinkite-dark"
+  logo: "clickandbuy"
 - name: "Coinkite"
-  payment: "coinkite"
-- name: "Dinersclub Dark"
-  payment: "dinersclub-dark"
+  logo: "coinkite"
 - name: "Dinersclub"
-  payment: "dinersclub"
-- name: "Directdebit Dark"
-  payment: "directdebit-dark"
+  logo: "dinersclub"
 - name: "Directdebit"
-  payment: "directdebit"
-- name: "Discover Dark"
-  payment: "discover-dark"
+  logo: "directdebit"
 - name: "Discover"
-  payment: "discover"
-- name: "Dotpay Dark"
-  payment: "dotpay-dark"
+  logo: "discover"
 - name: "Dotpay"
-  payment: "dotpay"
-- name: "Dwolla Dark"
-  payment: "dwolla-dark"
+  logo: "dotpay"
 - name: "Dwolla"
-  payment: "dwolla"
-- name: "Ebay Dark"
-  payment: "ebay-dark"
+  logo: "dwolla"
 - name: "Ebay"
-  payment: "ebay"
-- name: "Eway Dark"
-  payment: "eway-dark"
+  logo: "ebay"
 - name: "Eway"
-  payment: "eway"
-- name: "Giropay Dark"
-  payment: "giropay-dark"
+  logo: "eway"
 - name: "Giropay"
-  payment: "giropay"
-- name: "Googlewallet Dark"
-  payment: "googlewallet-dark"
+  logo: "giropay"
 - name: "Googlewallet"
-  payment: "googlewallet"
-- name: "Ingenico Dark"
-  payment: "ingenico-dark"
+  logo: "googlewallet"
 - name: "Ingenico"
-  payment: "ingenico"
-- name: "Jcb Dark"
-  payment: "jcb-dark"
+  logo: "ingenico"
 - name: "Jcb"
-  payment: "jcb"
-- name: "Klarna Dark"
-  payment: "klarna-dark"
+  logo: "jcb"
 - name: "Klarna"
-  payment: "klarna"
-- name: "Laser Dark"
-  payment: "laser-dark"
+  logo: "klarna"
 - name: "Laser"
-  payment: "laser"
-- name: "Maestro Dark"
-  payment: "maestro-dark"
+  logo: "laser"
 - name: "Maestro"
-  payment: "maestro"
-- name: "Mastercard Dark"
-  payment: "mastercard-dark"
+  logo: "maestro"
 - name: "Mastercard"
-  payment: "mastercard"
-- name: "Monero Dark"
-  payment: "monero-dark"
+  logo: "mastercard"
 - name: "Monero"
-  payment: "monero"
-- name: "Neteller Dark"
-  payment: "neteller-dark"
+  logo: "monero"
 - name: "Neteller"
-  payment: "neteller"
-- name: "Ogone Dark"
-  payment: "ogone-dark"
+  logo: "neteller"
 - name: "Ogone"
-  payment: "ogone"
-- name: "Okpay Dark"
-  payment: "okpay-dark"
+  logo: "ogone"
 - name: "Okpay"
-  payment: "okpay"
-- name: "Paybox Dark"
-  payment: "paybox-dark"
+  logo: "okpay"
 - name: "Paybox"
-  payment: "paybox"
-- name: "Paymill Dark"
-  payment: "paymill-dark"
+  logo: "paybox"
 - name: "Paymill"
-  payment: "paymill"
-- name: "Payone Dark"
-  payment: "payone-dark"
+  logo: "paymill"
 - name: "Payone"
-  payment: "payone"
-- name: "Payoneer Dark"
-  payment: "payoneer-dark"
+  logo: "payone"
 - name: "Payoneer"
-  payment: "payoneer"
-- name: "Paypal Dark"
-  payment: "paypal-dark"
+  logo: "payoneer"
 - name: "Paypal"
-  payment: "paypal"
-- name: "Paysafecard Dark"
-  payment: "paysafecard-dark"
+  logo: "paypal"
 - name: "Paysafecard"
-  payment: "paysafecard"
-- name: "Payu Dark"
-  payment: "payu-dark"
+  logo: "paysafecard"
 - name: "Payu"
-  payment: "payu"
-- name: "Payza Dark"
-  payment: "payza-dark"
+  logo: "payu"
 - name: "Payza"
-  payment: "payza"
-- name: "Przelewy24 Dark"
-  payment: "przelewy24-dark"
+  logo: "payza"
 - name: "Przelewy24"
-  payment: "przelewy24"
-- name: "Ripple Dark"
-  payment: "ripple-dark"
+  logo: "przelewy24"
 - name: "Ripple"
-  payment: "ripple"
-- name: "Sage Dark"
-  payment: "sage-dark"
+  logo: "ripple"
 - name: "Sage"
-  payment: "sage"
-- name: "Sepa Dark"
-  payment: "sepa-dark"
+  logo: "sage"
 - name: "Sepa"
-  payment: "sepa"
-- name: "Shopify Dark"
-  payment: "shopify-dark"
+  logo: "sepa"
 - name: "Shopify"
-  payment: "shopify"
-- name: "Skrill Dark"
-  payment: "skrill-dark"
+  logo: "shopify"
 - name: "Skrill"
-  payment: "skrill"
-- name: "Solo Dark"
-  payment: "solo-dark"
+  logo: "skrill"
 - name: "Solo"
-  payment: "solo"
-- name: "Square Dark"
-  payment: "square-dark"
+  logo: "solo"
 - name: "Square"
-  payment: "square"
-- name: "Stripe Dark"
-  payment: "stripe-dark"
+  logo: "square"
 - name: "Stripe"
-  payment: "stripe"
-- name: "Switch Dark"
-  payment: "switch-dark"
+  logo: "stripe"
 - name: "Switch"
-  payment: "switch"
-- name: "Tpay Dark"
-  payment: "tpay-dark"
+  logo: "switch"
 - name: "Tpay"
-  payment: "tpay"
-- name: "Ukash Dark"
-  payment: "ukash-dark"
+  logo: "tpay"
 - name: "Ukash"
-  payment: "ukash"
-- name: "Unionpay Dark"
-  payment: "unionpay-dark"
+  logo: "ukash"
 - name: "Unionpay"
-  payment: "unionpay"
-- name: "Verifone Dark"
-  payment: "verifone-dark"
+  logo: "unionpay"
 - name: "Verifone"
-  payment: "verifone"
-- name: "Verisign Dark"
-  payment: "verisign-dark"
+  logo: "verifone"
 - name: "Verisign"
-  payment: "verisign"
-- name: "Visa Dark"
-  payment: "visa-dark"
+  logo: "verisign"
 - name: "Visa"
-  payment: "visa"
-- name: "Webmoney Dark"
-  payment: "webmoney-dark"
+  logo: "visa"
 - name: "Webmoney"
-  payment: "webmoney"
-- name: "Westernunion Dark"
-  payment: "westernunion-dark"
+  logo: "webmoney"
 - name: "Westernunion"
-  payment: "westernunion"
-- name: "Worldpay Dark"
-  payment: "worldpay-dark"
+  logo: "westernunion"
 - name: "Worldpay"
-  payment: "worldpay"
\ No newline at end of file
+  logo: "worldpay"

pages/_docs/payments.md

@@ -8,9 +8,9 @@ done: true
 ### Payment
 
 {% example %}
-{% include ui/payment.html payment="shopify"%}
-{% include ui/payment.html%}
-{% include ui/payment.html payment="paypal"%}
+{% include ui/payment.html class="mr-3" payment="shopify"%}
+{% include ui/payment.html class="mr-3" payment="visa" %}
+{% include ui/payment.html class="mr-3" payment="paypal"%}
 {% endexample %}
 
 ### Payment sizes
@@ -18,20 +18,21 @@ done: true
 Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up to different sizes based on what’s needed.
 
 {% example %}
-{% include ui/payment.html payment="shopify" size="xl"%}
-{% include ui/payment.html size="lg"%}
-{% include ui/payment.html payment="paypal" size="md"%}
-{% include ui/payment.html payment="amazon"%}
+{% include ui/payment.html class="mr-3" payment="shopify" size="xl" %}
+{% include ui/payment.html class="mr-3" payment="visa" size="lg" %}
+{% include ui/payment.html class="mr-3" payment="paypal" size="md" %}
+{% include ui/payment.html class="mr-3" payment="amazon" size="sm" %}
 {% endexample %}
 
 ### Types
 
-<table>
+<table class="table-vcenter">
 {% for payment in site.data.payments %}
-    <tr>
-    <td>{% include ui/payment.html payment=payment.payment %}</td>
-    <td><code>{{ payment.payment }}</code></td>
+<tr>
     <td>{{ payment.name }}</td>
-    </tr>
+    <td><code>{{ payment.logo }}</code></td>
+    <td class="w-1p">{% include ui/payment.html payment=payment.logo %}</td>
+    <td class="w-1p">{% include ui/payment.html payment=payment.logo dark=true %}</td>
+</tr>
 {% endfor %}
 </table>

pages/_includes/ui/payment.html

-<span class="payment{% if include['size'] %} payment-{{ include.size }}{% endif %} payment-provider-{{ include.payment | default: 'visa'}}{% if include.class %} {{ include.class }}{% endif %}"></span>
+<span class="payment{% if include['size'] %} payment-{{ include.size }}{% endif %} payment-provider-{{ include.payment | default: 'visa'}}{% if include.dark %}-dark{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></span>