UI: Repo header tweaks (#5945)

* UI: Repo header tweaks

- Use basic buttons on the header buttons, matching gogs
- Make 'Manage topic' text smaller, remove margin-left with no topics
present
- Move various inline styles to CSS
- Use flexbox on header title and buttons

* fix indentation

* reverse media query wrapping

* fix inconsisten whitespace

2 files changed, 34 insertions, 7 deletions

diff --git a/public/less/_base.less b/public/less/_base.less
index d7cc518175..a48751ef30 100644
--- a/public/less/_base.less
+++ b/public/less/_base.less
@@ -12,6 +12,9 @@ img {
 table {
     border-collapse: collapse;
 }
+a {
+    cursor: pointer;
+}
 .rounded {
     border-radius: .28571429rem !important;
 }
diff --git a/public/less/_repository.less b/public/less/_repository.less
index 3d590fad1d..5973932e1b 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -48,7 +48,6 @@
         display: flex;
         justify-content: space-between;
         .ui.label {
-            margin-top: -2px;
             margin-left: 7px;
             padding: 3px 5px;
         }
@@ -1836,15 +1835,40 @@ tbody.commit-list {
 }
 
 #topic_edit {
-    margin-top:5px;
+    margin-top: 5px;
 }
 
-#repo-topic {
+#repo-topics {
     margin-top: 5px;
 }
 
-.new-dependency-drop-list {
-	@media only screen and (max-width: 768px) {
-		width: 100%;
-	}
+.repo-topic {
+    cursor: pointer;
+}
+
+@media only screen and (max-width: 768px) {
+    .new-dependency-drop-list {
+        width: 100%;
+    }
+}
+
+#manage_topic {
+    font-size: 12px;
+}
+
+.label + #manage_topic {
+    margin-left: 5px;
+}
+
+.repo-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.repo-header .repo-title,
+.repo-header .repo-buttons {
+    display: flex;
+    align-items: center;
 }