⊙﹏⊙

mozilla · Aug 30, 2022 · 9ea4d84 · 9ea4d84
1 parent de947ca
commit 9ea4d84
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 65 deletions.
diff --git a/packages/fxa-payments-server/src/routes/Checkout/index.scss b/packages/fxa-payments-server/src/routes/Checkout/index.scss
@@ -1,64 +1,41 @@
 @import '../../../../fxa-content-server/app/styles/variables';
 @import '../../../../fxa-content-server/app/styles/breakpoints';
 
-.subscription-title + .product-payment {
-  grid-row: 2/3;
-  border-top: 0;
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 -1px white, 0 1px white, -2px 2px 2px -2px rgba(12, 12, 13, 0.1),
-    2px 2px 2px -2px rgba(12, 12, 13, 0.1);
-
+.checkout-payment {
   @include max-width('tablet') {
     grid-row: 4/5;
-    box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.1);
-    border-radius: 8px;
-  }
-
-  @media (orientation: landscape) and (max-width: 927px) and (max-height: 429px) {
-    grid-row: 4/5;
-    box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.1);
-    border-radius: 8px;
-  }
-
-  @media (orientation: portrait) and (max-width: 429px) and (max-height: 927px) {
-    grid-row: 4/5;
-    box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.1);
     border-radius: 8px;
-  }
-}
-
-.product-payment {
-  @include max-width('tablet') {
-    grid-row: 4/5;
     margin: 24px 16px;
     min-height: 100%;
   }
 
   @media (orientation: landscape) and (max-width: 927px) and (max-height: 429px) {
     grid-row: 4/5;
+    border-radius: 8px;
     margin: 24px 16px;
     min-height: 100%;
   }
 
   @media (orientation: portrait) and (max-width: 429px) and (max-height: 927px) {
     grid-row: 4/5;
+    border-radius: 8px;
     margin: 24px 16px;
     min-height: 100%;
   }
 
   @include min-width('desktop') {
     padding: 16px 48px 48px;
   }
+}
 
-  .pay-with-heading {
-    &:before,
-    &:after {
-      content: '';
-      border-top: 1px solid #e0e0e6;
-    }
+.pay-with-heading {
+  &:before,
+  &:after {
+    content: '';
+    border-top: 1px solid #e0e0e6;
+  }
 
-    @include max-width('tablet') {
-      margin-top: 16px;
-    }
+  @include max-width('tablet') {
+    margin-top: 16px;
   }
 }
diff --git a/packages/fxa-payments-server/src/routes/Checkout/index.tsx b/packages/fxa-payments-server/src/routes/Checkout/index.tsx
@@ -340,7 +340,8 @@ export const Checkout = ({
           : (
             <>
               <SubscriptionTitle screenType="create" />
-              <div className="product-payment" data-testid="subscription-create">
+
+              <div className="checkout-payment bg-white border-t-0 pt-4 px-4 pb-14 row-start-2 row-end-3 rounded-t-none rounded-b-lg shadow-sm shadow-grey-300 text-grey-600" data-testid="subscription-create">
                 <Localized id="new-user-step-1">
                   <h2 className="step-header">1. Create a Firefox account</h2>
                 </Localized>

diff --git a/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss b/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss
@@ -29,6 +29,13 @@
 }
 
 .product-payment {
+  grid-row: 1/3;
+  background: $color-white;
+  box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.1);
+  border-radius: 8px;
+  color: rgba(12, 12, 13, 0.8);
+  padding: 16px 16px 60px;
+
   @include max-width('tablet') {
     grid-row: 4/5;
     margin: 24px 16px;
@@ -51,6 +58,24 @@
     padding: 16px 48px 48px;
   }
 
+  header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: initial;
+    margin-top: 20px;
+    padding-bottom: 32px;
+    text-align: center;
+
+    @include min-width('desktop') {
+      margin-top: 32px;
+    }
+
+    p {
+      color: #6d6d6e;
+    }
+  }
+
   .pay-with-heading {
     &:before,
     &:after {

diff --git a/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.test.tsx b/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.test.tsx
@@ -133,7 +133,8 @@ describe('routes/Product/SubscriptionCreate', () => {
     const subscriptionProcessingTitle = queryByTestId(
       'subscription-processing-title'
     );
-    expect(subscriptionProcessingTitle).not.toBeInTheDocument();
+    expect(subscriptionProcessingTitle).toBeInTheDocument();
+    expect(subscriptionProcessingTitle).toHaveClass('hidden');
     expect(queryByTestId('subscription-create')).toBeInTheDocument();
     expect(queryByText('Payment information')).toBeInTheDocument();
     expect(queryByTestId('paypal-button')).not.toBeInTheDocument();
@@ -225,7 +226,8 @@ describe('routes/Product/SubscriptionCreate', () => {
     const subscriptionProcessingTitle = queryByTestId(
       'subscription-processing-title'
     );
-    expect(subscriptionProcessingTitle).not.toBeInTheDocument();
+    expect(subscriptionProcessingTitle).toBeInTheDocument();
+    expect(subscriptionProcessingTitle).toHaveClass('hidden');
     expect(screen.queryByTestId('subscription-create')).toBeInTheDocument();
     expect(screen.queryByTestId('plan-details-component')).toBeInTheDocument();
   });

diff --git a/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.tsx b/packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.tsx
@@ -207,29 +207,30 @@ export const SubscriptionCreate = ({
   return (
     <>
       <Header {...{ profile }} />
-
       <div className="main-content">
-        { subscriptionError &&
-          <PaymentErrorView
-            error={subscriptionError}
-            actionFn={() => {
-              setSubscriptionError(undefined);
-              setTransactionInProgress(false);
-            }}
-            plan={selectedPlan}
-          />
-        }
-
-        { (!transactionInProgress || subscriptionError)
-          ? null
-          : <PaymentProcessing provider="paypal" />
-        }
-
-        { (transactionInProgress || subscriptionError)
-          ? null
-          : <SubscriptionTitle screenType="create" />
-        }
-
+        <PaymentErrorView
+          error={subscriptionError}
+          actionFn={() => {
+            setSubscriptionError(undefined);
+            setTransactionInProgress(false);
+          }}
+          className={classNames({
+            hidden: !subscriptionError,
+          })}
+          plan={selectedPlan}
+        />
+        <PaymentProcessing
+          provider="paypal"
+          className={classNames({
+            hidden: !transactionInProgress || subscriptionError,
+          })}
+        />
+        <SubscriptionTitle
+          screenType="create"
+          className={classNames({
+            hidden: transactionInProgress || subscriptionError,
+          })}
+        />
         <div
           className={classNames('product-payment', {
             hidden: transactionInProgress || subscriptionError,

diff --git a/packages/fxa-payments-server/src/styles/tailwind.css b/packages/fxa-payments-server/src/styles/tailwind.css
@@ -17,11 +17,7 @@
 
 .label-title {
   @apply font-semibold my-3 text-base text-grey-600 text-left;
-}
-
-.product-payment {
-  @apply bg-white pt-4 px-4 pb-14 row-start-1 row-end-3 rounded-lg shadow-sm shadow-grey-300 text-grey-600;
-}
+}bg-white pt-4 px-4 pb-14 row-start-1 row-end-3 rounded-lg shadow-sm shadow-grey-300 text-grey-600
 
 /* borders */
 /* after '@tailwind base' has been enabled for payments remove border-0 border-solid */