From 3e5527b826568d7ffa902afe7737b53f84695f37 Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Mon, 5 Feb 2018 16:59:19 +0000
Subject: [PATCH] UX tweaks to tags/folders side bar entry

---
 services/web/app/views/project/list/side-bar.pug   | 13 +++++++------
 .../web/public/stylesheets/app/project-list.less   | 14 ++++----------
 .../public/stylesheets/core/_common-variables.less |  1 -
 .../web/public/stylesheets/core/ol-variables.less  |  1 -
 4 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/services/web/app/views/project/list/side-bar.pug b/services/web/app/views/project/list/side-bar.pug
index c1ffb6e30c..c4186a01d5 100644
--- a/services/web/app/views/project/list/side-bar.pug
+++ b/services/web/app/views/project/list/side-bar.pug
@@ -49,7 +49,11 @@
 			li(ng-class="{active: (filter == 'v1')}", ng-click="filterProjects('v1')")
 				a(href) #{translate("v1_projects")}
 		li.separator
-			h2 #{translate("folders")}
+			h2 #{translate("tags_slash_folders")}
+		li.tag(ng-cloak)
+			a.tag-name(href, ng-click="openNewTagModal()")
+				i.fa.fa-fw.fa-plus
+				span.name #{translate("new_folder")}
 		li.tag(
 			ng-repeat="tag in tags | orderBy:'name'",
 			ng-class="{active: tag.selected}",
@@ -96,12 +100,9 @@
 			ng-class="{active: filter === 'untagged'}",
 		) 	
 			a.tag-name(href)
-				| #{translate("uncategorized")}
+				span.name
+					| #{translate("uncategorized")}
 				span.subdued  ({{ nUntagged }})
-		li(ng-cloak)
-			a.tag(href, ng-click="openNewTagModal()")
-				i.fa.fa-fw.fa-plus
-				span.name #{translate("new_folder")}
 
 .row-spaced(ng-if="projects.length == 0", ng-cloak)
 	.first-project
diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less
index fc6777dea8..99506f7c93 100644
--- a/services/web/public/stylesheets/app/project-list.less
+++ b/services/web/public/stylesheets/app/project-list.less
@@ -203,18 +203,12 @@ ul.folders-menu {
 			}
 		}
 		&.untagged {
-			font-style: italic;
-			margin-bottom: @line-height-computed / 4;
-			a {
-				line-height: @folders-untagged-line-height;
-				&:hover,
-				&:focus {
-					text-decoration: none;
+			a.tag-name {
+				span.name {
+					font-style: italic;
+					padding-left: 0;
 				}
 			}
-			span.subdued {
-				font-style: normal;
-			}
 		}
 		&:hover {
 			&:not(.active) {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 8b666e7b58..d6d046eb0c 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -874,7 +874,6 @@
 @folders-tag-border-color      : @text-color;
 @folders-tag-menu-active-hover : darken(@brand-primary, 10%);
 @folders-tag-menu-hover        : @gray-light;
-@folders-untagged-line-height  : 1.7;
 
 // Progress bars
 @progress-border-radius        : @border-radius-base;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 53f4491aa1..71b6f0a083 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -164,7 +164,6 @@
 @folders-tag-border-color       : @folders-tag-menu-color;
 @folders-tag-menu-hover         : rgba(0, 0, 0, .1);
 @folders-tag-menu-active-hover  : rgba(0, 0, 0, .1);
-@folders-untagged-line-height   : @folders-menu-line-height;
 
 // Project table
 @structured-list-line-height    : 2.5;