Added variables to styles and computed property

app/assets/javascripts/boards/components/project_select.vue

@@ -111,7 +111,7 @@ export default {
           />
           <icon
             name="search"
-            class="search-icon"
+            class="dropdown-input-search"
             aria-hidden="true"
             data-hidden="true"
           />

app/assets/javascripts/environments/components/environment_item.vue

@@ -450,6 +450,14 @@ export default {
         this.canRetry
       );
     },
+
+    folderIconName() {
+      if (this.model.isOpen) {
+        return 'chevron-down';
+      }
+
+      return 'chevron-right';
+    },
   },
 
   methods: {
@@ -523,14 +531,7 @@ export default {
         @click="onClickFolder">
 
         <icon
-          v-show="model.isOpen"
-          name="chevron-down"
-          class="folder-icon"
-          aria-hidden="true"
-        />
-        <icon
-          v-show="!model.isOpen"
-          name="chevron-right"
+          :name="folderIconName"
           class="folder-icon"
           aria-hidden="true"
         />

app/assets/stylesheets/framework/blocks.scss

@@ -284,7 +284,7 @@
   .dismiss-button {
     position: absolute;
     right: 6px;
-    top: 12px;
+    top: $gl-btn-horz-padding;
     cursor: pointer;
     color: $blue-300;
     z-index: 1;

app/assets/stylesheets/framework/dropdowns.scss

@@ -147,8 +147,8 @@
 
   .ic-angle-down {
     position: absolute;
-    top: 8px;
-    right: 8px;
+    top: $gl-padding-8;
+    right: $gl-padding-8;
     color: $gray-darkest;
   }
 }

spec/javascripts/environments/environments_app_spec.js

@@ -172,9 +172,6 @@ describe('Environment', () => {
           expect(
             component.$el.querySelector('.folder-icon.ic-chevron-right').getAttribute('style'),
           ).toContain('display: none');
-          expect(
-            component.$el.querySelector('.folder-icon.ic-chevron-down').getAttribute('style'),
-          ).not.toContain('display: none');
           done();
         });
       }, 0);
@@ -193,9 +190,6 @@ describe('Environment', () => {
             expect(
               component.$el.querySelector('.folder-icon.ic-chevron-down').getAttribute('style'),
             ).toContain('display: none');
-            expect(
-              component.$el.querySelector('.folder-icon.ic-chevron-right').getAttribute('style'),
-            ).not.toContain('display: none');
             done();
           });
         });