Update UI for topics labels on projects (#6639)

Author: MayMeow

public/css/index.css

@@ -2775,7 +2775,7 @@ function initTopicbar() {
 
                     var last = viewDiv.children("a").last();
                     for (var i=0; i < topicArray.length; i++) {
-                        $('<div class="ui green basic label topic" style="cursor:pointer;">'+topicArray[i]+'</div>').insertBefore(last)
+                        $('<div class="ui small label topic" style="cursor:pointer;">'+topicArray[i]+'</div>').insertBefore(last)
                     }
                 }
                 editDiv.css('display', 'none');
@@ -2817,7 +2817,7 @@ function initTopicbar() {
             basic: true,
         },
         className: {
-            label: 'ui green basic label'
+            label: 'ui small label'
         },
         apiSettings: {
             url: suburl + '/api/v1/topics/search?q={query}',

public/js/index.js

@@ -47,6 +47,9 @@
             font-size: 12px;
             color: #808080;
         }
+        .ui.tags {
+            margin-bottom: 1em;
+        }
     }
 }
 

public/less/_explore.less

@@ -24,9 +24,9 @@
 			</div>
 			{{if .DescriptionHTML}}<p class="has-emoji">{{.DescriptionHTML}}</p>{{end}}
 			{{if .Topics }}
-				<div>
+				<div class="ui tags">
 				{{range .Topics}}
-					{{if ne . "" }}<a href="{{AppSubUrl}}/explore/repos?q={{.}}&topic=1"><div class="ui green basic label topic">{{.}}</div></a>{{end}}
+					{{if ne . "" }}<a href="{{AppSubUrl}}/explore/repos?q={{.}}&topic=1"><div class="ui small label topic">{{.}}</div></a>{{end}}
 				{{end}}
 				</div>
 			{{end}}

templates/explore/repo_list.tmpl

@@ -24,7 +24,7 @@
 			{{end}}
 		</div>
 		<div class="ui" id="repo-topics">
-		{{range .Topics}}<a class="ui repo-topic green basic label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
+		{{range .Topics}}<a class="ui repo-topic small label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
 		</div>
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
@@ -34,7 +34,7 @@
 					<div class="ui fluid multiple search selection dropdown">
 						<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if lt (Add $i 1) (len $.Topics)}},{{end}}{{end}}">
 						{{range .Topics}}
-						<div class="ui green basic label topic transition visible" data-value="{{.Name}}" style="display: inline-block !important; cursor: default;">{{.Name}}<i class="delete icon"></i></div>
+						<div class="ui small label topic transition visible" data-value="{{.Name}}" style="display: inline-block !important; cursor: default;">{{.Name}}<i class="delete icon"></i></div>
 						{{end}}
 						<div class="text"></div>
 					</div>