1 files changed, 9 insertions, 9 deletions
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
index 0ba58430de1..fbf19847e9d 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
@@ -3,7 +3,6 @@ import {
   GlAlert,
   GlButton,
   GlCollapse,
-  GlDeprecatedButton,
   GlFormCheckbox,
   GlFormCombobox,
   GlFormGroup,
@@ -39,7 +38,6 @@ export default {
     GlAlert,
     GlButton,
     GlCollapse,
-    GlDeprecatedButton,
     GlFormCheckbox,
     GlFormCombobox,
     GlFormGroup,
@@ -210,6 +208,7 @@ export default {
         v-model="key"
         :token-list="$options.tokenList"
         :label-text="__('Key')"
+        data-qa-selector="ci_variable_key_field"
       />
 
       <gl-form-group v-else :label="__('Key')" label-for="ci-variable-key">
@@ -242,7 +241,7 @@ export default {
         <gl-form-group
           :label="__('Type')"
           label-for="ci-variable-type"
-          class="w-50 append-right-15"
+          class="w-50 gl-mr-5"
           :class="{ 'w-100': isGroup }"
         >
           <gl-form-select id="ci-variable-type" v-model="variable_type" :options="typeOptions" />
@@ -339,24 +338,25 @@ export default {
       </gl-alert>
     </gl-collapse>
     <template #modal-footer>
-      <gl-deprecated-button @click="hideModal">{{ __('Cancel') }}</gl-deprecated-button>
-      <gl-deprecated-button
+      <gl-button @click="hideModal">{{ __('Cancel') }}</gl-button>
+      <gl-button
         v-if="variableBeingEdited"
         ref="deleteCiVariable"
-        category="secondary"
         variant="danger"
+        category="secondary"
         data-qa-selector="ci_variable_delete_button"
         @click="deleteVarAndClose"
-        >{{ __('Delete variable') }}</gl-deprecated-button
+        >{{ __('Delete variable') }}</gl-button
       >
-      <gl-deprecated-button
+      <gl-button
         ref="updateOrAddVariable"
         :disabled="!canSubmit"
         variant="success"
+        category="primary"
         data-qa-selector="ci_variable_save_button"
         @click="updateOrAddVariable"
         >{{ modalActionText }}
-      </gl-deprecated-button>
+      </gl-button>
     </template>
   </gl-modal>
 </template>