Bug 1469464 - PaymentRequest footer styling. r=sfoster

MozReview-Commit-ID: BbuIitPlUpQ

--HG--
extra : rebase_source : bf7bb73ecbb0699618f7e5f7068e37facb3ca322

browser/components/payments/res/containers/address-form.css

@@ -73,3 +73,14 @@ body[dir=rtl] .error-text::before {
 :-moz-any(input, textarea, select):valid + .error-text {
   display: none;
 }
+
+address-form > footer > .cancel-button {
+  /* When cancel is shown (during onboarding), it should always be on the left with a space after it */
+  margin-right: auto;
+}
+
+address-form > footer > .back-button {
+  /* When back is shown (outside onboarding) we want "Back <space> Add/Save" */
+  /* Bug 1468153 may change the button ordering to match platform conventions */
+  margin-right: auto;
+}

browser/components/payments/res/containers/basic-card-form.css

@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+basic-card-form > footer > .cancel-button {
+  /* When cancel is shown (during onboarding), it should always be on the left with a space after it */
+  margin-right: auto;
+}
+
+basic-card-form > footer > .cancel-button[hidden] ~ .back-button {
+  /* When back is shown (outside onboarding) we want "Back <space> Add/Save" */
+  /* Bug 1468153 may change the button ordering to match platform conventions */
+  margin-right: auto;
+}

browser/components/payments/res/paymentRequest.css

@@ -34,12 +34,20 @@ payment-dialog {
                  "main"   1fr
                  "disabled-overlay" auto;
   height: 100%;
-  margin: 0 10%;
-  padding: 1em;
+}
+
+payment-dialog > header,
+.page > .page-body,
+.page > footer {
+  padding: 0 10%;
 }
 
 payment-dialog > header {
+  border-bottom: 1px solid rgba(0,0,0,0.1);
   display: flex;
+  /* from visual spec: */
+  padding-bottom: 19px;
+  padding-top: 19px;
 }
 
 #main-container {
@@ -58,14 +66,24 @@ payment-dialog > header {
 }
 
 .page > .page-body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
   /* The area above the footer should scroll, if necessary. */
   overflow: auto;
 }
 
+.page > .page-body > h2:empty {
+  display: none;
+}
+
 .page > footer {
-  align-items: end;
+  align-items: center;
+  background-color: #eaeaee;
   display: flex;
-  flex-grow: 1;
+  /* from visual spec: */
+  padding-top: 20px;
+  padding-bottom: 18px;
 }
 
 #error-text {
@@ -88,17 +106,32 @@ payment-dialog > header {
   margin: 5px;
 }
 
+#total > currency-amount {
+  color: var(--in-content-link-color);
+  font-size: 1.5em;
+}
+
 #total > currency-amount > .currency-code {
   color: GrayText;
+  font-size: 1rem;
+}
+
+#total > div {
+  color: GrayText;
 }
 
 #view-all {
   flex: 0 1 auto;
 }
 
-#total .label {
-  font-size: 15px;
-  font-weight: bold;
+payment-dialog #pay::before {
+  -moz-context-properties: fill;
+  content: url(chrome://browser/skin/connection-secure.svg);
+  fill: currentColor;
+  height: 16px;
+  margin-right: 0.5em;
+  vertical-align: text-bottom;
+  width: 16px;
 }
 
 payment-dialog[changes-prevented][completion-state="fail"] #pay,
@@ -110,6 +143,10 @@ payment-dialog[changes-prevented][completion-state="success"] #pay {
   z-index: 1;
 }
 
+#cancel {
+  margin-left: auto;
+}
+
 #disabled-overlay {
   background: white;
   grid-area: disabled-overlay;

browser/components/payments/res/paymentRequest.xhtml

@@ -71,6 +71,7 @@
   <link rel="stylesheet" href="components/shipping-option.css"/>
   <link rel="stylesheet" href="components/payment-details-item.css"/>
   <link rel="stylesheet" href="containers/address-form.css"/>
+  <link rel="stylesheet" href="containers/basic-card-form.css"/>
   <link rel="stylesheet" href="containers/order-details.css"/>
 
   <script src="unprivileged-fallbacks.js"></script>