Fix dashboard UI bugs and more (#14767)

This PR fixes a few UI bugs I spontaneously encountered:

- Fixes emojis in repo titles getting head-cut and tail-cut in dashboard feed due to introduction of 1.25 em emojis at 1 em line-height, by simply using the original 1 3/7 em value of `semantic.css`
- Fixes regression (too long repo names should be capped to 70%) in #13828 due to flex children not respecting properties like `overflow: hidden;`, and removes a block of dead style code
- Follow-up to #14761, removes extraneous code for top navbar and correct right margin for Font Awesome
- Fixes color emphasis inversion in arc-green theme for top right buttons (edit, delete) on commit view boxes

5 files changed, 10 insertions, 30 deletions

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index efab76f33c..def83d9726 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -173,7 +173,7 @@
 						<div class="divider"></div>
 
 						<a class="{{if .PageIsAdmin}}active{{end}} item" href="{{AppSubUrl}}/admin">
-							<i class="icon settings"></i>
+							{{svg "octicon-server"}}
 							{{.i18n.Tr "admin_panel"}}<!-- Admin Panel -->
 						</a>
 					{{end}}
diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl
index 9115c62ecd..1f619ea833 100644
--- a/templates/user/dashboard/repolist.tmpl
+++ b/templates/user/dashboard/repolist.tmpl
@@ -123,9 +123,9 @@
 				<ul class="repo-owner-name-list">
 					<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
 						<a class="repo-list-link df ac sb" :href="suburl + '/' + repo.full_name">
-							<div class="f1">
+							<div class="text truncate item-name f1">
 								<component v-bind:is="repoIcon(repo)" size="16"></component>
-								<strong class="text truncate item-name">${repo.full_name}</strong>
+								<strong>${repo.full_name}</strong>
 								<span v-if="repo.archived">
 									{{svg "octicon-archive" 16 "ml-2"}}
 								</span>
@@ -175,9 +175,9 @@
 				<ul class="repo-owner-name-list">
 					<li v-for="org in organizations">
 						<a class="repo-list-link df ac sb" :href="suburl + '/' + org.name">
-							<div class="f1">
+							<div class="text truncate item-name f1">
 								{{svg "octicon-organization" 16 "mr-2"}}
-								<strong class="text truncate item-name">${org.name}</strong>
+								<strong>${org.name}</strong>
 							</div>
 							<div class="text light grey df ac">
 								${org.num_repos}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 74455cee06..8c99fa4349 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -603,10 +603,6 @@ a.ui.card:hover,
     margin-right: 0;
   }
 
-  .svg {
-    margin-right: .75em;
-  }
-
   .searchbox {
     background-color: #f4f4f4 !important;
 
diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less
index d5fac494f1..c8659a92a1 100644
--- a/web_src/less/_dashboard.less
+++ b/web_src/less/_dashboard.less
@@ -98,8 +98,6 @@
       margin-left: .35rem;
     }
 
-    line-height: 1.2;
-
     > .ui.grid {
       margin-left: auto;
       margin-right: auto;
@@ -181,23 +179,8 @@
       margin-right: .25rem;
     }
 
-    .repo-owner-name-list {
-      .item-name {
-        max-width: 70%;
-        margin-bottom: -4px;
-      }
-    }
-
-    #collaborative-repo-list {
-      .owner-and-repo {
-        max-width: 80%;
-        margin-bottom: -5px;
-      }
-
-      .owner-name {
-        max-width: 120px;
-        margin-bottom: -5px;
-      }
+    .repo-owner-name-list .item-name {
+      max-width: 70%;
     }
   }
 }
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 88a1a38bb6..7273f5718d 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -383,7 +383,7 @@
             padding: 5px;
             margin-left: 5px;
             line-height: 1;
-            color: #767676;
+            color: var(--color-text);
             vertical-align: middle;
             background: transparent;
             border: 0;
@@ -399,7 +399,8 @@
           }
 
           .btn-octicon.disabled {
-            color: #bbbbbb;
+            color: inherit;
+            opacity: var(--opacity-disabled);
             cursor: default;
           }