fix(payment): choose offer layout improvements

jwplayer · Aug 4, 2021 · a19d55e · a19d55e
1 parent d85c9ba
commit a19d55e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/src/components/ChooseOfferForm/ChooseOfferForm.module.scss b/src/components/ChooseOfferForm/ChooseOfferForm.module.scss
@@ -1,5 +1,6 @@
 @use '../../styles/variables';
 @use '../../styles/theme';
+@use '../../styles/mixins/responsive';
 
 .title {
   margin-bottom: 8px;
@@ -15,7 +16,6 @@
 
 .offers {
   display: flex;
-  width: 100%;
   margin: 0 -4px 24px;
 }
 
@@ -48,7 +48,9 @@
 }
 
 .label {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   padding: 16px;
   background-color: rgba(variables.$black, 0.34);
   border: 1px solid rgba(variables.$white, 0.34);
@@ -64,6 +66,7 @@
 }
 
 .offerDivider {
+  width: 100%;
   border: none;
   border-bottom: 1px solid currentColor;
   opacity: 0.54;
@@ -80,14 +83,24 @@
     padding: 4px 0;
 
     > svg {
+      flex-shrink: 0;
       margin-right: 4px;
       fill: variables.$green;
     }
+
+    @include responsive.mobile-only() {
+      font-size: 14px;
+    }
   }
 }
 
+.fill {
+  flex: 1;
+}
+
 .offerPrice {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: baseline;
   font-size: 32px;

diff --git a/src/components/ChooseOfferForm/ChooseOfferForm.tsx b/src/components/ChooseOfferForm/ChooseOfferForm.tsx
@@ -89,6 +89,7 @@ const ChooseOfferForm: React.FC<Props> = ({
                   <CheckCircle /> {t('choose_offer.benefits.watch_on_all_devices')}
                 </li>
               </ul>
+              <div className={styles.fill} />
               <div className={styles.offerPrice}>
                 {getOfferPrice(monthlyOffer)} <small>/{t('periods.month')}</small>
               </div>
@@ -123,6 +124,7 @@ const ChooseOfferForm: React.FC<Props> = ({
                   <CheckCircle /> {t('choose_offer.benefits.watch_on_all_devices')}
                 </li>
               </ul>
+              <div className={styles.fill} />
               <div className={styles.offerPrice}>
                 {getOfferPrice(yearlyOffer)} <small>/{t('periods.year')}</small>
               </div>

diff --git a/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap b/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap
@@ -98,6 +98,9 @@ exports[`<OffersForm> renders and matches snapshot 1`] = `
               choose_offer.benefits.watch_on_all_devices
             </li>
           </ul>
+          <div
+            class="fill"
+          />
           <div
             class="offerPrice"
           >
@@ -188,6 +191,9 @@ exports[`<OffersForm> renders and matches snapshot 1`] = `
               choose_offer.benefits.watch_on_all_devices
             </li>
           </ul>
+          <div
+            class="fill"
+          />
           <div
             class="offerPrice"
           >