Replace CSS with utility classes

app/assets/stylesheets/framework/variables.scss

@@ -868,9 +868,6 @@ $add-to-slack-popup-max-width: 400px;
 $add-to-slack-gif-max-width: 850px;
 $add-to-slack-well-max-width: 750px;
 $add-to-slack-logo-size: 100px;
-$double-headed-arrow-width: 100px;
-$double-headed-arrow-height: 25px;
-$right-arrow-size: 16px;
 
 /*
 Popup

app/assets/stylesheets/pages/profile.scss

@@ -443,20 +443,3 @@ table.u2f-registrations,
   width: 100%;
   max-width: $add-to-slack-popup-max-width;
 }
-
-.gitlab-slack-right-arrow svg {
-  fill: $white-dark;
-  width: $right-arrow-size;
-  height: $right-arrow-size;
-  vertical-align: text-bottom;
-}
-
-.gitlab-slack-double-headed-arrow {
-  vertical-align: text-top;
-
-  svg {
-    fill: $gray-darker;
-    width: $double-headed-arrow-width;
-    height: $double-headed-arrow-height;
-  }
-}

ee/app/assets/javascripts/add_gitlab_slack_application/components/add_gitlab_slack_application.vue

@@ -88,14 +88,9 @@ export default {
     <h1>{{ __('GitLab for Slack') }}</h1>
     <p>{{ __('Track your GitLab projects with GitLab for Slack.') }}</p>
 
-    <div
-      v-once
-      class="prepend-top-20 append-bottom-20 gl-display-flex gl-justify-content-center gl-align-items-center"
-    >
+    <div v-once class="gl-my-5 gl-display-flex gl-justify-content-center gl-align-items-center">
       <img :src="gitlabLogoPath" class="gitlab-slack-logo" />
-      <div class="gitlab-slack-double-headed-arrow inline prepend-left-20 append-right-20">
-        <gl-icon name="double-headed-arrow" :size="72" />
-      </div>
+      <gl-icon name="double-headed-arrow" :size="72" class="gl-mx-5 gl-text-gray-200" />
       <img :src="slackLogoPath" class="gitlab-slack-logo" />
     </div>
 
@@ -153,9 +148,7 @@ export default {
           >/gitlab &lt;project-alias&gt; issue show &lt;id&gt;</code
         >
         <span>
-          <div class="gitlab-slack-right-arrow inline gl-mr-2">
-            <gl-icon name="arrow-right" />
-          </div>
+          <gl-icon name="arrow-right" class="gl-mr-2 gl-text-gray-200" />
           Shows the issue with id <strong>&lt;id&gt;</strong>
         </span>