Improve the branch selector tab UI (#26631)

Author: wxiaoguang

Diff for: web_src/css/repo.css

@@ -1255,8 +1255,8 @@
   color: var(--color-text-light-2);
 }
 
-.repository .filter.dropdown .menu {
-  margin-top: 1px !important;
+.repository .ui.dropdown.filter > .menu {
+  margin-top: 1px;
 }
 
 .repository.branches .commit-divergence .bar-group {

Diff for: web_src/js/components/RepoBranchTagSelector.vue

@@ -16,26 +16,15 @@
         <i class="icon"><svg-icon name="octicon-filter" :size="16"/></i>
         <input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
       </div>
-      <template v-if="showBranchesInDropdown">
-        <div class="header branch-tag-choice">
-          <div class="ui grid">
-            <div class="two column row">
-              <a class="reference column" href="#" @click="handleTabSwitch('branches')">
-                <span class="text" :class="{black: mode === 'branches'}">
-                  <svg-icon name="octicon-git-branch" :size="16" class-name="gt-mr-2"/>{{ textBranches }}
-                </span>
-              </a>
-              <template v-if="!noTag">
-                <a class="reference column" href="#" @click="handleTabSwitch('tags')">
-                  <span class="text" :class="{black: mode === 'tags'}">
-                    <svg-icon name="octicon-tag" :size="16" class-name="gt-mr-2"/>{{ textTags }}
-                  </span>
-                </a>
-              </template>
-            </div>
-          </div>
-        </div>
-      </template>
+      <div v-if="showBranchesInDropdown" class="branch-tag-tab">
+        <a class="branch-tag-item muted" :class="{active: mode === 'branches'}" href="#" @click="handleTabSwitch('branches')">
+          <svg-icon name="octicon-git-branch" :size="16" class-name="gt-mr-2"/>{{ textBranches }}
+        </a>
+        <a v-if="!noTag" class="branch-tag-item muted" :class="{active: mode === 'tags'}" href="#" @click="handleTabSwitch('tags')">
+          <svg-icon name="octicon-tag" :size="16" class-name="gt-mr-2"/>{{ textTags }}
+        </a>
+      </div>
+      <div class="branch-tag-divider"/>
       <div class="scrolling menu" ref="scrollContainer">
         <svg-icon name="octicon-rss" symbol-id="svg-symbol-octicon-rss"/>
         <div class="loading-indicator is-loading" v-if="isLoading"/>
@@ -327,9 +316,37 @@ export default sfc; // activate IDE's Vue plugin
 </script>
 
 <style scoped>
+.branch-tag-tab {
+  padding: 0 10px;
+}
+
+.branch-tag-item {
+  display: inline-block;
+  padding: 10px;
+  border: 1px solid transparent;
+  border-bottom: none;
+}
+
+.branch-tag-item.active {
+  border-color: var(--color-secondary);
+  background: var(--color-menu);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
+.branch-tag-divider {
+  margin-top: -1px !important;
+  border-top: 1px solid var(--color-secondary);
+}
+
+.scrolling.menu {
+  border-top: none !important;
+}
+
 .menu .item .rss-icon {
   display: none; /* only show RSS icon on hover */
 }
+
 .menu .item:hover .rss-icon {
   display: inline-block;
 }