From eb8e279ac7cb3b2207514adca677f10d00ea4f89 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <jessica.lawshe@overleaf.com>
Date: Mon, 27 Aug 2018 10:08:15 -0500
Subject: [PATCH] Add border styling

---
 services/web/app/views/subscriptions/new.pug     |  2 +-
 services/web/public/stylesheets/app/plans.less   | 16 ++++++++--------
 .../web/public/stylesheets/components/card.less  |  4 ++++
 .../stylesheets/core/_common-variables.less      |  3 +++
 .../public/stylesheets/core/ol-variables.less    |  3 +++
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/services/web/app/views/subscriptions/new.pug b/services/web/app/views/subscriptions/new.pug
index 05c93c37c9..ce21dca584 100644
--- a/services/web/app/views/subscriptions/new.pug
+++ b/services/web/app/views/subscriptions/new.pug
@@ -14,7 +14,7 @@ block content
 		.container(ng-controller="NewSubscriptionController" ng-cloak)
 			.row.card-group
 				.col-md-5.col-md-push-4
-					.card.card-highlighted
+					.card.card-highlighted(class=settings.overleaf ? 'card-border' : '')
 						.page-header
 							.row
 								.col-xs-9
diff --git a/services/web/public/stylesheets/app/plans.less b/services/web/public/stylesheets/app/plans.less
index f7be8d33f4..6836182ff0 100644
--- a/services/web/public/stylesheets/app/plans.less
+++ b/services/web/public/stylesheets/app/plans.less
@@ -46,7 +46,7 @@
 		background: @plans-non-highlighted;
 	}
 	.card-highlighted {
-		border: @highlight-border solid @gray-lighter;
+		border: @border-width-base solid @border-color-base;
 		padding-top: 10px!important;
 		.best-value {
 			margin-bottom: 15px;
@@ -164,7 +164,7 @@
 	Plans Test
 */
 @best-val-height: 35px;
-@highlight-border: 3px;
+@border-width-base: 3px;
 @gray-med: #6d6d6d;
 
 /* Media Queries */
@@ -266,7 +266,7 @@
 			/* keep here position here, otherwise messes up border on safari when there is a bg color */
 			&:before {
 				/* needed for safafi */
-				border-top: 1px solid @gray-lighter;
+				border-top: 1px solid @border-color-base;
 				content: '';
 				left: 0;
 				position: absolute;
@@ -291,17 +291,17 @@
 	/* highlighted column */
 	td:nth-child(3), th:nth-child(3) {
 		background-color: white;
-		border-left: @highlight-border solid @gray-lighter;
-		border-right: @highlight-border solid @gray-lighter;
+		border-left: @border-width-base solid @border-color-base;
+		border-right: @border-width-base solid @border-color-base;
 	}
 	.outer {
-		left: -@highlight-border;
-		right: -@highlight-border;
+		left: -@border-width-base;
+		right: -@border-width-base;
 		position: absolute;
 
 		.outer-content {
 			background: white;
-			border: @highlight-border solid @gray-lighter;
+			border: @border-width-base solid @border-color-base;
 			border-radius: @border-radius-base;
 			font-size: @font-size-base;
 			font-family: @font-family-sans-serif;
diff --git a/services/web/public/stylesheets/components/card.less b/services/web/public/stylesheets/components/card.less
index ac43c038b7..afa0dd2480 100644
--- a/services/web/public/stylesheets/components/card.less
+++ b/services/web/public/stylesheets/components/card.less
@@ -50,4 +50,8 @@
             border-bottom-right-radius: @border-radius-base;
         }
     }
+}
+
+.card-border {
+  border: @border-width-base solid @border-color-base;
 }
\ No newline at end of file
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 21771c0702..06827db6cf 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -87,6 +87,9 @@
 @border-radius-base:        3px;
 @border-radius-large:       5px;
 @border-radius-small:       2px;
+@border-width-base:         3px;
+@border-color-base:         @gray-lighter;
+
 //** Global color for active items (e.g., navs or dropdowns).
 @component-active-color:    #fff;
 //** Global background color for active items (e.g., navs or dropdowns).
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 1e3902eb22..ae64f3e6ca 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -42,6 +42,9 @@
 @body-bg                : #FFF;
 @content-alt-bg-color   : @ol-blue-gray-1;
 
+// Border
+@border-color-base:         @ol-blue-gray-2;
+
 // Typography
 @text-small-color       : @ol-type-color;
 @text-color             : @ol-type-color;