Small style adjustments

www/assets/css/app.css

@@ -171,3 +171,13 @@ Framework7 and FontAwesome both have a .fab class
     top: 0;
     padding: 10px;
 }
+
+#noticeslip-pay-popup {
+    background: var(--f7-page-bg-color);
+}
+
+#noticeslip-pay-popup #noticeslip-stripe-elements {
+    background-color: white;
+    padding: 1em;
+    border-radius: 10px;
+}

www/index.html

@@ -4,7 +4,7 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <title>Loading...</title>
 <meta charset="UTF-8">
-<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
+<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover, user-scalable=no">
 <link rel="icon" href="assets/images/icons/logo.svg" />
 <link rel="manifest" href="manifest.json">
 <link rel="stylesheet" href="node_modules/framework7/css/framework7.bundle.min.css" />

www/pages/noticeslip.html

@@ -126,7 +126,7 @@
         </div>
     </div>
 
-    <div class="popup text-color-black" id="noticeslip-pay-popup">
+    <div class="popup" id="noticeslip-pay-popup">
         <div class="block text-align-center">
             <h2>Finish and pay</h2>
             <h3>Total: $<span id="noticeslip-pay-amount"></span></h3>
@@ -134,6 +134,8 @@
                 <i class="fas fa-spin fa-spinner"></i> Loading secure card form...
             </div>
             <div id="noticeslip-card-errors" style="text-color-red"></div>
+            <br />
+            <br />
             <div class="button" onclick="submitNoticeSlip()"><i class="far fa-arrow-right"></i> Pay and Submit</div>
             <p><a class="button popup-close" href="#">Cancel</a></p>
         </div>