Merge f7e30ca into b3e7b7d

kobotoolbox · May 24, 2024 · 4d6c4a9 · 4d6c4a9
2 parents b3e7b7d + f7e30ca
commit 4d6c4a9
Show file tree

Hide file tree

Showing 72 changed files with 1,153 additions and 1,270 deletions.
diff --git a/jsapp/js/account/add-ons/addOnList.component.tsx b/jsapp/js/account/add-ons/addOnList.component.tsx
@@ -170,12 +170,17 @@ const AddOnList = (props: {
       <tbody>
         {addOnProducts.map((product) =>
           product.prices.map((price) => (
-            <tr className={styles.row} key={price.id}>
-              <td className={styles.product}>
-                <span className={styles.productName}>{product.name}</span>
-                {renderUpdateBadge(price)}
+            <tr key={price.id}>
+              <td>
+                <div className={styles.productAndPrice}>
+                  <div>
+                    <span>{product.name}</span>
+                    {renderUpdateBadge(price)}
+                  </div>
+                  <div className={styles.price}>{price.human_readable_price}</div>
+                </div>
               </td>
-              <td className={styles.price}>{price.human_readable_price}</td>
+
               <td className={styles.buy}>
                 {isSubscribedAddOnPrice(price) && (
                   <BillingButton

diff --git a/jsapp/js/account/add-ons/addOnList.module.scss b/jsapp/js/account/add-ons/addOnList.module.scss
@@ -1,7 +1,7 @@
 @use '~kobo-common/src/styles/colors';
 @use 'scss/breakpoints';
 @use 'scss/sizes';
-@use 'scss/_variables';
+@use 'js/account/plans/plan.module';
 
 .header {
   font-size: sizes.$r18;
@@ -16,25 +16,27 @@
 
 .table {
   table-layout: fixed;
-  border-spacing: 1em;
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  max-width: plan.$plans-page-max-width;
 
-  & tr {
+  tr {
     border-top: 1px solid colors.$kobo-light-storm;
 
     &:last-child {
       border-bottom: 1px solid colors.$kobo-light-storm;
     }
   }
 
-  & td {
+  td {
     padding-block: 1em;
     font-weight: 600;
     font-size: sizes.$x16;;
   }
 }
 
-.product,
-.price {
+.productAndPrice {
   line-height: 2em;
 }
 
@@ -47,27 +49,16 @@
 }
 
 .buy {
-  width: 30%;
+  width: 140px;
+  padding-left: 20px;
 }
 
-@media screen and (min-width: breakpoints.$b1000) {
-  .table {
-    padding: 1em;
-    width: variables.$plans-page-max-width;
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-
-  .price {
-    margin-left: sizes.$x600;
-    margin-top: -(sizes.$x30);
-  }
-
-  .buy {
-    width: 8em;
-  }
-
-  .table td:nth-child(2) {
-    margin-inline-end: 10em;
+@include breakpoints.breakpoint(mediumAndUp) {
+  .productAndPrice {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0 20px;
   }
 }
diff --git a/jsapp/js/account/add-ons/addOns.module.scss b/jsapp/js/account/add-ons/addOns.module.scss
@@ -3,7 +3,7 @@
 @use 'scss/sizes';
 
 .root {
-  padding: sizes.$x40;
+  padding: sizes.$x20;
 }
 
 .headerText {
@@ -27,3 +27,8 @@
   align-items: center;
 }
 
+@include breakpoints.breakpoint(narrowAndUp) {
+  .root {
+    padding: sizes.$x40;
+  }
+}
diff --git a/jsapp/js/account/plans/billingButton.component.tsx b/jsapp/js/account/plans/billingButton.component.tsx
@@ -16,6 +16,7 @@ export default function BillingButton(props: Partial<ButtonProps>) {
       size='l'
       {...props}
       classNames={props.classNames ? [button, ...props.classNames] : [button]}
+      isFullWidth
     />
   );
 }
diff --git a/jsapp/js/account/plans/plan.component.tsx b/jsapp/js/account/plans/plan.component.tsx
@@ -512,13 +512,7 @@ export default function Plan(props: PlanProps) {
                 </div>
                 {shouldShowExtras && (
                   <div className={styles.enterprisePlanContainer}>
-                    <div
-                      className={
-                        expandComparison
-                          ? `${styles.enterprisePlan} ${styles.expandedEnterprisePlan}`
-                          : styles.enterprisePlan
-                      }
-                    >
+                    <div className={styles.enterprisePlan}>
                       <h1 className={styles.enterpriseTitle}>
                         {' '}
                         {t('Want more?')}

diff --git a/jsapp/js/account/plans/plan.module.scss b/jsapp/js/account/plans/plan.module.scss
@@ -4,6 +4,11 @@
 @use 'sass:color';
 @use 'scss/_variables';
 
+$plans-page-card-width: 320px;
+$plans-page-gap: 20px;
+$plans-page-max-width: $plans-page-card-width * 3 + $plans-page-gap * 2;
+$plan-badge-height: 38px;
+
 .accountPlan {
   padding: sizes.$x30 sizes.$x40;
   overflow-y: auto;
@@ -12,7 +17,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  row-gap: sizes.$x20;
+  row-gap: $plans-page-gap;
 }
 
 .accountPlan.showAddOns {
@@ -36,11 +41,11 @@
 .allPlans {
   display: flex;
   flex-direction: column;
-  row-gap: sizes.$x20;
+  row-gap: $plans-page-gap;
 }
 
 .stripePlans {
-  flex: 0 0 variables.$plans-page-card-width;
+  flex: 0 0 $plans-page-card-width;
   display: flex;
   flex-direction: column;
   margin-top: 0;
@@ -91,7 +96,7 @@
   }
 
   &:hover {
-      background-color: color.adjust(colors.$kobo-blue, $lightness: -5%);
+    background-color: color.adjust(colors.$kobo-blue, $lightness: -5%);
   }
 }
 
@@ -100,19 +105,10 @@
   border-radius: sizes.$x4;
 }
 
-.planContainer {
-  border-radius: sizes.$x6;
-  border: colors.$kobo-gray-85 solid sizes.$x1;
-  padding: sizes.$x24;
-  min-height: variables.$plans-page-card-min-height;
-  max-height: variables.$plans-page-card-max-height;
-  width: variables.$plans-page-card-width;
-}
-
 .plansSection {
   display: flex;
   flex-direction: column;
-  row-gap: sizes.$x20;
+  row-gap: $plans-page-gap;
   align-items: center;
 }
 
@@ -140,20 +136,14 @@
   height: 2em;
 }
 
-.planContainer :global .k-button {
-  margin: sizes.$x24 auto 0;
-  width: 100%;
-  height: sizes.$x38;
-}
-
-.planContainer :global span.k-button__label {
-  text-align: center;
-  width: 100%;
-}
-
 .planContainer {
+  border-radius: sizes.$x6;
+  border: colors.$kobo-gray-85 solid sizes.$x1;
+  padding: sizes.$x24;
+  width: $plans-page-card-width;
   display: flex;
   flex-direction: column;
+  height: 100%; // So it stretches to match the height of other containers
 }
 
 .planContainer.planContainerWithBadge {
@@ -193,19 +183,17 @@
 }
 
 .enterprisePlanContainer {
-  flex: 0 0 variables.$plans-page-card-width;
+  flex: 0 0 $plans-page-card-width;
   display: flex;
   flex-direction: column;
 }
 
 .enterprisePlan {
   background-color: colors.$kobo-bg-blue;
   padding: sizes.$x24;
-  overflow: hidden;
   border-radius: sizes.$x6;
-  min-height: variables.$plans-page-card-min-height;
-  max-height: variables.$plans-page-card-max-height;
-  width: variables.$plans-page-card-width;
+  width: $plans-page-card-width;
+  height: 100%;
 }
 
 .enterpriseDetails {
@@ -229,22 +217,7 @@ a.enterpriseLink {
   margin: sizes.$x5 0 0;
 }
 
-.expandedEnterprisePlan {
-  height: variables.$plans-page-card-min-height;
-}
-
-.expandedContainer > :nth-child(2) {
-  height: sizes.$x180;
-}
-
-.expandedContainer > :nth-child(4) {
-  height: sizes.$x80;
-}
-
-.planContainer :last-child {
-  margin-bottom: 0;
-}
-
+// This is the badge on top of the card
 .currentPlan {
   background-color: colors.$kobo-storm;
   color: colors.$kobo-white;
@@ -254,23 +227,26 @@ a.enterpriseLink {
   position: relative;
   top: 0;
   border-radius: sizes.$x6 sizes.$x6 0 0;
-  height: sizes.$x38;
-  width: variables.$plans-page-card-width;
+  height: $plan-badge-height;
+  width: $plans-page-card-width;
   font-weight: 700;
   font-size: sizes.$x16;
 }
 
 .comparisonButton {
-  width: variables.$plans-page-card-width;
+  margin-left: auto;
+  margin-right: auto;
+  width: $plans-page-card-width;
 }
 
 .planButton {
-  height: sizes.$x80;
-  padding-top: sizes.$x20;
-}
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 
-.maximizedCards{
-  display: none;
+  &:not(:empty) {
+    margin-top: 30px;
+  }
 }
 
 .scrollToTopButton{
@@ -287,54 +263,47 @@ a.enterpriseLink {
   box-shadow: 0 sizes.$x4 sizes.$x12 0 rgba(0, 0, 0, 0.2);
 }
 
-@media screen and (min-width: breakpoints.$b1000) {
-  .featureContainer {
-    height: 24em;
-  }
+.maximizedCards {
+  width: 100%;
+  display: none;
+}
 
+@include breakpoints.breakpoint(mediumAndUp) {
   .allPlans {
-    column-gap: sizes.$x20;
+    column-gap: $plans-page-gap;
     flex-direction: row;
-    max-width: variables.$plans-page-max-width;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    max-width: $plans-page-max-width;
   }
 
-  .comparisonButton {
-    width: variables.$plans-page-max-width;
-  }
-
-  .expandedEnterprisePlan {
-    height: variables.$plans-page-card-max-height;
-  }
-
-  .minimizedCards{
-    display: none;
-  }
-
-  .maximizedCards{
-    display: unset;
+  .planContainer:not(.planContainerWithBadge) {
+    margin-top: $plan-badge-height;
   }
 
-  .planContainer{
-    min-height: 551px;
+  .enterprisePlanContainer {
+    margin-top: $plan-badge-height;
   }
 
-  .planContainer:not(.planContainerWithBadge) {
-    margin-top: variables.$plan-badge-height;
+  .expandedContainer > :nth-child(2) {
+    min-height: sizes.$x200;
   }
 
-  .enterprisePlanContainer {
-    margin-top: sizes.$x38;
+  .expandedContainer > :nth-child(4) {
+    min-height: sizes.$x120;
   }
 
-  .enterprisePlan{
-    min-height: 551px;
+  .comparisonButton {
+    width: 100%;
+    max-width: $plans-page-max-width;
   }
 
-  .expandedContainer > :nth-child(2) {
-    height: sizes.$x200;
+  .minimizedCards {
+    display: none;
   }
 
-  .expandedContainer > :nth-child(4) {
-    height: sizes.$x120;
+  .maximizedCards {
+    display: unset;
   }
 }