Update outdated label to use Fomantic UI style (#13181)

* Update outdated label to use Fomantic UI style

* Use native labels rather than custom style

* Remove leading zero

Co-authored-by: zeripath <[email protected]>

Author: ivanvc

templates/repo/diff/comments.tmpl

@@ -21,11 +21,11 @@
 			<div class="ui right actions">
 			{{if and .Review}}
 				{{if eq .Review.Type 0}}
-					<div class="item tag review pending">
+					<div class="ui label basic small yellow">
 					{{$.root.i18n.Tr "repo.issues.review.pending"}}
 					</div>
 				{{else}}
-					<div class="item tag review">
+					<div class="ui label basic small">
 					{{$.root.i18n.Tr "repo.issues.review.review"}}
 					</div>
 				{{end}}

templates/repo/issue/view_content.tmpl

@@ -41,7 +41,7 @@
 						{{if not $.Repository.IsArchived}}
 							<div class="ui right actions">
 								{{if gt .Issue.ShowTag 0}}
-									<div class="item tag">
+									<div class="ui basic label">
 										{{if eq .Issue.ShowTag 2}}
 											{{$.i18n.Tr "repo.issues.collaborator"}}
 										{{else if eq .Issue.ShowTag 3}}

templates/repo/issue/view_content/comments.tmpl

@@ -28,12 +28,12 @@
 					{{if not $.Repository.IsArchived}}
 						<div class="ui right actions">
 							{{if eq .PosterID .Issue.PosterID }}
-								<div class="item tag">
+								<div class="ui basic label">
 									{{$.i18n.Tr "repo.issues.poster"}}
 								</div>
 							{{end}}
 							{{if gt .ShowTag 0}}
-								<div class="item tag">
+								<div class="ui basic label">
 									{{if eq .ShowTag 2}}
 										{{$.i18n.Tr "repo.issues.collaborator"}}
 									{{else if eq .ShowTag 3}}
@@ -460,7 +460,7 @@
 								{{end}}
 								<a href="{{(index $comms 0).CodeCommentURL}}" class="file-comment">{{$filename}}</a>
 								{{if $invalid }}
-									<span class="tag">
+									<span class="ui label basic small yellow">
 										{{$.i18n.Tr "repo.issues.review.outdated"}}
 									</span>
 								{{end}}

web_src/less/_repository.less

@@ -953,22 +953,6 @@
 
       .comment {
 
-        .tag {
-          color: #767676;
-          margin-top: 3px;
-          padding: 2px 5px;
-          font-size: 12px;
-          border: 1px solid rgba(0, 0, 0, .1);
-          border-radius: 3px;
-          &.review {
-            margin-left: 5px;
-            &.pending {
-              color: black;
-              background-color: #fffbb2;
-            }
-          }
-        }
-
         .actions {
           .item {
             float: left;
@@ -1005,7 +989,7 @@
           > .header {
             #avatar-arrow;
             font-weight: normal;
-            padding: auto 15px;
+            padding: .5rem 1rem;
             position: relative;
             color: #767676;
             background-color: #f7f7f7;
@@ -1032,6 +1016,10 @@
               display: flex;
               padding: 0 .5rem;
 
+              &.right {
+                margin: 0;
+              }
+
               a {
                 color: rgba(0, 0, 0, .4);
 
@@ -1226,16 +1214,10 @@
           .hide-outdated {
             display: block;
           }
-        }
 
-        .tag {
-          color: black;
-          margin: 3px 0 0 5px;
-          padding: 2px 5px;
-          font-size: 12px;
-          border: 1px solid rgba(0, 0, 0, .1);
-          border-radius: 3px;
-          background-color: #fffbb2;
+          .label {
+            margin-left: 6px;
+          }
         }
       }
     }

web_src/less/themes/theme-arc-green.less

@@ -618,7 +618,8 @@ footer {
 .ui.label,
 .ui.label.basic {
   color: #dbdbdb;
-  background-color: #2a2e39;
+  border-color: rgb(152, 152, 152);
+  background-color: #2a2e39 !important;
 }
 
 .issue.list > .item .title {
@@ -1121,11 +1122,6 @@ a.ui.basic.green.label:hover {
   color: #9e9e9e;
 }
 
-.repository.view.issue .comment-list .comment .tag {
-  color: #dbdbdb;
-  border-color: rgb(152, 152, 152);
-}
-
 .repository.view.issue .comment-list .timeline-item .badge.badge-commit {
   background: radial-gradient(#383c4a 40%, transparent 40%) no-repeat;
 }