From 1b6829eed68d7c4d80d4e4fafa00e22ae1f20aad Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 26 Sep 2017 13:49:46 +0100
Subject: [PATCH] Style the project list table.

---
 .../public/stylesheets/app/project-list.less  | 58 +++++++++++--------
 .../stylesheets/core/_common-variables.less   |  3 +
 .../public/stylesheets/core/ol-variables.less |  3 +
 3 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less
index 39d7cf9069..b210b93477 100644
--- a/services/web/public/stylesheets/app/project-list.less
+++ b/services/web/public/stylesheets/app/project-list.less
@@ -222,38 +222,42 @@ ul.structured-list {
 	overflow: hidden;
 	overflow-y: auto;
 	li {
-		border-bottom: 1px solid @gray-lightest;
+		border-bottom: 1px solid @structured-list-border-color;
 		padding: (@line-height-computed / 4) 0;
-		&:first-child {
-			.header {
-				font-size: 1rem;
-			}
-		}
+		// &:first-child {
+		// 	.header {
+		// 		font-size: 1rem;
+		// 	}
+		// }
 		&:last-child {
 			border-bottom: 0 none;
 		}
 		&:hover {
-			background-color: @gray-lightest;
+			background-color: @structured-list-hover-color;
 		}
-		&:first-child:hover {
-			background-color: white;
+		&:first-child {
+			border-bottom-color: @structured-header-border-color;
+			&:hover {
+				background-color: transparent;
+			}
 		}
 		a {
 			color: @structured-list-link-color;
 		}
 		.header {
-			text-transform: uppercase;
+			font-weight: 600;
 		}
 		.select-item, .select-all {
 			display: inline-block;
+			margin: 0 (@line-height-computed / 4);
 		}
-		.select-item, .select-all {
-			position: absolute;
-			left: @line-height-computed;
-		}
+		// .select-item, .select-all {
+		// 	position: absolute;
+		// 	left: @line-height-computed;
+		// }
 		.select-item + span, .select-all + span {
 			display: inline-block;
-			padding-left: @line-height-computed * 1.5;
+			padding-left: (@line-height-computed / 4);
 			max-width: 100%;
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -262,17 +266,23 @@ ul.structured-list {
 	}
 }
 
+.project-list-card {
+	padding: 0 (@line-height-computed / 4);
+}
+
 ul.project-list {
 	li {
-		.last-modified, .owner {
-			font-size: .8rem;
-		}
-		.owner {
-			margin-right: 0;
-		}
-		.projectName {
-			margin-right: @line-height-computed / 4;
-		}
+		line-height: 3;
+		padding: 0;
+		// .last-modified, .owner {
+		// 	font-size: .8rem;
+		// }
+		// .owner {
+		// 	margin-right: 0;
+		// }
+		// .projectName {
+		// 	margin-right: @line-height-computed / 4;
+		// }
 		.tag-label {
 			margin-left: @line-height-computed / 4;
 			position: relative;
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 49ad90b399..80454ce594 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -801,6 +801,9 @@
 @card-box-shadow: 0 2px 4px rgba(0,0,0,0.15);
 
 @structured-list-link-color: darken(@blue, 10%);
+@structured-header-border-color: @gray-lightest;
+@structured-list-border-color: @gray-lightest;
+@structured-list-hover-color: @gray-lightest;
 
 @sidebar-bg: transparent;
 @sidebar-link-color: #333;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 3befa66283..b6fcf39eed 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -79,6 +79,9 @@
 
 // Project table
 @structured-list-link-color     : @ol-blue;
+@structured-header-border-color : shade(@ol-blue-gray-1, 5%);
+@structured-list-border-color   : @ol-blue-gray-1;
+@structured-list-hover-color    : lighten(@ol-blue-gray-1, 5%);
 
 //== Colors
 //