From 3a2c9a3830ca4173ec5ae440d6fb1a7c587e150c Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <jessica.lawshe@overleaf.com>
Date: Mon, 27 Aug 2018 10:04:16 -0500
Subject: [PATCH] Plans features table styling for v2

---
 services/web/public/stylesheets/app/plans.less     | 14 ++++++--------
 .../public/stylesheets/core/_common-variables.less |  4 ++++
 .../web/public/stylesheets/core/ol-variables.less  |  4 ++++
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/services/web/public/stylesheets/app/plans.less b/services/web/public/stylesheets/app/plans.less
index 8393bbe163..f7be8d33f4 100644
--- a/services/web/public/stylesheets/app/plans.less
+++ b/services/web/public/stylesheets/app/plans.less
@@ -43,7 +43,7 @@
 		}
 	}
 	.card-first, .card-last {
-		background: @white-med;
+		background: @plans-non-highlighted;
 	}
 	.card-highlighted {
 		border: @highlight-border solid @gray-lighter;
@@ -165,9 +165,7 @@
 */
 @best-val-height: 35px;
 @highlight-border: 3px;
-@highlight-color: #d3584b;
 @gray-med: #6d6d6d;
-@white-med: #fdfdfd;
 
 /* Media Queries */
 @media (max-width: @screen-sm-max) {
@@ -208,7 +206,7 @@
 */
 .plans-table {
 	border: 1px solid @gray-lighter;
-	background-color: @white-med;
+	background-color: @plans-non-highlighted;
 	margin: @best-val-height 0 15px 0;
 	table-layout: fixed;
 	width: 100%;
@@ -231,8 +229,8 @@
 		border-top: 0;
 		font-family: @headings-font-family;
 		font-size: @font-size-h2;
-	  font-weight: @headings-font-weight;
-	  line-height: @headings-line-height;
+		font-weight: @headings-font-weight;
+		line-height: @headings-line-height;
 		padding: 18px;
 	}
 
@@ -262,7 +260,7 @@
 			border-bottom: 0;
 			padding: 18px;
 		}
-			/* highlighted column */
+		/* highlighted column */
 		td:nth-child(3) {
 			position: relative;
 			/* keep here position here, otherwise messes up border on safari when there is a bg color */
@@ -333,7 +331,7 @@
 	/* highlight rows on hover */
 	tr:hover {
 		td {
-			background-color: @gray-lightest;
+			background-color: @table-hover-bg;
 		}
 	}
 	tr:first-child:hover {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 1c93e682f3..21771c0702 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -415,6 +415,10 @@
 @pager-disabled-color:                 @pagination-disabled-color;
 
 
+// Plans
+@table-hover-bg:                       @gray-lightest;
+@plans-non-highlighted:                #fdfdfd;
+
 //== Jumbotron
 //
 //##
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index d7a53ba5dd..1e3902eb22 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -312,6 +312,10 @@
 @log-line-no-color              : #FFF;
 @log-hints-color                : @ol-blue-gray-4;
 
+// Plans
+@table-hover-bg                 : @ol-blue-gray-0;
+@plans-non-highlighted          : white;
+
 // Portals
 @black-alpha-strong             : rgba(0,0,0,0.8);