[FIX] pos_online_payment: payment popup display

Since the use of Bootstrap, the online payment popup is no longer correctly displayed.

Steps to reproduce:
 - Configure an online payment method for a shop
 - Open a session for that shop
 - Make an order
 - Select the configured online payment method in the payment screen
 - Click on "Validate" button

The online payment popup is displayed.

The fix consists of adding back the display of this popup as it was before the Bootstrap use.

closes odoo/odoo#132002

Task-id: 3468071
Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>

addons/pos_online_payment/static/src/app/utils/online_payment_popup/online_payment_popup.xml

@@ -16,8 +16,8 @@
                     <div><span>Order id: </span><span t-esc="props.order.server_id"/></div>
                 </div>
             </main>
-            <footer class="footer footer-flex">
-                <div class="button cancel" style="background-color: #F3BBBB; color: rgb(168, 89, 89);" t-on-click="cancel">Cancel</div>
+            <footer class="footer modal-footer">
+                <div class="button cancel btn btn-lg" t-on-click="cancel">Cancel</div>
             </footer>
         </div>
     </t>

addons/pos_online_payment/static/src/css/popups/online_payment_popup.css

@@ -1,9 +1,19 @@
+.pos .online-payment-popup .body {
+    padding: 1rem;
+}
+
 .pos .online-payment-popup .title {
     font-weight: bold;
+    font-size: 1.1rem;
+    padding-top: .3rem;
+    padding-bottom: 1rem;
+    border-bottom: solid 1px rgba(60, 60, 60, 0.1);
 }
 
 .pos .online-payment-popup .instructions p {
+    padding-top: 1rem;
     margin-bottom: 0;
+    font-size: 1rem;
 }
 
 .pos .online-payment-popup .instructions .qr-code {
@@ -17,8 +27,11 @@
     padding-top: .6rem;
     justify-content: left;
     text-align: left;
+    font-size: 1rem;
 }
 
 .pos .online-payment-popup .footer .button {
     margin: auto;
+    background-color: #F3BBBB;
+    color: rgb(168, 89, 89);
 }