Align epics and roadmap empty state buttons to the center

- For future reference see gitlab-ce#37867.

ee/app/assets/javascripts/roadmap/components/epics_list_empty.vue

@@ -109,6 +109,7 @@ export default {
       <div class="text-content">
         <h4>{{ message }}</h4>
         <p v-html="subMessage"></p>
+        <div class="text-center">
           <new-epic
             v-if="!hasFiltersApplied"
             :endpoint="newEpicEndpoint"
@@ -123,4 +124,5 @@ export default {
         </div>
       </div>
     </div>
+  </div>
 </template>

ee/app/views/shared/empty_states/_epics.html.haml

@@ -16,5 +16,6 @@
           = _('To widen your search, change or remove filters.')
         - else
           = _('Track groups of issues that share a theme, across projects and milestones')
+      .text-center
         - if can?(current_user, :create_epic, @group)
           #new-epic-app{ data: { endpoint: request.url } }

ee/app/views/shared/empty_states/_roadmap.html.haml

@@ -8,6 +8,7 @@
         = _('The roadmap shows the progress of your epics along a timeline')
       %p
         = _('To view the roadmap, add a planned start or finish date to one of your epics in this group or its subgroups. Only epics in the past 3 months and the next 3 months are shown.')
+      .text-center
         - if can?(current_user, :create_epic, @group)
           #new-epic-app{ data: { endpoint: request.url } }
         = link_to group_epics_path(@group), title: 'List', class: 'btn' do

ee/changelogs/unreleased/align-epics-empty-state-buttons.yml

+---
+title: Align epics and roadmap empty state buttons to the center
+merge_request: 7358
+author: George Tsiolis
+type: fixed