Update action status badge layout (#34018)

The current action status badge are looking different from most other
badges renders, which is especially noticeable when using them along
with other badges. This PR updates the action badges to match the
commonly used badges from other providers.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

templates/devtest/badge-actions-svg.tmpl

@@ -0,0 +1,18 @@
+{{template "devtest/devtest-header"}}
+<div class="page-content devtest ui container">
+	<div>
+		<h1>Actions SVG</h1>
+		<form class="tw-my-3">
+			{{range $fontName := .BadgeFontFamilyNames}}
+				<label><input name="font" type="radio" value="{{$fontName}}" {{Iif (eq $.SelectedFontFamilyName $fontName) "checked"}}>{{$fontName}}</label>
+			{{end}}
+			<button>submit</button>
+		</form>
+		<div class="flex-text-block tw-flex-wrap">
+		{{range $badgeSVG := .BadgeSVGs}}
+			<div>{{$badgeSVG}}</div>
+		{{end}}
+		</div>
+	</div>
+</div>
+{{template "devtest/devtest-footer"}}

templates/shared/actions/runner_badge.tmpl

@@ -1,25 +1,27 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{.Badge.Width}}" height="18"
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{.Badge.Width}}" height="20"
 	role="img" aria-label="{{.Badge.Label.Text}}: {{.Badge.Message.Text}}">
 	<title>{{.Badge.Label.Text}}: {{.Badge.Message.Text}}</title>
-	<linearGradient id="s" x2="0" y2="100%">
-		<stop offset="0" stop-color="#fff" stop-opacity=".7" />
-		<stop offset=".1" stop-color="#aaa" stop-opacity=".1" />
-		<stop offset=".9" stop-color="#000" stop-opacity=".3" />
-		<stop offset="1" stop-color="#000" stop-opacity=".5" />
+	<linearGradient id="{{.Badge.IDPrefix}}s" x2="0" y2="100%">
+		<stop offset="0" stop-color="#bbb" stop-opacity=".1" />
+		<stop offset="1" stop-opacity=".1" />
 	</linearGradient>
-	<clipPath id="r">
-		<rect width="{{.Badge.Width}}" height="18" rx="4" fill="#fff" />
+	<clipPath id="{{.Badge.IDPrefix}}r">
+		<rect width="{{.Badge.Width}}" height="20" rx="3" fill="#fff" />
 	</clipPath>
-	<g clip-path="url(#r)">
-		<rect width="{{.Badge.Label.Width}}" height="18" fill="#555" />
-		<rect x="{{.Badge.Label.Width}}" width="{{.Badge.Message.Width}}" height="18" fill="{{.Badge.Color}}" />
-		<rect width="{{.Badge.Width}}" height="18" fill="url(#s)" />
+	<g clip-path="url(#{{.Badge.IDPrefix}}r)">
+		<rect width="{{.Badge.Label.Width}}" height="20" fill="#555" />
+		<rect x="{{.Badge.Label.Width}}" width="{{.Badge.Message.Width}}" height="20" fill="{{.Badge.Color}}" />
+		<rect width="{{.Badge.Width}}" height="20" fill="url(#{{.Badge.IDPrefix}}s)" />
+	</g>
+	<g fill="#fff" text-anchor="middle" font-family="{{.Badge.FontFamily}}"
+		text-rendering="geometricPrecision" font-size="{{.Badge.FontSize}}">
+		<text aria-hidden="true" x="{{.Badge.Label.X}}" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)"
+			textLength="{{.Badge.Label.TextLength}}">{{.Badge.Label.Text}}</text>
+		<text x="{{.Badge.Label.X}}" y="140"
+			transform="scale(.1)" fill="#fff" textLength="{{.Badge.Label.TextLength}}">{{.Badge.Label.Text}}</text>
+		<text aria-hidden="true" x="{{.Badge.Message.X}}" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)"
+			textLength="{{.Badge.Message.TextLength}}">{{.Badge.Message.Text}}</text>
+		<text x="{{.Badge.Message.X}}" y="140" transform="scale(.1)" fill="#fff"
+			textLength="{{.Badge.Message.TextLength}}">{{.Badge.Message.Text}}</text>
 	</g>
-	<g fill="#fff" text-anchor="middle" font-family="Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision"
-		font-size="{{.Badge.FontSize}}"><text aria-hidden="true" x="{{.Badge.Label.X}}" y="140" fill="#010101" fill-opacity=".3"
-			transform="scale(.1)" textLength="{{.Badge.Label.TextLength}}">{{.Badge.Label.Text}}</text><text x="{{.Badge.Label.X}}" y="130"
-			transform="scale(.1)" fill="#fff" textLength="{{.Badge.Label.TextLength}}">{{.Badge.Label.Text}}</text><text aria-hidden="true"
-			x="{{.Badge.Message.X}}" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)"
-			textLength="{{.Badge.Message.TextLength}}">{{.Badge.Message.Text}}</text><text x="{{.Badge.Message.X}}" y="130" transform="scale(.1)"
-			fill="#fff" textLength="{{.Badge.Message.TextLength}}">{{.Badge.Message.Text}}</text></g>
 </svg>