Migrate dashboard/environment_header.vue to use design tokens in icon

What does this MR do and why?

Migrates dashboard/environment_header.vue to variant in badge instead of using custom scss

References

Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before	After

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. apply this patch and then go to environments dashboard (http://127.0.0.1:3000/-/operations/environments)

Patch: environments_dashboard components update

--git a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue
index b1df12a65f2a..bff9f78dce77 100644
--- a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue
+++ b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue
@@ -77,6 +77,16 @@ export default {
          required: true,
        },
      },
+    data: () => ({
+      mock: [
+        {
+          environment_path: '/enivronment/1',
+          name: 'staging',
+          external_url: '[http://example.com](http://example.com)',
+          size: 14,
+        },
+      ],
+    }),
      computed: {
        ...mapState([
          'projects',
@@ -188,12 +198,12 @@ export default {
            </template>
          </page-heading>
   
-        <div v-if="projects.length">
+        <div v-if="true">
            <div v-for="project in projects" :key="project.id">
              <project-header :project="project" @remove="removeProject" />
              <div class="gl-grid gl-gap-5 md:gl-grid-cols-3">
                <environment
-                v-for="environment in project.environments"
+                v-for="environment in mock"
                  :key="environment.id"
                  :environment="environment"
                />
diff --git a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue
index efceb02c316d..0736d40c84e9 100644
--- a/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue
+++ b/ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment_header.vue
@@ -59,7 +59,7 @@ export default {
          >
            <span class="js-environment-name gl-font-bold"> {{ environment.name }}</span>
-        <gl-badge v-if="environment.within_folder" variant="neutral">{{ environment.size }}</gl-badge>
+        <gl-badge v-if="true" variant="neutral">{{ environment.size }}</gl-badge>
        </div>
        <gl-icon
          v-if="environment.within_folder"

Related to #510042 (closed)