Dropdowns, Labels fixes and more CSS tweaks (#13733)

* Dropdowns and Labels fixes

- Rework dropdown, menu and label styles
- Improve issue sidebar milestone and label sections
- Fix archived repo and private org badge
- Move more colors to CSS vars
- Move issue number to end of title on issue page

* more dropdown fixes

* fix basic blue labels - fixes #13731

* improve class setting on svg

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

2 files changed, 31 insertions, 25 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index 85e1fb082c..cd353b15f2 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -517,20 +517,23 @@ function initCommentForm() {
           $(this).data('id'),
         ).then(reload);
       }
-      switch (input_id) {
-        case '#milestone_id':
-          $list.find('.selected').html(`<a class="item" href=${$(this).data('href')}>${
-            htmlEscape($(this).text())}</a>`);
-          break;
-        case '#project_id':
-          $list.find('.selected').html(`<a class="item" href=${$(this).data('href')}>${
-            htmlEscape($(this).text())}</a>`);
-          break;
-        case '#assignee_id':
-          $list.find('.selected').html(`<a class="item" href=${$(this).data('href')}>` +
-                        `<img class="ui avatar image" src=${$(this).data('avatar')}>${
-                          htmlEscape($(this).text())}</a>`);
+
+      let icon = '';
+      if (input_id === '#milestone_id') {
+        icon = svg('octicon-milestone', 18, 'mr-3');
+      } else if (input_id === '#project_id') {
+        icon = svg('octicon-project', 18, 'mr-3');
+      } else if (input_id === '#assignee_id') {
+        icon = `<img class="ui avatar image mr-3" src=${$(this).data('avatar')}>`;
       }
+
+      $list.find('.selected').html(`
+        <a class="item muted sidebar-item-link" href=${$(this).data('href')}>
+          ${icon}
+          ${htmlEscape($(this).text())}
+        </a>
+      `);
+
       $(`.ui${select_id}.list .no-select`).addClass('hide');
       $(input_id).val($(this).data('id'));
     });
@@ -3324,7 +3327,7 @@ function initTopicbar() {
 
           const last = viewDiv.children('a').last();
           for (let i = 0; i < topicArray.length; i++) {
-            const link = $('<a class="ui repo-topic small label topic"></a>');
+            const link = $('<a class="ui repo-topic large label topic"></a>');
             link.attr('href', `${AppSubUrl}/explore/repos?q=${encodeURIComponent(topicArray[i])}&topic=1`);
             link.text(topicArray[i]);
             link.insertBefore(last);
diff --git a/web_src/js/svg.js b/web_src/js/svg.js
index ee0b576c31..b7d8c75350 100644
--- a/web_src/js/svg.js
+++ b/web_src/js/svg.js
@@ -6,7 +6,9 @@ import octiconIssueClosed from '../../public/img/svg/octicon-issue-closed.svg';
 import octiconIssueOpened from '../../public/img/svg/octicon-issue-opened.svg';
 import octiconLink from '../../public/img/svg/octicon-link.svg';
 import octiconLock from '../../public/img/svg/octicon-lock.svg';
+import octiconMilestone from '../../public/img/svg/octicon-milestone.svg';
 import octiconMirror from '../../public/img/svg/octicon-mirror.svg';
+import octiconProject from '../../public/img/svg/octicon-project.svg';
 import octiconRepo from '../../public/img/svg/octicon-repo.svg';
 import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg';
 import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg';
@@ -20,7 +22,9 @@ export const svgs = {
   'octicon-issue-opened': octiconIssueOpened,
   'octicon-link': octiconLink,
   'octicon-lock': octiconLock,
+  'octicon-milestone': octiconMilestone,
   'octicon-mirror': octiconMirror,
+  'octicon-project': octiconProject,
   'octicon-repo': octiconRepo,
   'octicon-repo-forked': octiconRepoForked,
   'octicon-repo-template': octiconRepoTemplate,
@@ -29,16 +33,15 @@ export const svgs = {
 const parser = new DOMParser();
 const serializer = new XMLSerializer();
 
-// retrieve a HTML string for given SVG icon name and size in pixels
-export function svg(name, size = 16) {
-  if (name in svgs) {
-    if (size === 16) return svgs[name];
+// retrieve a HTML string for given SVG icon name, size and additional classes
+export function svg(name, size = 16, className = '') {
+  if (!(name in svgs)) return '';
+  if (size === 16 && !className) return svgs[name];
 
-    const document = parser.parseFromString(svgs[name], 'image/svg+xml');
-    const svgNode = document.firstChild;
-    svgNode.setAttribute('width', String(size));
-    svgNode.setAttribute('height', String(size));
-    return serializer.serializeToString(svgNode);
-  }
-  return '';
+  const document = parser.parseFromString(svgs[name], 'image/svg+xml');
+  const svgNode = document.firstChild;
+  if (size !== 16) svgNode.setAttribute('width', String(size));
+  if (size !== 16) svgNode.setAttribute('height', String(size));
+  if (className) svgNode.classList.add(...className.split(/\s+/));
+  return serializer.serializeToString(svgNode);
 }