[IMPROVE] UI design for Tables and tabs component on Directory

packages/rocketchat-theme/client/imports/components/header.css

@@ -2,17 +2,14 @@
 	padding: 0 0.5rem;
 
 	&__wrap {
-
 		z-index: 2;
 
 		display: flex;
 
-		margin: 0 -0.5rem;
-
-
-		display: flex;
 		flex: 0 0 auto;
 
+		margin: 0 -0.5rem;
+
 		padding: var(--header-padding);
 
 		white-space: nowrap;
@@ -34,7 +31,6 @@
 	&__block {
 		display: flex;
 
-		margin: 0 0.5rem;
 		align-items: center;
 	}
 

packages/rocketchat-theme/client/imports/components/modal/directory.css

@@ -2,114 +2,147 @@
 	display: flex;
 	flex-direction: column;
 
-	&-header {
-		display: flex;
+	padding: 0 1.5rem;
+
+	&-search {
+		width: 100%;
+
+		& .rc-icon {
+			width: 0.875rem;
+		}
 	}
 
+	& .rc-header {
+		padding: 1.25rem 0.5rem 0.75rem;
 
-	/* TODO: -plus and -search should be "globals" */
+		&__wrap {
 
-	&-plus {
-		width: 36px;
-		min-width: 36px;
-		height: 36px;
-		min-height: 36px;
-		padding: 0;
-	}
-	&-search {
-		max-width: 260px;
-	}
+			padding: 0.75rem 0;
 
-	&-selector,
-	&-search,
-	&-plus {
-		margin: 0 0.5rem;
-	}
-}
+			box-shadow: none;
+		}
 
-.rc-directory-header .rc-input__wrapper {
-	padding: 0;
+		&__block {
+			font-size: 1.375rem;
+		}
+	}
 }
 
 .rc-directory-channel {
 	&-wrapper {
 		display: flex;
-		align-items: center;
-		margin: 0 -9px;
 
 		overflow: hidden;
+
+		align-items: center;
 	}
 
 	&-avatar {
-		width: 60px;
-		height: 60px;
-		margin: 0 9px;
-
 		flex: 0 0 auto;
 
-		background-size: contain;
+		width: 32px;
+		height: 32px;
+		padding: 3px;
+
 		background-repeat: no-repeat;
 		background-position: center center;
+
+		background-size: contain;
 	}
 
 	&-info {
 		display: flex;
 
+		overflow: hidden;
+
 		flex-direction: column;
+
 		width: 1%;
-		flex-grow: 1;
 
 		white-space: nowrap;
-		overflow: hidden;
+
 		text-overflow: ellipsis;
+		flex-grow: 1;
+
+		margin: 0 3px;
 	}
 
-	&-name {
-		font-size: 1rem;
-		font-weight: 500;
-		white-space: nowrap;
+	&-name,
+	&-username {
 		overflow: hidden;
+
+		white-space: nowrap;
+
 		text-overflow: ellipsis;
+
+		& .rc-icon {
+			font-size: 1rem;
+		}
 	}
 
 	&-description {
-		margin-top: 0.625rem;
-		color: var(--rc-color-primary-light);
+
 		overflow: hidden;
-		text-overflow: ellipsis;
+
 		max-width: 200px;
-	}
+		margin-top: 0.625rem;
+
+		text-overflow: ellipsis;
 
-	&-createdAt {
-		text-transform: capitalize;
+		color: var(--rc-color-primary-light);
 	}
 }
 
 .rc-directory-content {
+	display: flex;
 	overflow-x: auto;
+	flex-direction: column;
 	flex: 1 1 100%;
+
 	height: 100vh;
 
 	& .js-sort {
 		cursor: pointer;
+
+		&.is-sorting .table-fake-th .rc-icon {
+			opacity: 1;
+		}
+	}
+
+	& .table-fake-th {
+		&:hover .rc-icon {
+			opacity: 1;
+		}
+
+		& .rc-icon {
+			transition: opacity 0.3s;
+
+			opacity: 0;
+
+			font-size: 1rem;
+		}
 	}
 }
 
-.rc-table-td--createdAt,
-.rc-table-td--users {
+.rc-directory-td--users {
+	overflow: hidden;
+
 	width: 120px;
+
 	white-space: nowrap;
 	text-overflow: ellipsis;
-	overflow: hidden;
 }
 
-.rc-table-td--users {
+.rc-directory-td--users {
 	width: 80px;
 }
 
 @media (width <= 500px) {
-	.rc-directory-content .rc-table-head {
-		display: none;
+	.rc-directory-content {
+		& th:not(:first-child),
+		& td:not(:first-child) {
+			display: none;
+		}
 	}
 
 	.rc-directory {

packages/rocketchat-theme/client/imports/components/table.css

@@ -1,38 +1,126 @@
 .rc-table {
-	font-size: 0.875rem;
-	color: var(--rc-color-primary);
 	width: 100%;
 
+	color: var(--rc-color-primary);
+
+	font-size: 0.875rem;
+
 	&--fixed {
-		table-layout:fixed;
+		table-layout: fixed;
 	}
 
-	&-head {
-		color: var(--rc-color-primary-light);
+	& tbody {
+		& tr {
+			cursor: pointer;
 
-		& .rc-icon {
-			fill: var(--rc-color-primary-light);
+			&:hover {
+				background-color: var(--rc-color-primary-lightest);
+			}
 		}
 	}
 
-	&-body .rc-table-tr {
-		cursor: pointer;
+	& th,
+	& td {
+		vertical-align: middle;
 
-		&:hover {
-			background-color: var(--rc-color-primary-lightest);
+		&.bold {
+			font-weight: 600;
 		}
 	}
 
-	&-tr {
-		box-shadow: 0 1px 2px 0 rgba(31, 35, 41, 0.08);
-	}
+	& th {
+		height: 0;
 
-	&-td {
-		padding: 1.25rem 1rem;
-		vertical-align: middle;
+		padding-top: 0;
+		padding-bottom: 0;
 
-		&--bold {
-			font-weight: 600;
+		white-space: nowrap;
+
+		color: transparent;
+
+		line-height: 0;
+
+		& > .rc-icon {
+			display: none;
 		}
 	}
+
+	& td {
+		padding: 0.25rem 0;
+
+		font-size: 0.75rem;
+		line-height: 1rem;
+
+		overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+	}
+}
+
+.table-wrapper {
+	position: relative;
+
+	height: 100%;
+}
+
+.table-content-wrapper {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	display: flex;
+	flex-direction: column;
+}
+
+.table-content {
+	display: flex;
+	flex-direction: column;
+
+	min-height: 0;
+	flex-grow: 1;
+}
+
+.table-scroll {
+	overflow: auto;
+
+	min-height: 0;
+
+	margin-top: 2rem;
+
+	border-top: 1px solid #d8d8d8;
+	flex-grow: 1;
+}
+
+.table-fake-th {
+	position: absolute;
+	display: flex;
+	top: 0;
+
+	padding: 0.5rem 0;
+
+	text-align: left;
+
+	color: var(--rc-color-primary-light);
+
+	font-size: 0.75rem;
+	font-weight: 400;
+	line-height: 1rem;
+
+	& .rc-icon {
+		fill: var(--rc-color-primary-light);
+	}
+}
+
+.table-tr-dummy {
+	height: 1rem;
+}
+
+.table-column-date {
+	overflow: hidden;
+	width: 120px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-transform: capitalize;
 }