From e1fbef6910e04fab8716d178bef343ca464affcf Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <jessica.lawshe@overleaf.com>
Date: Mon, 27 Aug 2018 09:26:19 -0500
Subject: [PATCH] Move style from winning test variant to main class

`.more-details` contained style for the winning variant. Move these CSS declarations to main class of page, `.plans`.

Also alphabetize CSS classes.

Remove .more-details and extra .container from layout

CSS statements for .more-details were moved to .plans
---
 .../web/app/views/subscriptions/plans.pug     |   4 +-
 .../web/public/stylesheets/app/plans.less     | 178 +++++++++---------
 2 files changed, 88 insertions(+), 94 deletions(-)

diff --git a/services/web/app/views/subscriptions/plans.pug b/services/web/app/views/subscriptions/plans.pug
index f6b7d413e8..33346d4a52 100644
--- a/services/web/app/views/subscriptions/plans.pug
+++ b/services/web/app/views/subscriptions/plans.pug
@@ -10,8 +10,8 @@ block scripts
 
 block content
 	.content.content-alt
-		.content.plans(ng-controller="PlansController")
-			.container(class="more-details" ng-cloak)
+		.plans(ng-controller="PlansController")
+			.container(ng-cloak)
 				.row
 					.col-md-12
 						.page-header.centered.plans-header.text-centered
diff --git a/services/web/public/stylesheets/app/plans.less b/services/web/public/stylesheets/app/plans.less
index 41e2fc80f1..1f529b9888 100644
--- a/services/web/public/stylesheets/app/plans.less
+++ b/services/web/public/stylesheets/app/plans.less
@@ -3,20 +3,23 @@
 		color: @gray-dark;
 		margin-bottom: @line-height-computed;
 	}
-	.plans-header{
-		h1, h2, p {
-			text-shadow: 0 -1px 1px white;
-		}
-		h1, h2 {
-			color: @red;
-		}
-		p {
-			margin-bottom: 0;
+	.best-value {
+		color: @red;
+		line-height: @line-height-computed;
+	}
+	blockquote {
+		footer{
+			/* accessibility fix */
+			color: @gray-med;
 		}
 	}
-	.plans-subheader {
-		margin-bottom: @line-height-computed;
+	.btn-header {
+		font-family: @font-family-sans-serif;
+		margin-left: 10px;
+		margin-top: -10px;
+		text-shadow: 0 0 0;
 	}
+	.card .btn { white-space:normal; }
 	.card.features {
 		margin-top: @line-height-computed;
 		i {
@@ -32,7 +35,22 @@
 			padding-bottom: @line-height-computed * 2;
 		}
 	}
-
+	.card-first, .card-last {
+		background: @white-med;
+	}
+	.card-highlighted {
+		border: @highlight-border solid @gray-lighter;
+		padding-top: 10px!important;
+		.best-value {
+			margin-bottom: 15px;
+		}
+		.card-header {
+			padding-bottom: 22px; /* align hr with other plans */
+		}
+	}
+	.card-header {
+		margin-bottom: 15px;
+	}
 	.circle {
 		font-size: 1.5rem;
 		font-weight: 700;
@@ -46,10 +64,56 @@
 		color: white;
 		white-space: nowrap;
 		span.small {
-			color: rgba(255, 255, 255, 0.75);
+			color: rgba(255, 255, 255, 0.85);
 			font-size: @font-size-base * .8;
 		}
 	}
+	.circle-img {
+		border-radius: 50%;
+		float: right;
+		height: 100px;
+		overflow: hidden;
+		position: relative;
+		width: 100px;
+		img {
+			display: inline;
+			margin: 0 auto;
+			width: 100%;
+		}
+	}
+	.faq {
+		p {
+			margin: 0
+		}
+	}
+	.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;
+	}
+	.questions-header {
+		color: @red;
+		line-height: 37px;
+		margin: 0;
+		text-align: right;
+	}
+	.tagline {
+		margin-bottom: 20px;
+	}
+	.top-switch {
+		.currency-dropdown {
+			margin-right: -15px;
+		}
+	}
 	ul.nav-pills {
 		text-align: center;
 		margin-bottom: @line-height-computed;
@@ -61,14 +125,6 @@
 			margin-left: @line-height-computed / 2;
 		}
 	}
-
-	.card .btn { white-space:normal; }
-
-	.top-switch {
-		.currency-dropdown {
-			margin-right: -15px;
-		}
-	}
 }
 
 #changePlanSection {
@@ -141,74 +197,10 @@ input.paymentTypeOption.ng-valid {
 @highlight-color: #d3584b;
 @gray-med: #6d6d6d;
 @white-med: #fdfdfd;
-.more-details {
-	.best-value {
-		color: @red;
-		line-height: @line-height-computed;
-	}
-	blockquote {
-		footer{
-			/* accessibility fix */
-			color: @gray-med;
-		}
-	}
-	.btn-header {
-		font-family: @font-family-sans-serif;
-		margin-left: 10px;
-		margin-top: -10px;
-		text-shadow: 0 0 0;
-	}
-	.card-first, .card-last {
-		background: @white-med;
-	}
-	.card-highlighted {
-		border: @highlight-border solid @gray-lighter;
-		padding-top: 10px!important;
-		.best-value {
-			margin-bottom: 15px;
-		}
-		.card-header {
-			padding-bottom: 22px; /* align hr with other plans */
-		}
-	}
-	.card-header {
-		margin-bottom: 15px;
-	}
-	.circle {
-		/* accessibility fix */
-		span.small {
-			color: rgba(255, 255, 255, 0.85)
-		}
-	}
-	.circle-img {
-		border-radius: 50%;
-		float: right;
-		height: 100px;
-		overflow: hidden;
-		position: relative;
-		width: 100px;
-		img {
-			display: inline;
-			margin: 0 auto;
-			width: 100%;
-		}
-	}
-	.faq:last-child {
-		p {
-			margin-bottom: 0;
-		}
-	}
-	.questions-header {
-		color: @red;
-		line-height: 37px;
-		margin: 0;
-		text-align: right;
-	}
-	.tagline {
-		margin-bottom: 20px;
-	}
-	/* Media Queries */
-	@media (max-width: @screen-md-min) {
+
+/* Media Queries */
+@media (max-width: @screen-sm-max) {
+	.plans {
 		.card-highlighted {
 			/*override style in cards.less */
 			margin-top: @line-height-computed!important;
@@ -217,8 +209,10 @@ input.paymentTypeOption.ng-valid {
 			float: left;
 			margin: 0 15px;
 		}
-	}
-	@media (min-width: @screen-md-min) {
+	} 
+}
+@media (min-width: @screen-md-min) {
+	.plans {
 		blockquote {
 			margin-bottom: 0;
 		}
@@ -390,4 +384,4 @@ input.paymentTypeOption.ng-valid {
 	.tooltip.in {
 		min-width: 200px
 	}
-}
+}
\ No newline at end of file