Less borders (#4101)

* Removing border-bottom

* Removing border-bottom

* remove shadow rom buttons

* move colours to the correct file

* removed side margins around buttons

packages/rocketchat-theme/assets/stylesheets/base.less

@@ -659,12 +659,12 @@ label.required:after {
 	font-weight: 500;
 	font-size: 13px;
 	text-align: center;
-	margin: 4px;
+	margin: 4px 0;
 	text-transform: uppercase;
 	word-spacing: 0;
-	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.125);
 	line-height: 16px;
 	position: relative;
+	border-radius: 4px;
 	span {
 		position: relative;
 		z-index: 2;
@@ -678,7 +678,6 @@ label.required:after {
 		height: 100%;
 		opacity: 0;
 		z-index: 1;
-		.transition(opacity .1s ease-out);
 	}
 	&:hover {
 		text-decoration: none;
@@ -1025,7 +1024,6 @@ label.required:after {
 			padding: 15px 12px;
 			line-height: 1;
 			text-decoration: none;
-			border-bottom: 1px solid;
 			&:nth-child(even) {}
 			&:hover {
 				text-decoration: none;
@@ -1574,7 +1572,7 @@ label.required:after {
 	max-width: 800px;
 	margin: 40px auto;
 	padding: 20px;
-	border-radius: 5px;
+	border-radius: 4px;
 	box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);
 	.cms-page-close {
 		margin-bottom: 10px;
@@ -1698,10 +1696,10 @@ label.required:after {
 	}
 	.section {
 		border: 1px solid #ddd;
-		border-left: none;
+		border-radius: 4px;
 		background-color: #fff;
 		padding: 20px;
-		margin-bottom: 20px;
+		margin: 20px;
 		&.section-collapsed {
 			.section-content {
 				display: none;
@@ -1842,7 +1840,7 @@ label.required:after {
 			.section-content {
 				border: 1px solid;
 				padding: 20px;
-				border-radius: 5px;
+				border-radius: 4px;
 				.section-helper {
 					padding: 20px 20px 40px;
 					pre {
@@ -2075,6 +2073,7 @@ label.required:after {
 	height: 100%;
 	top: 0;
 	left: 0;
+	border-right: 1px solid;
 	.room-topic {
 		font-size: 14px;
 		opacity: 0.4;
@@ -2801,20 +2800,14 @@ body:not(.is-cordova) {
 	height: 100%;
 	top: 0;
 	right: 0;
-	background: #FCFCFC;
-	border-left: 1px solid #eaeaea;
 	z-index: 130;
 	.tab-button {
 		position: relative;
 		cursor: pointer;
-		padding: 10px 0;
-		background: #FCFCFC;
-		border-bottom: 1px solid #eaeaea;
 		text-align: center;
-		&:hover {
-			background: #EAEAEA;
+		button {
+			height: 38px;
 		}
-
 		.counter {
 			position: absolute;
 			background: #999;
@@ -2829,16 +2822,11 @@ body:not(.is-cordova) {
 			top: 4px;
 			text-align: center;
 		}
-
 		&.active {
-			background-color: #F4F4F4;
-			margin-left: -1px;
-			border-right: 3px solid #ff0000;
-
+			border-right: 3px solid;
 			button {
-				margin-left: 4px;
+				margin-left: 3px;
 			}
-
 			.counter {
 				margin-right: -3px;
 			}
@@ -2904,7 +2892,6 @@ body:not(.is-cordova) {
 
 // FLEX-TAB and FLEX-TAB views
 .flex-tab {
-	border-left: 1px solid;
 	overflow-x: visible;
 	position: fixed;
 	z-index: 110;
@@ -3152,31 +3139,10 @@ body:not(.is-cordova) {
 	}
 	.thumb {
 		width: 100%;
-		height: 200px;
-
-		.transition(height .4s ease);
-
-		cursor: zoom-in;
-		cursor: -moz-zoom-in;
-		cursor: -webkit-zoom-in;
-
-		&.bigger {
-			height: 350px;
-			cursor: zoom-out;
-			cursor: -moz-zoom-out;
-			cursor: -webkit-zoom-out;
-		}
-
-		.avatar {
-			border-radius: 0;
-
-			.avatar-image {
-				border-radius: 0;
-			}
-		}
+		height: 350px;
+		padding: 20px;
 	}
 	nav {
-		margin-left: -4px;
 		padding: 0 20px;
 		.back {
 			float: right;

packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less

@@ -393,7 +393,6 @@ a.github-fork {
 		}
 		button, a {
 			color: fade( @quaternary-font-color, 50%);
-			border-bottom-color: darken(@primary-background-color, 2%);
 			&:hover {
 				background-color: darken(@primary-background-color, 2%);
 				color: fade( @quaternary-font-color, 75%);
@@ -689,6 +688,7 @@ a.github-fork {
 
 // change to page-messages
 .messages-container {
+	border-right-color: @tertiary-background-color;
 	.edit-room-title {
 		color: @secondary-font-color;
 		&:hover {
@@ -832,7 +832,6 @@ a.github-fork {
 // FLEX-TAB and FLEX-TAB views
 .flex-tab {
 	background-color: @secondary-background-color;
-	border-left-color: @tertiary-background-color;
 	.control {
 		background-color: @secondary-background-color;
 		&:before {
@@ -1241,10 +1240,18 @@ a.github-fork {
 }
 
 .flex-tab-bar {
+	background: #FCFCFC;
 	.tab-button {
+		&:hover {
+			background: #EAEAEA;
+		}
 		&.red {
 			color: red;
 		}
+		&.active {
+			background-color: @secondary-background-color;
+			border-color: #ff0000;
+		}
 		&.attention {
 			animation-duration: 1000ms;
 			animation-name: blink;