Update Runner UI badges

What does this MR do and why?

This change updates runner UI badges to use more relevant icons and colors, as well as updated labels.

This change is part of #343133 (closed), and it's complemented by a change in the layout at !95617 (merged), but it's issued separately.

Screenshots or screen recordings

before	after

How to set up and validate locally

Changes are visible in the Admin -> Runners area and Group -> Runners

1. Visit Admin -> Runners
2. Check the layout with then new badges
3. Select any runner
4. Check the layout with then new badges

---

1. Visit any group -> CI/CD -> Runners
2. Check the layout with then new badges
3. Select any runner
4. Check the layout with then new badges

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #343133 (closed)

spec/frontend/runner/components/cells/runner_stacked_summary_cell_spec.js

@@ -6,7 +6,7 @@ import RunnerTags from '~/runner/components/runner_tags.vue';
 import RunnerSummaryField from '~/runner/components/cells/runner_summary_field.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
-import { INSTANCE_TYPE, PROJECT_TYPE } from '~/runner/constants';
+import { INSTANCE_TYPE, I18N_INSTANCE_TYPE, PROJECT_TYPE } from '~/runner/constants';
 
 import { allRunnersData } from '../../mock_data';
 
@@ -69,7 +69,7 @@ describe('RunnerTypeCell', () => {
       locked: true,
     });
 
-    expect(wrapper.text()).toContain('shared');
+    expect(wrapper.text()).toContain(I18N_INSTANCE_TYPE);
   });
 
   it('Displays the runner version', () => {