Normalise settings table styles

packages/rocketchat-authorization/client/stylesheets/permissions.less

@@ -8,74 +8,23 @@
 	}
 
 	.permission-grid {
-		border-collapse: collapse;
-		overflow: hidden;
-		margin-bottom: 1em;
-
-		td {
-			position: relative;
-			* {
-				color: @primary-font-color;
-			}
+		th {
+			white-space: normal;
+	    text-align: center;
+	    position: relative;
+	    padding-top: 20px;
 		}
-
-		td:nth-child(n+2) {
+		td {
 			text-align: center;
 			width: 10%;
 		}
-
-
-		td:nth-child(1) {
-			white-space: nowrap;
-		}
-
-		td {
-			padding: 5px;
-			border: 1px solid @secondary-background-color;
-		}
-
-		td:hover::after {
-			content: "";
+		.icon-edit {
+			font-size: 80%;
 			position: absolute;
-			background-color: @tertiary-font-color;
-			left: 0;
-			top: -5000px;
-			height: 10000px;
-			width: 100%;
-			z-index: -1;
-		}
-
-		tbody {
-			tr:nth-child(even) td:first-child::before {
-				content: "";
-				position: absolute;
-				background-color: @secondary-background-color;
-				top: 0;
-				left: -5000px;
-				width: 10000px;
-				height: 100%;
-				z-index: -10;
-			}
-
-			tr:hover {
-				background-color: @tertiary-font-color;
-			}
-
-		}
-
-		thead {
-			tr {
-				background-color: @secondary-background-color;
-			}
-			td {
-				font-weight: bold;
-				a {
-					white-space: nowrap;
-				}
-				.icon-edit {
-					font-size: 80%;
-				}
-			}
+	    padding-left: 2px;
+	    top: 0;
+	    left: 50%;
+	    transform: translateX(-50%);
 		}
 	}
 

packages/rocketchat-authorization/client/views/permissions.html

@@ -6,14 +6,14 @@
 			<table border="1" class="permission-grid">
 				<thead>
 					<tr>
-						<td>&nbsp;</td>
+						<th>&nbsp;</th>
 						{{#each role}}
-							<td title="{{description}}">
+							<th title="{{description}}">
 								<a href="{{pathFor "admin-permissions-edit" name=_id}}">
 									{{_id}}
 									<i class="icon-edit"></i>
 								</a>
-							</td>
+							</th>
 						{{/each}}
 					</tr>
 				</thead>

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

@@ -1675,6 +1675,12 @@ label.required:after {
 }
 
 .page-settings {
+	h2 {
+		margin-bottom: 2rem;
+	}
+	h3 {
+		margin-bottom: 1rem;
+	}
 	.content {
 		padding: 20px 0;
 		background-color: #f8f8f8;
@@ -1920,31 +1926,6 @@ label.required:after {
 			float: right;
 			margin-left: 12px;
 		}
-		table {
-			width: 100%;
-			thead {
-				th {
-					text-align: left;
-
-					&.text-right {
-						text-align: right;
-					}
-				}
-			}
-			tbody {
-				td {
-					vertical-align: middle;
-					padding: 4px 2px;
-
-					a {
-						padding: inherit;
-						margin-bottom: inherit;
-						display: inline;
-						border: none;
-					}
-				}
-			}
-		}
 	}
 }
 
@@ -3997,27 +3978,18 @@ body:not(.is-cordova) {
 	}
 }
 
-.statistics-table {
+.page-container table {
 	margin-bottom: 30px;
-	border: 2px solid #F5F5F5;
 	width: 100%;
-	tr {
-		background-color: #FFFFFF;
-		&:nth-of-type(even) {
-			background-color: #F5F5F5;
-		}
-	}
 	th,
 	td {
-		text-align: left;
-		padding: 6px 8px;
+		vertical-align: middle;
+	  padding: .6rem .7rem;
+	  text-align: left;
+	  border-width: 0 0 1px 0;
 	}
 	th {
-		text-align: right;
-		width: 30%;
-	}
-	td {
-		width: 70%;
+		white-space: nowrap;
 	}
 }