Merge pull request #17479 from overleaf/mf-clean-up-plans-styling

[web] Clean up plans page styling

GitOrigin-RevId: fe05e9a1fd6c29c62941c878fe5e676d062c37de

services/web/app/views/subscriptions/plans.pug

@@ -42,14 +42,14 @@ block content
 
 					.row.row-spaced-large
 						.col-md-12
-							.plans-header.plans-subheader.text-centered
+							.plans-header.text-centered
 								hr
-								h2.header-with-btn #{translate('still_have_questions')}
+								h2 #{translate('still_have_questions')}
 								button.btn.plans-v2-btn-header.text-capitalize(
 									data-ol-open-contact-form-modal="general"
 								) #{translate('contact_us')}
 
-					.row.row-spaced
+					.row.row-spaced-large
 
 	include ./plans/_group_plan_modal
 	!= moduleIncludes("contactModalGeneral-marketing", locals)

services/web/app/views/subscriptions/plans/_faq.pug

@@ -1,7 +1,7 @@
-.faq.plans-v2-faq
+.plans-v2-faq
 	.row.row-spaced-large
 		.col-md-12
-			.page-header.plans-header.plans-subheader.text-centered
+			.page-header.plans-header.text-centered
 				h2 FAQ
 	.row
 		.col-md-12

services/web/app/views/subscriptions/plans/_quotes.pug

@@ -1,6 +1,6 @@
 .row.row-spaced-large
 	.col-md-12
-		.page-header.plans-header.plans-subheader.text-centered
+		.page-header.plans-header.text-centered
 			h2 #{translate('in_good_company')}
 .row
 	.col-md-6

services/web/frontend/stylesheets/app/change-plan-modal.less

