Nicer v2 styles

services/web/public/stylesheets/app/editor/toolbar.less

@@ -259,6 +259,8 @@
 }
 
 .formatting-btn {
+	color: @formatting-btn-color;
+	background-color: @formatting-btn-bg;
 	padding: 0;
 	height: 100%;
 	display: flex;
@@ -266,9 +268,13 @@
 	justify-content: center;
 	box-shadow: none;
 	border: none;
-	border-left: 1px solid #ccc;
+	border-left: 1px solid @formatting-btn-border;
 	border-radius: 0;
 
+	&:hover {
+		color: @formatting-btn-color;
+	}
+
 	&--icon {
 		min-width: 32px;
 		width: 32px;
@@ -296,10 +302,15 @@
 .formatting-menu {
 	min-width: auto;
 	max-width: 130px;
+	background-color: @formatting-menu-bg;
 
 	.formatting-menu-item {
 		float: left;
 
+		.formatting-btn {
+			border-right: none;
+		}
+
 		&:nth-of-type(4n + 1) .formatting-btn {
 			border-left: none;
 		}

services/web/public/stylesheets/core/_common-variables.less

@@ -941,6 +941,12 @@
 @toggle-switch-bg                  : @gray-lightest;
 @toggle-switch-highlight-color     : @brand-primary;
 
+// Formatting buttons
+@formatting-btn-color             : @btn-default-color;
+@formatting-btn-bg                : @btn-default-bg;
+@formatting-btn-border            : @btn-default-border;
+@formatting-menu-bg               : @btn-default-bg;
+
 // Chat
 @chat-bg                          : transparent;
 @chat-message-color               : @text-color;

services/web/public/stylesheets/core/ol-variables.less

@@ -244,6 +244,12 @@
 @toggle-switch-radius-left         : @btn-border-radius-base 0 0 @btn-border-radius-base;
 @toggle-switch-radius-right        : 0 @btn-border-radius-base @btn-border-radius-base 0;
 
+// Formatting buttons
+@formatting-btn-color             : #FFF;
+@formatting-btn-bg                : @ol-blue-gray-5;
+@formatting-btn-border            : @ol-blue-gray-4;
+@formatting-menu-bg               : @ol-blue-gray-5;
+
 // Chat
 @chat-bg                          : @ol-blue-gray-5;
 @chat-message-color               : #FFF;