From 8524d3f401052fc0828434548f51b287c9f88116 Mon Sep 17 00:00:00 2001
From: Hillel Coren <hillelcoren@gmail.com>
Date: Wed, 29 Nov 2017 21:12:08 +0200
Subject: [PATCH] Improve payment page styling

---
 .../views/payments/credit_card.blade.php      | 232 +++++++++---------
 .../views/payments/payment_css.blade.php      |  13 +
 2 files changed, 133 insertions(+), 112 deletions(-)

diff --git a/resources/views/payments/credit_card.blade.php b/resources/views/payments/credit_card.blade.php
index 442f0c4f83ef..f850b8b8d969 100644
--- a/resources/views/payments/credit_card.blade.php
+++ b/resources/views/payments/credit_card.blade.php
@@ -160,78 +160,82 @@
     @endif
 
     <h3>{{ trans('texts.contact_information') }}</h3>
-    <div class="row">
-        <div class="col-md-6">
-            {!! Former::text('first_name')
-                    ->placeholder(trans('texts.first_name'))
-                    ->label('') !!}
+    <hr class="form-legend"/>
+
+    <div style="padding-bottom: 22px;">
+        <div class="row">
+            <div class="col-md-6">
+                {!! Former::text('first_name')
+                        ->placeholder(trans('texts.first_name'))
+                        ->label('') !!}
+            </div>
+            <div class="col-md-6">
+                {!! Former::text('last_name')
+                        ->placeholder(trans('texts.last_name'))
+                        ->autocomplete('family-name')
+                        ->label('') !!}
+            </div>
         </div>
-        <div class="col-md-6">
-            {!! Former::text('last_name')
-                    ->placeholder(trans('texts.last_name'))
-                    ->autocomplete('family-name')
-                    ->label('') !!}
+
+        <div class="row" style="display:{{ isset($paymentTitle) || empty($contact->email) ? 'block' : 'none' }}">
+            <div class="col-md-12">
+                {!! Former::text('email')
+                        ->placeholder(trans('texts.email'))
+                        ->autocomplete('email')
+                        ->label('') !!}
+            </div>
         </div>
     </div>
 
-    <div class="row" style="display:{{ isset($paymentTitle) || empty($contact->email) ? 'block' : 'none' }}">
-        <div class="col-md-12">
-            {!! Former::text('email')
-                    ->placeholder(trans('texts.email'))
-                    ->autocomplete('email')
-                    ->label('') !!}
-        </div>
-    </div>
-
-    <p>&nbsp;<br/>&nbsp;</p>
-
     @if (!empty($accountGateway->show_address))
         <h3>{{ trans('texts.billing_address') }} &nbsp;&nbsp; <span class="help">{{ trans('texts.payment_footer1') }}</span></h3>
-        <div class="row">
-            <div class="col-md-6">
-                {!! Former::text('address1')
-                        ->autocomplete('address-line1')
-                        ->placeholder(trans('texts.address1'))
-                        ->label('') !!}
-            </div>
-            <div class="col-md-6">
-                {!! Former::text('address2')
-                        ->autocomplete('address-line2')
-                        ->placeholder(trans('texts.address2'))
-                        ->label('') !!}
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-6">
-                {!! Former::text('city')
-                        ->autocomplete('address-level2')
-                        ->placeholder(trans('texts.city'))
-                        ->label('') !!}
-            </div>
-            <div class="col-md-6">
-                {!! Former::text('state')
-                        ->autocomplete('address-level1')
-                        ->placeholder(trans('texts.state'))
-                        ->label('') !!}
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-6">
-                {!! Former::text('postal_code')
-                        ->autocomplete('postal-code')
-                        ->placeholder(trans('texts.postal_code'))
-                        ->label('') !!}
-            </div>
-            <div class="col-md-6">
-                {!! Former::select('country_id')
-                        ->placeholder(trans('texts.country_id'))
-                        ->fromQuery($countries, 'name', 'id')
-                        ->addGroupClass('country-select')
-                        ->label('') !!}
-            </div>
-        </div>
+        <hr class="form-legend"/>
 
-        <p>&nbsp;<br/>&nbsp;</p>
+        <div style="padding-bottom: 22px;">
+            <div class="row">
+                <div class="col-md-6">
+                    {!! Former::text('address1')
+                            ->autocomplete('address-line1')
+                            ->placeholder(trans('texts.address1'))
+                            ->label('') !!}
+                </div>
+                <div class="col-md-6">
+                    {!! Former::text('address2')
+                            ->autocomplete('address-line2')
+                            ->placeholder(trans('texts.address2'))
+                            ->label('') !!}
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-6">
+                    {!! Former::text('city')
+                            ->autocomplete('address-level2')
+                            ->placeholder(trans('texts.city'))
+                            ->label('') !!}
+                </div>
+                <div class="col-md-6">
+                    {!! Former::text('state')
+                            ->autocomplete('address-level1')
+                            ->placeholder(trans('texts.state'))
+                            ->label('') !!}
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-6">
+                    {!! Former::text('postal_code')
+                            ->autocomplete('postal-code')
+                            ->placeholder(trans('texts.postal_code'))
+                            ->label('') !!}
+                </div>
+                <div class="col-md-6">
+                    {!! Former::select('country_id')
+                            ->placeholder(trans('texts.country_id'))
+                            ->fromQuery($countries, 'name', 'id')
+                            ->addGroupClass('country-select')
+                            ->label('') !!}
+                </div>
+            </div>
+        </div>
     @endif
 
     @if (!empty($accountGateway->show_shipping_address))
