Add border styling

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

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;

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;
 }

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).

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;