1 files changed, 13 insertions, 22 deletions
diff --git a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
index 3b6b0a91e97..a7e6438a935 100644
--- a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
@@ -1,11 +1,5 @@
 <script>
-import {
-  GlIcon,
-  GlButton,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
-  GlFormGroup,
-} from '@gitlab/ui';
+import { GlIcon, GlButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range';
@@ -29,8 +23,8 @@ export default {
   components: {
     GlIcon,
     GlButton,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
     GlFormGroup,
     TooltipOnTruncate,
     DateTimePickerInput,
@@ -212,7 +206,7 @@ export default {
     placement="top"
     class="d-inline-block"
   >
-    <gl-deprecated-dropdown
+    <gl-dropdown
       ref="dropdown"
       :text="timeWindowText"
       v-bind="$attrs"
@@ -228,15 +222,15 @@ export default {
         <gl-icon class="gl-dropdown-caret" name="chevron-down" aria-hidden="true" />
       </template>
 
-      <div class="d-flex justify-content-between gl-p-2-deprecated-no-really-do-not-use-me">
+      <div class="d-flex justify-content-between gl-p-2">
         <gl-form-group
           v-if="customEnabled"
           :label="customLabel"
           label-for="custom-from-time"
-          label-class="gl-pb-1-deprecated-no-really-do-not-use-me"
-          class="custom-time-range-form-group col-md-7 gl-pl-1-deprecated-no-really-do-not-use-me gl-pr-0 m-0"
+          label-class="gl-pb-2"
+          class="custom-time-range-form-group col-md-7 gl-pl-2 gl-pr-0 m-0"
         >
-          <div class="gl-pt-2-deprecated-no-really-do-not-use-me">
+          <div class="gl-pt-3">
             <date-time-picker-input
               id="custom-time-from"
               v-model="startInput"
@@ -264,15 +258,12 @@ export default {
             </gl-button>
           </gl-form-group>
         </gl-form-group>
-        <gl-form-group
-          label-for="group-id-dropdown"
-          class="col-md-5 gl-pl-1-deprecated-no-really-do-not-use-me gl-pr-1-deprecated-no-really-do-not-use-me m-0"
-        >
+        <gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-px-2 m-0">
           <template #label>
-            <span class="gl-pl-5-deprecated-no-really-do-not-use-me">{{ __('Quick range') }}</span>
+            <span class="gl-pl-7">{{ __('Quick range') }}</span>
           </template>
 
-          <gl-deprecated-dropdown-item
+          <gl-dropdown-item
             v-for="(option, index) in options"
             :key="index"
             data-qa-selector="quick_range_item"
@@ -286,9 +277,9 @@ export default {
               :class="{ invisible: !isOptionActive(option) }"
             />
             {{ option.label }}
-          </gl-deprecated-dropdown-item>
+          </gl-dropdown-item>
         </gl-form-group>
       </div>
-    </gl-deprecated-dropdown>
+    </gl-dropdown>
   </tooltip-on-truncate>
 </template>