@@ -0,0 +1,59 @@
+#change-plan {
+  .modal-dialog {
+    &:extend(.modal-lg);
+  }
+
+  table {
+    @media only screen and (min-width: @screen-md-min) {
+      th:last-child,
+      td:last-child {
+        width: 1%; // will expand to fit the content
+        text-align: center;
+      }
+    }
+
+    @media only screen and (max-width: @screen-sm-max) {
+      display: block;
+
+      thead {
+        display: none;
+      }
+
+      tbody,
+      td,
+      tr {
+        display: inline-block;
+        padding-top: 0;
+        padding-bottom: 0;
+        text-align: center;
+        width: 100%;
+      }
+
+      td:first-child {
+        padding-top: @padding-md;
+      }
+      td:last-child {
+        padding-top: @padding-sm;
+        padding-bottom: @padding-md;
+      }
+
+      tr:first-child {
+        td:first-child {
+          padding-top: @padding-sm;
+        }
+      }
+
+      tr {
+        border-bottom: 1px solid @table-border-color;
+        td,
+        th {
+          border: 0 !important;
+        }
+      }
+
+      tr:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+}

services/web/frontend/stylesheets/app/group-subscription-modal.less

@@ -0,0 +1,37 @@
+.group-subscription-modal {
+  .modal-header {
+    text-align: center;
+  }
+
+  .group-plan-option {
+    display: block;
+
+    span {
+      padding-left: 5px;
+      font-weight: normal;
+    }
+  }
+
+  .educational-discount-badge {
+    height: 50px;
+    padding-top: 25px;
+
+    p {
+      display: inline-block;
+      padding-left: 5px;
+      padding-right: 5px;
+      font-weight: bold;
+      font-size: @font-size-small;
+    }
+
+    .applied {
+      background-color: rgba(@ol-dark-green, 0.1);
+      color: @ol-dark-green;
+    }
+
+    .ineligible {
+      background-color: @ol-blue-gray-0;
+      color: @ol-blue-gray-4;
+    }
+  }
+}

services/web/frontend/stylesheets/app/plans/plans-ol.less

@@ -1,14 +0,0 @@
-.plans {
-  blockquote {
-    footer {
-      /* accessibility fix */
-      color: @ol-blue-gray-3;
-    }
-  }
-  .plans-header {
-    h1,
-    h2 {
-      color: @gray-dark;
-    }
-  }
-}

services/web/frontend/stylesheets/app/plans/plans-v2.less

@@ -11,6 +11,68 @@
 @plans-v2-table-td-mobile-min-height: 34px;
 
 .plans {
+  p {
+    color: @neutral-70;
+    margin-bottom: @line-height-computed;
+  }
+
+  blockquote {
+    footer {
+      /* accessibility fix */
+      color: #6d6d6d;
+    }
+
+    @media (min-width: @screen-md-min) {
+      margin-bottom: 0;
+    }
+  }
+
+  .plans-header {
+    h1,
+    h2 {
+      color: @neutral-70;
+    }
+  }
+
+  .circle {
+    font-size: 1.5rem;
+    font-weight: 700;
+    padding: 46px 18px;
+    margin: 0 auto @line-height-computed;
+    text-shadow: 0 -1px 1px darken(@link-color, 10%);
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background-color: @brand-secondary;
+    color: white;
+    white-space: nowrap;
+    line-height: 1;
+
+    .small {
+      color: rgba(255, 255, 255, 0.85);
+      font-size: @font-size-base * 0.8;
+    }
+  }
+
+  .circle-lg {
+    height: 180px;
+    padding: 70px 8px;
+    width: 180px;
+  }
+
+  .circle-subtext {
+    font-size: 1rem;
+  }
+
+  .circle-img {
+    float: right;
+
+    @media (max-width: @screen-sm-max) {
+      float: left;
+      margin: 0 15px;
+    }
+  }
+
   @media (max-width: @screen-xs-max) {
     [data-ol-current-view='group'] [data-ol-plans-v2-m-a-switch-container] {
       display: none;
@@ -1181,6 +1243,10 @@ p.plans-v2-table-green-highlighted-text {
 }
 
 .plans-v2-faq {
+  p {
+    margin: 0;
+  }
+
   // need for specificity to override default a color
   p > a {
     color: @ol-blue;

services/web/frontend/stylesheets/app/plans/plans.less

@@ -1,225 +0,0 @@
-.plans {
-  p {
-    color: @gray-dark;
-    margin-bottom: @line-height-computed;
-  }
-  blockquote {
-    footer {
-      /* accessibility fix */
-      color: @gray-med;
-    }
-  }
-  .card .btn {
-    white-space: normal;
-  }
-  .btn-header {
-    font-family: @font-family-sans-serif;
-    margin-left: 10px;
-    margin-top: -10px;
-    text-shadow: 0 0 0;
-  }
-  .card .btn {
-    white-space: normal;
-  }
-  .circle {
-    font-size: 1.5rem;
-    font-weight: 700;
-    padding: 46px 18px;
-    margin: 0 auto @line-height-computed;
-    text-shadow: 0 -1px 1px darken(@link-color, 10%);
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-    background-color: @brand-secondary;
-    color: white;
-    white-space: nowrap;
-    line-height: 1;
-    .small {
-      color: rgba(255, 255, 255, 0.85);
-      font-size: @font-size-base * 0.8;
-    }
-    .undiscounted-price {
-      display: block;
-      margin-top: -48px;
-    }
-  }
-  .circle-lg {
-    height: 180px;
-    padding: 70px 8px;
-    width: 180px;
-  }
-  .circle-subtext {
-    font-size: 1rem;
-  }
-  .circle-img {
-    float: right;
-  }
-  .faq {
-    p {
-      margin: 0;
-    }
-  }
-  .header-with-btn {
-    line-height: 1.6;
-  }
-  .plans-header {
-    h1,
-    h2,
-    p {
-      text-shadow: 0 -1px 1px white;
-    }
-    h1,
-    h2 {
-      color: @red;
-    }
-    p {
-      margin-bottom: 0;
-    }
-  }
-  .plans-subheader {
-    margin-bottom: @line-height-computed;
-  }
-  .tagline {
-    margin-bottom: 20px;
-  }
-}
-
-/**
-	Plans Test
-*/
-@best-val-height: 35px;
-@border-width-base: 3px;
-@gray-med: #6d6d6d;
-
-/* Media Queries */
-@media (max-width: @screen-sm-max) {
-  .plans {
-    .circle-img {
-      float: left;
-      margin: 0 15px;
-    }
-  }
-}
-
-@media (min-width: @screen-md-min) {
-  .plans {
-    blockquote {
-      margin-bottom: 0;
-    }
-    .faq {
-      .row:nth-child(2) {
-        h3 {
-          margin-top: 0;
-        }
-      }
-    }
-  }
-}
-
-.student-disclaimer {
-  font-size: 14px; /* match .paymentPageFeatures p */
-  color: @gray; /* match .paymentPageFeatures p */
-  margin: 12.5px 0 0 0;
-}
-
-.group-subscription-modal {
-  .modal-header {
-    text-align: center;
-  }
-
-  .group-plan-option {
-    display: block;
-
-    span {
-      padding-left: 5px;
-      font-weight: normal;
-    }
-  }
-
-  .educational-discount-badge {
-    height: 50px;
-    padding-top: 25px;
-
-    p {
-      display: inline-block;
-      padding-left: 5px;
-      padding-right: 5px;
-      font-weight: bold;
-      font-size: @font-size-small;
-    }
-
-    .applied {
-      background-color: rgba(@ol-dark-green, 0.1);
-      color: @ol-dark-green;
-    }
-
-    .ineligible {
-      background-color: @ol-blue-gray-0;
-      color: @ol-blue-gray-4;
-    }
-  }
-}
-
-/**
-	Subscription Dash
-*/
-
-#change-plan {
-  .modal-dialog {
-    &:extend(.modal-lg);
-  }
-
-  table {
-    @media only screen and (min-width: @screen-md-min) {
-      th:last-child,
-      td:last-child {
-        width: 1%; // will expand to fit the content
-        text-align: center;
-      }
-    }
-
-    @media only screen and (max-width: @screen-sm-max) {
-      display: block;
-
-      thead {
-        display: none;
-      }
-
-      tbody,
-      td,
-      tr {
-        display: inline-block;
-        padding-top: 0;
-        padding-bottom: 0;
-        text-align: center;
-        width: 100%;
-      }
-
-      td:first-child {
-        padding-top: @padding-md;
-      }
-      td:last-child {
-        padding-top: @padding-sm;
-        padding-bottom: @padding-md;
-      }
-
-      tr:first-child {
-        td:first-child {
-          padding-top: @padding-sm;
-        }
-      }
-
-      tr {
-        border-bottom: 1px solid @table-border-color;
-        td,
-        th {
-          border: 0 !important;
-        }
-      }
-
-      tr:last-child {
-        border-bottom: 0;
-      }
-    }
-  }
-}

services/web/frontend/stylesheets/app/subscription.less

@@ -101,6 +101,12 @@
   h2 {
     margin: 0;
   }
+
+  .student-disclaimer {
+    font-size: 14px;
+    color: @gray;
+    margin: 12.5px 0 0 0;
+  }
 }
 
 .price-feature-description {

services/web/frontend/stylesheets/main-style.less

@@ -104,8 +104,6 @@
 @import 'app/project-list-react.less';
 @import 'app/editor.less';
 @import 'app/homepage.less';
-@import 'app/plans/plans.less';
-@import 'app/plans/plans-ol.less';
 @import 'app/plans/plans-v2.less';
 @import 'app/recurly.less';
 @import 'app/bonus.less';
@@ -117,6 +115,8 @@
 @import 'app/translations.less';
 @import 'app/contact-us.less';
 @import 'app/subscription.less';
+@import 'app/change-plan-modal.less';
+@import 'app/group-subscription-modal.less';
 @import 'app/invite.less';
 @import 'app/error-pages.less';
 @import 'app/editor/history-v2.less';