@@ -245,59 +249,60 @@
                 </span>
             @endif
         </h3>
-        <div class="row">
-            <div class="col-md-6">
-                {!! Former::text('shipping_address1')
-                        ->autocomplete('shipping address-line1')
-                        ->placeholder(trans('texts.address1'))
-                        ->label('') !!}
-            </div>
-            <div class="col-md-6">
-                {!! Former::text('shipping_address2')
-                        ->autocomplete('shipping address-line2')
-                        ->placeholder(trans('texts.address2'))
-                        ->label('') !!}
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-6">
-                {!! Former::text('shipping_city')
-                        ->autocomplete('shipping address-level2')
-                        ->placeholder(trans('texts.city'))
-                        ->label('') !!}
-            </div>
-            <div class="col-md-6">
-                {!! Former::text('shipping_state')
-                        ->autocomplete('shipping address-level1')
-                        ->placeholder(trans('texts.state'))
-                        ->label('') !!}
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-6">
-                {!! Former::text('shipping_postal_code')
-                        ->autocomplete('shipping postal-code')
-                        ->placeholder(trans('texts.postal_code'))
-                        ->label('') !!}
-            </div>
-            <div class="col-md-6">
-                {!! Former::select('shipping_country_id')
-                        ->placeholder(trans('texts.country_id'))
-                        ->fromQuery($countries, 'name', 'id')
-                        ->addGroupClass('shipping-country-select')
-                        ->label('') !!}
-            </div>
-        </div>
+        <hr class="form-legend"/>
 
-        <p>&nbsp;<br/>&nbsp;</p>
+        <div style="padding-bottom: 22px;">
+            <div class="row">
+                <div class="col-md-6">
+                    {!! Former::text('shipping_address1')
+                            ->autocomplete('shipping address-line1')
+                            ->placeholder(trans('texts.address1'))
+                            ->label('') !!}
+                </div>
+                <div class="col-md-6">
+                    {!! Former::text('shipping_address2')
+                            ->autocomplete('shipping address-line2')
+                            ->placeholder(trans('texts.address2'))
+                            ->label('') !!}
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-6">
+                    {!! Former::text('shipping_city')
+                            ->autocomplete('shipping address-level2')
+                            ->placeholder(trans('texts.city'))
+                            ->label('') !!}
+                </div>
+                <div class="col-md-6">
+                    {!! Former::text('shipping_state')
+                            ->autocomplete('shipping address-level1')
+                            ->placeholder(trans('texts.state'))
+                            ->label('') !!}
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-6">
+                    {!! Former::text('shipping_postal_code')
+                            ->autocomplete('shipping postal-code')
+                            ->placeholder(trans('texts.postal_code'))
+                            ->label('') !!}
+                </div>
+                <div class="col-md-6">
+                    {!! Former::select('shipping_country_id')
+                            ->placeholder(trans('texts.country_id'))
+                            ->fromQuery($countries, 'name', 'id')
+                            ->addGroupClass('shipping-country-select')
+                            ->label('') !!}
+                </div>
+            </div>
+        </div>
     @endif
 
     @if ($accountGateway->isGateway(GATEWAY_WEPAY) && $account->token_billing_type_id == TOKEN_BILLING_DISABLED)
         {{--- do nothing ---}}
     @else
         <div class="row">
-            <div class="col-lg-{{ ($accountGateway->gateway_id == GATEWAY_BRAINTREE) ? 12 : 8 }}">
-
+            <div class="col-lg-12">
                 <h3>
                     {{ trans('texts.billing_method') }}
                     @if (isset($acceptedCreditCardTypes))
@@ -308,6 +313,9 @@
                     @endif
                     <br/>
                 </h3>
+                <hr class="form-legend"/>
+            </div>
+            <div class="col-lg-{{ ($accountGateway->gateway_id == GATEWAY_BRAINTREE) ? 12 : 8 }}">
 
                 <div class="row">
                     <div class="col-md-12">
@@ -393,7 +401,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-lg-4">
+            <div class="col-lg-4" style="padding-top: 12px; padding-left: 0px;">
                 <div class='card-wrapper'></div>
             </div>
         </div>
diff --git a/resources/views/payments/payment_css.blade.php b/resources/views/payments/payment_css.blade.php
index 1c04c78c1f2d..132b3045e6e0 100644
--- a/resources/views/payments/payment_css.blade.php
+++ b/resources/views/payments/payment_css.blade.php
@@ -72,6 +72,11 @@ header {
     margin: 0px !important
 }
 
+hr.form-legend {
+    margin-bottom: 4px;
+    margin-top: 12px;
+}
+
 @media screen and (min-width: 700px) {
     header {
         margin: 20px 0 75px;
@@ -85,6 +90,14 @@ header {
 
 }
 
+@media screen and (min-width: 1140px) {
+    .panel-body {
+        padding-left: 180px;
+        padding-right: 180px;
+    }
+
+}
+
 h2 {
     font-weight: 300;
     font-size: 30px;