Replace fa-circle in runners helper

app/assets/stylesheets/pages/runners.scss

@@ -12,16 +12,18 @@
   }
 }
 
-.runner-status-online {
-  color: $green-600;
-}
+.runner-status {
+  &.runner-status-online {
+    background-color: $green-600;
+  }
 
-.runner-status-offline {
-  color: $gray-darkest;
-}
+  &.runner-status-offline {
+    background-color: $gray-darkest;
+  }
 
-.runner-status-paused {
-  color: $red-500;
+  &.runner-status-paused {
+    background-color: $red-500;
+  }
 }
 
 .runner {

app/helpers/ci/runners_helper.rb

@@ -8,14 +8,14 @@ module Ci
       status = runner.status
       case status
       when :not_connected
-        content_tag(:span, title: "New runner. Has not connected yet") do
+        content_tag(:span, title: _("New runner. Has not connected yet")) do
           sprite_icon("warning-solid", size: 24, css_class: "gl-vertical-align-bottom!")
         end
 
       when :online, :offline, :paused
-        content_tag :i, nil,
-                    class: "fa fa-circle runner-status-#{status}",
-                    title: "Runner is #{status}, last contact was #{time_ago_in_words(runner.contacted_at)} ago"
+        content_tag :span, nil,
+                    class: "gl-display-inline-block gl-avatar gl-avatar-s16 gl-avatar-circle runner-status runner-status-#{status}",
+                    title: _("Runner is %{status}, last contact was %{runner_contact} ago") % { status: status, runner_contact: time_ago_in_words(runner.contacted_at) }
       end
     end
 

changelogs/unreleased/mw-replace-fa-circle-in-runners-helper.yml

+---
+title: Replace fa-cirlce in runners helper
+merge_request: 48981
+author:
+type: changed

locale/gitlab.pot

@@ -18406,6 +18406,9 @@ msgstr ""
 msgid "New response for issue #%{issue_iid}:"
 msgstr ""
 
+msgid "New runner. Has not connected yet"
+msgstr ""
+
 msgid "New runners registration token has been generated!"
 msgstr ""
 
@@ -23499,6 +23502,9 @@ msgstr ""
 msgid "Runner cannot be assigned to other projects"
 msgstr ""
 
+msgid "Runner is %{status}, last contact was %{runner_contact} ago"
+msgstr ""
+
 msgid "Runner runs jobs from all unassigned projects"
 msgstr ""