From ec710d0b1ed0f5a6d25913bba3916670a67ac496 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <jessica.lawshe@overleaf.com>
Date: Mon, 27 Aug 2018 10:12:33 -0500
Subject: [PATCH] Add switch button styling

---
 services/web/public/stylesheets/app/subscription.less  | 10 +++++-----
 .../web/public/stylesheets/core/_common-variables.less |  4 ++++
 services/web/public/stylesheets/core/ol-variables.less |  4 ++++
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/services/web/public/stylesheets/app/subscription.less b/services/web/public/stylesheets/app/subscription.less
index f2ff53250b..87bdfdc418 100644
--- a/services/web/public/stylesheets/app/subscription.less
+++ b/services/web/public/stylesheets/app/subscription.less
@@ -44,16 +44,16 @@
 		border: solid 1px @gray-lighter;
 		border-radius: @border-radius-large 0 0 @border-radius-large;
 		padding: (@line-height-computed / 2);
-		color: @gray;
+		color: @btn-switch-color;
 
 		&:hover,
 		&:focus {
-			color: @gray;
+			color: @btn-switch-color;
 			text-decoration: none;
 		}
 
 		&:hover {
-			color: @gray-dark;
+			color: @btn-switch-hover-color;
 		}
 
 		& + & {
@@ -62,12 +62,12 @@
 		}
 
 		&-selected {
-			color: @link-color;
+			color: @link-active-color;
 			box-shadow: inset 0 -2px 0 0;
 
 			&:hover,
 			&:focus {
-				color: @link-color;
+				color: @link-active-color;
 			}
 		}
 	}
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 06827db6cf..9d7eab3493 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -13,6 +13,7 @@
 
 //** Global textual link color.
 @link-color:            @brand-primary;
+@link-active-color:     @link-color;
 //** Link hover color set via `darken()` function.
 @link-hover-color:      darken(@link-color, 15%);
 
@@ -90,6 +91,9 @@
 @border-width-base:         3px;
 @border-color-base:         @gray-lighter;
 
+@btn-switch-color:               @gray;
+@btn-switch-hover-color:         @gray-dark;
+
 //** 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 ae64f3e6ca..fb242e831a 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -49,6 +49,7 @@
 @text-small-color       : @ol-type-color;
 @text-color             : @ol-type-color;
 @link-color             : @ol-blue;
+@link-active-color      : @ol-dark-green;
 @link-hover-color       : @ol-dark-blue;
 
 // Button colors and sizing
@@ -75,6 +76,9 @@
 @btn-info-bg             : @ol-blue;
 @btn-info-border         : transparent;
 
+@btn-switch-color        : @ol-blue-gray-4;
+@btn-switch-hover-color  : darken(@ol-blue-gray-4, 8%);
+
 // Padding
 @padding-xs-horizontal   : 8px;