diff --git a/app/assets/javascripts/members/components/action_buttons/action_button_group.vue b/app/assets/javascripts/members/components/action_buttons/action_button_group.vue
index 4dc008e43afe5646faca47b3cb497d63e5a6c2b4..29d19b4cf699a887dbc83c3627292521603df389 100644
--- a/app/assets/javascripts/members/components/action_buttons/action_button_group.vue
+++ b/app/assets/javascripts/members/components/action_buttons/action_button_group.vue
@@ -5,7 +5,7 @@ export default {
</script>
<template>
- <div class="gl-display-flex gl-align-items-center gl-justify-content-end -gl-mx-1">
+ <div class="-gl-mx-1 gl-flex gl-items-center gl-justify-end">
<slot></slot>
</div>
</template>
diff --git a/app/assets/javascripts/members/components/avatars/user_avatar.vue b/app/assets/javascripts/members/components/avatars/user_avatar.vue
index 98453aa364f66396a003418d02ec89170efec9ac..087ebab126925c9de1065cae850523b37d33df17 100644
--- a/app/assets/javascripts/members/components/avatars/user_avatar.vue
+++ b/app/assets/javascripts/members/components/avatars/user_avatar.vue
@@ -85,7 +85,7 @@ export default {
>
<template #meta>
<div v-if="isUserBusy" class="gl-p-1">
- <span class="gl-text-gray-500 gl-font-sm gl-font-normal">({{ $options.i18n.busy }})</span>
+ <span class="gl-text-sm gl-font-normal gl-text-gray-500">({{ $options.i18n.busy }})</span>
</div>
<div v-if="statusEmoji" class="gl-p-1">
<span
diff --git a/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue b/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue
index e4c87cb9f54527839da9f5ce8ca64f3e53f6bb13..f39aff768274de620c070b0e7ec00ee08d6e1e9e 100644
--- a/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue
+++ b/app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue
@@ -29,7 +29,7 @@ export default {
<template>
<div v-if="showContainer" class="gl-bg-gray-10 gl-p-3 md:gl-flex">
- <members-filtered-search-bar v-if="filteredSearchBar.show" class="gl-p-3 gl-flex-grow-1" />
- <sort-dropdown v-if="showSortDropdown" class="gl-p-3 gl-flex-shrink-0" />
+ <members-filtered-search-bar v-if="filteredSearchBar.show" class="gl-grow gl-p-3" />
+ <sort-dropdown v-if="showSortDropdown" class="gl-shrink-0 gl-p-3" />
</div>
</template>
diff --git a/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue b/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
index 3cb3a14e51ad48ee8505c63dde00645354621e3d..298b8286b10e4d9091fb013d546aafa6f8d6efeb 100644
--- a/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
+++ b/app/assets/javascripts/members/components/filter_sort/sort_dropdown.vue
@@ -77,7 +77,7 @@ export default {
<template>
<gl-sorting
- class="gl-display-flex"
+ class="gl-flex"
dropdown-class="gl-w-full"
block
data-testid="members-sort-dropdown"
diff --git a/app/assets/javascripts/members/components/members_tabs.vue b/app/assets/javascripts/members/components/members_tabs.vue
index 1f53354fcb28b23b4663013d4a01403aeb2cb741..b0f3a5ffffcfb7d3e4b11cad753e62cc007f27d7 100644
--- a/app/assets/javascripts/members/components/members_tabs.vue
+++ b/app/assets/javascripts/members/components/members_tabs.vue
@@ -112,7 +112,7 @@ export default {
<template #tabs-end>
<gl-button
v-if="shouldShowExportButton"
- class="gl-align-self-center gl-ml-auto"
+ class="gl-ml-auto gl-self-center"
icon="export"
:href="exportCsvPath"
>
diff --git a/app/assets/javascripts/members/components/role_selector.vue b/app/assets/javascripts/members/components/role_selector.vue
index 97acc96bcea722c13947d2e75265634cee6518db..d271518be197d8f42536bc4331ae2aaf0ca229b9 100644
--- a/app/assets/javascripts/members/components/role_selector.vue
+++ b/app/assets/javascripts/members/components/role_selector.vue
@@ -67,7 +67,7 @@ export default {
</div>
<div
v-if="item.memberRoleId && item.description"
- class="gl-text-gray-700 gl-font-sm gl-mt-1 gl-line-clamp-2"
+ class="gl-mt-1 gl-line-clamp-2 gl-text-sm gl-text-gray-700"
data-testid="role-description"
>
{{ item.description }}
diff --git a/app/assets/javascripts/members/components/table/drawer/role_details_drawer.vue b/app/assets/javascripts/members/components/table/drawer/role_details_drawer.vue
index a2535fa4c013a1461a78dc47f1a5601b01da9afd..b2cc6b4d25b488874c1a7884e9167c81a9f7d4bc 100644
--- a/app/assets/javascripts/members/components/table/drawer/role_details_drawer.vue
+++ b/app/assets/javascripts/members/components/table/drawer/role_details_drawer.vue
@@ -130,7 +130,7 @@ export default {
<role-badges :member="member" :role="selectedRole" />
</dd>
- <dt class="gl-mt-6 gl-mb-3" data-testid="description-header">
+ <dt class="gl-mb-3 gl-mt-6" data-testid="description-header">
{{ s__('MemberRole|Description') }}
</dt>
<dd data-testid="description-value">
@@ -138,10 +138,10 @@ export default {
<span v-else class="gl-text-gray-400">{{ s__('MemberRole|No description') }}</span>
</dd>
- <dt class="gl-mt-6 gl-mb-3" data-testid="permissions-header">
+ <dt class="gl-mb-3 gl-mt-6" data-testid="permissions-header">
{{ __('Permissions') }}
</dt>
- <dd class="gl-display-flex gl-mb-5">
+ <dd class="gl-mb-5 gl-flex">
<span v-if="selectedRole.memberRoleId" class="gl-mr-3" data-testid="base-role">
<gl-sprintf :message="s__('MemberRole|Base role: %{role}')">
<template #role>
@@ -163,10 +163,10 @@ export default {
<div
v-for="permission in selectedRole.permissions"
:key="permission.name"
- class="gl-display-flex"
+ class="gl-flex"
data-testid="permission"
>
- <gl-icon name="check" class="gl-flex-shrink-0" />
+ <gl-icon name="check" class="gl-shrink-0" />
<div class="gl-mx-3">
<span data-testid="permission-name">
{{ permission.name }}
diff --git a/app/assets/javascripts/members/components/table/max_role.vue b/app/assets/javascripts/members/components/table/max_role.vue
index 1ea6729e30399fd99d2d0a5317dc8c9501fb9507..06cee2cff172062b1963db79131140e76747a2f5 100644
--- a/app/assets/javascripts/members/components/table/max_role.vue
+++ b/app/assets/javascripts/members/components/table/max_role.vue
@@ -136,7 +136,7 @@ export default {
</div>
<div
v-if="item.memberRoleId && item.description"
- class="gl-text-gray-700 gl-font-sm gl-pt-1 gl-line-clamp-2 gl-whitespace-normal"
+ class="gl-line-clamp-2 gl-whitespace-normal gl-pt-1 gl-text-sm gl-text-gray-700"
>
{{ item.description }}
</div>
diff --git a/app/assets/javascripts/members/components/table/member_activity.vue b/app/assets/javascripts/members/components/table/member_activity.vue
index 9651aeb86711a3a8500440594f1c1a38bd1a9e44..82e3ec5c5baf8e5b4ffe04979b7d73e5f734be02 100644
--- a/app/assets/javascripts/members/components/table/member_activity.vue
+++ b/app/assets/javascripts/members/components/table/member_activity.vue
@@ -28,18 +28,18 @@ export default {
</script>
<template>
- <div class="gl-display-flex gl-flex-direction-column gl-gap-2">
- <div v-if="userCreated" class="gl-display-flex gl-gap-3">
+ <div class="gl-flex gl-flex-col gl-gap-2">
+ <div v-if="userCreated" class="gl-flex gl-gap-3">
<gl-icon
ref="userCreated"
v-gl-tooltip.${userCreated}
- class="gl-ml-2 -gl-mr-2 gl-text-gray-500"
+ class="-gl-mr-2 gl-ml-2 gl-text-gray-500"
name="assignee"
:title="s__('Members|User created')"
/>
<user-date :date="userCreated" />
</div>
- <div v-if="accessGranted" class="gl-display-flex gl-gap-3">
+ <div v-if="accessGranted" class="gl-flex gl-gap-3">
<gl-icon
ref="memberCreatedAt"
v-gl-tooltip.${memberCreatedAt}
@@ -49,7 +49,7 @@ export default {
/>
<user-date :date="accessGranted" />
</div>
- <div v-if="lastActivity" class="gl-display-flex gl-gap-3">
+ <div v-if="lastActivity" class="gl-flex gl-gap-3">
<gl-icon
ref="lastActivity"
v-gl-tooltip.${lastActivity}
diff --git a/app/assets/javascripts/members/components/table/member_source.vue b/app/assets/javascripts/members/components/table/member_source.vue
index fdcdf027b9e315a40d2408b279b7bcf5374fc9ea..f77871991ea7987940976da90191e6ed293e280f 100644
--- a/app/assets/javascripts/members/components/table/member_source.vue
+++ b/app/assets/javascripts/members/components/table/member_source.vue
@@ -58,7 +58,7 @@ export default {
</script>
<template>
- <div v-if="isSharedWithGroupPrivate" class="gl-display-flex gl-gap-x-2">
+ <div v-if="isSharedWithGroupPrivate" class="gl-flex gl-gap-x-2">
<span>{{ $options.i18n.private }}</span>
<private-icon />
</div>
diff --git a/app/assets/javascripts/members/components/table/members_table.vue b/app/assets/javascripts/members/components/table/members_table.vue
index 07dc5d83d18f4ed8a85852defb7a87400240378b..3c1212f8d6b6f9a3a867a370c92158092b951550 100644
--- a/app/assets/javascripts/members/components/table/members_table.vue
+++ b/app/assets/javascripts/members/components/table/members_table.vue
@@ -269,7 +269,7 @@ export default {
<template #cell(invited)="{ item: { createdAt, createdBy, invite, state } }">
<div
- class="gl-display-flex gl-align-items-center gl-justify-content-end gl-lg-justify-content-start gl-flex-wrap gl-gap-3"
+ class="gl-flex gl-flex-wrap gl-items-center gl-justify-end gl-gap-3 lg:gl-justify-start"
>
<created-at :date="createdAt" :created-by="createdBy" />
<gl-badge v-if="inviteBadge(invite, state)" data-testid="invited-badge"
diff --git a/app/assets/javascripts/members/placeholders/components/placeholder_actions.vue b/app/assets/javascripts/members/placeholders/components/placeholder_actions.vue
index 9e5dd2469cb1a7e29ef1a909eb0504235f0f5201..0c0d8f5619760cd9a78fc5018e29794870912747 100644
--- a/app/assets/javascripts/members/placeholders/components/placeholder_actions.vue
+++ b/app/assets/javascripts/members/placeholders/components/placeholder_actions.vue
@@ -313,11 +313,11 @@ export default {
<template #footer>
<div
- class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-200 gl-flex gl-flex-col !gl-p-2 !gl-pt-0"
+ class="gl-flex gl-flex-col gl-border-t-1 gl-border-t-gray-200 !gl-p-2 !gl-pt-0 gl-border-t-solid"
>
<gl-button
category="tertiary"
- class="!gl-justify-start gl-mt-2"
+ class="gl-mt-2 !gl-justify-start"
data-testid="dont-reassign-button"
@click="onSelect('')"
>
diff --git a/app/assets/javascripts/members/placeholders/components/placeholders_table.vue b/app/assets/javascripts/members/placeholders/components/placeholders_table.vue
index 20b0a663f68465ec2ba1cd1aa59bf5a4d8a112b3..b795348d7cebbf6917e7876b9f79a844c0de7eb4 100644
--- a/app/assets/javascripts/members/placeholders/components/placeholders_table.vue
+++ b/app/assets/javascripts/members/placeholders/components/placeholders_table.vue
@@ -197,7 +197,7 @@ export default {
</template>
</gl-table>
- <div v-if="pageInfo.hasNextPage || pageInfo.hasPreviousPage" class="gl-text-center gl-mt-5">
+ <div v-if="pageInfo.hasNextPage || pageInfo.hasPreviousPage" class="gl-mt-5 gl-text-center">
<gl-keyset-pagination
v-bind="pageInfo"
:prev-text="__('Prev')"
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue
index 4f638dfdf424238ce0735cdaefabbb948c7ee8a1..24a3ab5ece6ab8fc80b2c716d9f27096109c426e 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue
@@ -110,7 +110,7 @@ export default {
<div v-show="file.showEditor">
<div v-if="file.promptDiscardConfirmation" class="discard-changes-alert">
{{ __('Are you sure you want to discard your changes?') }}
- <div class="gl-ml-3 gl-display-inline-block">
+ <div class="gl-ml-3 gl-inline-block">
<gl-button
size="small"
variant="danger"
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue b/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
index 1886e7641df2a423711253db98e9475e072e5899..01d243e7aface001ab9d7208c402b4060481c2ed 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
@@ -131,7 +131,7 @@ export default {
category="tertiary"
/>
</div>
- <div class="file-actions gl-flex gl-items-center gl-ml-auto gl-align-self-start">
+ <div class="file-actions gl-ml-auto gl-flex gl-items-center gl-self-start">
<gl-button-group v-if="file.type === 'text'" class="gl-mr-3">
<gl-button
:selected="file.resolveMode === 'interactive'"
@@ -157,10 +157,10 @@ export default {
</gl-button>
</div>
</div>
- <div class="diff-content diff-wrap-lines gl-rounded-bottom-base">
+ <div class="diff-content diff-wrap-lines gl-rounded-b-base">
<div
v-if="file.resolveMode === 'interactive' && file.type === 'text'"
- class="file-content gl-rounded-bottom-base"
+ class="file-content gl-rounded-b-base"
>
<parallel-conflict-lines v-if="isParallel" :file="file" />
<inline-conflict-lines v-else :file="file" />
diff --git a/app/assets/javascripts/merge_request_dashboard/components/app.vue b/app/assets/javascripts/merge_request_dashboard/components/app.vue
index 7e364856ed893fbbb3950788a38889cd401abade..ab0f2783b144dd4a5e32e701c4ccd0abccd5d929 100644
--- a/app/assets/javascripts/merge_request_dashboard/components/app.vue
+++ b/app/assets/javascripts/merge_request_dashboard/components/app.vue
@@ -25,7 +25,7 @@ export default {
<template>
<div>
<div class="page-title-holder gl-flex">
- <h1 class="page-title gl-font-size-h-display">{{ __('Merge requests') }}</h1>
+ <h1 class="page-title gl-text-size-h-display">{{ __('Merge requests') }}</h1>
</div>
<merge-requests-query
v-for="(list, i) in lists"
@@ -47,22 +47,22 @@ export default {
<col style="width: 120px" />
<col style="min-width: 200px" />
</colgroup>
- <thead class="gl-bg-gray-10 gl-border-b">
+ <thead class="gl-border-b gl-bg-gray-10">
<tr>
- <th class="gl-pl-5 gl-pr-3 gl-pb-3" :aria-label="__('Pipeline status')">
+ <th class="gl-pb-3 gl-pl-5 gl-pr-3" :aria-label="__('Pipeline status')">
<gl-icon name="pipeline" />
</th>
- <th class="gl-pb-3 gl-px-3" :aria-label="__('Approvals')">
+ <th class="gl-px-3 gl-pb-3" :aria-label="__('Approvals')">
<gl-icon name="approval" />
</th>
- <th class="gl-pb-3 gl-px-3 gl-text-sm gl-text-gray-700">{{ __('Title') }}</th>
- <th class="gl-pb-3 gl-px-3 gl-text-sm gl-text-gray-700 gl-text-center">
+ <th class="gl-px-3 gl-pb-3 gl-text-sm gl-text-gray-700">{{ __('Title') }}</th>
+ <th class="gl-px-3 gl-pb-3 gl-text-center gl-text-sm gl-text-gray-700">
{{ __('Assignee') }}
</th>
- <th class="gl-pb-3 gl-px-3 gl-text-sm gl-text-gray-700 gl-text-center">
+ <th class="gl-px-3 gl-pb-3 gl-text-center gl-text-sm gl-text-gray-700">
{{ __('Reviewers') }}
</th>
- <th class="gl-pr-5 gl-pl-3 gl-pb-3 gl-text-sm gl-text-gray-700 gl-text-right">
+ <th class="gl-pb-3 gl-pl-3 gl-pr-5 gl-text-right gl-text-sm gl-text-gray-700">
{{ __('Activity') }}
</th>
</tr>
@@ -93,7 +93,7 @@ export default {
</div>
</div>
<template #pagination>
- <div v-if="hasNextPage" class="gl-flex gl-justify-center gl-mt-4">
+ <div v-if="hasNextPage" class="gl-mt-4 gl-flex gl-justify-center">
<gl-button :loading="loading" data-testid="load-more" @click="loadMore">{{
__('Show more')
}}</gl-button>
diff --git a/app/assets/javascripts/merge_request_dashboard/components/assigned_users.vue b/app/assets/javascripts/merge_request_dashboard/components/assigned_users.vue
index d1c868ead41c643420b098875c3aaeffce277e8d..28d25f3560622de182056463959b3d8ee5ebdff8 100644
--- a/app/assets/javascripts/merge_request_dashboard/components/assigned_users.vue
+++ b/app/assets/javascripts/merge_request_dashboard/components/assigned_users.vue
@@ -118,7 +118,7 @@ export default {
</script>
<template>
- <div class="gl-flex gl-justify-center mr-users-list">
+ <div class="mr-users-list gl-flex gl-justify-center">
<gl-avatars-inline
v-if="sortedUsers.length"
:avatars="sortedUsers"
@@ -139,14 +139,14 @@ export default {
<gl-avatar :src="user.avatarUrl" :size="32" />
<span
v-if="isCurrentUser(user)"
- class="gl-absolute -gl-top-2 -gl-left-2 gl-rounded-full gl-p-1 gl-w-5 gl-h-5 gl-flex gl-justify-center gl-items-center gl-bg-blue-500 gl-text-white"
+ class="gl-absolute -gl-left-2 -gl-top-2 gl-flex gl-h-5 gl-w-5 gl-items-center gl-justify-center gl-rounded-full gl-bg-blue-500 gl-p-1 gl-text-white"
data-testid="current-user"
>
<gl-icon name="user" class="gl-block" :size="12" />
</span>
<span
v-if="reviewStateIcon(user)"
- class="gl-absolute -gl-bottom-2 -gl-right-2 gl-rounded-full gl-p-1 gl-w-5 gl-h-5 gl-flex gl-justify-center gl-items-center"
+ class="gl-absolute -gl-bottom-2 -gl-right-2 gl-flex gl-h-5 gl-w-5 gl-items-center gl-justify-center gl-rounded-full gl-p-1"
:class="reviewStateIcon(user).class"
data-testid="review-state-icon"
>
diff --git a/app/assets/javascripts/merge_request_dashboard/components/collapsible_section.vue b/app/assets/javascripts/merge_request_dashboard/components/collapsible_section.vue
index 4d18ab92386e8e04811450b2f142da99fc329352..c1bc254bfecbe082fcb0a9ec8de650ac932d9451 100644
--- a/app/assets/javascripts/merge_request_dashboard/components/collapsible_section.vue
+++ b/app/assets/javascripts/merge_request_dashboard/components/collapsible_section.vue
@@ -61,7 +61,7 @@ export default {
<section class="gl-border gl-rounded-base">
<header
:class="{ 'gl-rounded-base': !open }"
- class="gl-bg-gray-10 gl-rounded-tl-base gl-rounded-tr-base gl-px-5 gl-py-4"
+ class="gl-rounded-tl-base gl-rounded-tr-base gl-bg-gray-10 gl-px-5 gl-py-4"
>
<h5 class="gl-m-0">
<gl-button
diff --git a/app/assets/javascripts/merge_request_dashboard/components/merge_request.vue b/app/assets/javascripts/merge_request_dashboard/components/merge_request.vue
index f2557c3a26301c148752c7e2fdc542930a20c31c..4c0d08f1dec88f6013eb4a438d6eed2d884af1ad 100644
--- a/app/assets/javascripts/merge_request_dashboard/components/merge_request.vue
+++ b/app/assets/javascripts/merge_request_dashboard/components/merge_request.vue
@@ -66,10 +66,10 @@ export default {
/>
<gl-icon v-else name="dash" />
</td>
- <td class="gl-py-4 gl-px-3 gl-align-top">
+ <td class="gl-px-3 gl-py-4 gl-align-top">
<approval-count :merge-request="mergeRequest" />
</td>
- <td class="gl-py-4 gl-px-3 gl-align-top">
+ <td class="gl-px-3 gl-py-4 gl-align-top">
<h4 class="gl-mb-0 gl-mt-0 gl-text-base">
<gl-link
v-safe-html="mergeRequest.titleHtml"
@@ -77,7 +77,7 @@ export default {
class="gl-text-primary hover:gl-text-gray-900"
/>
</h4>
- <div class="gl-text-sm gl-mt-2 gl-mb-2 gl-text-secondary">
+ <div class="gl-mb-2 gl-mt-2 gl-text-sm gl-text-secondary">
<gl-sprintf
:message="__('%{reference} %{divider} created %{createdAt} by %{author} %{milestone}')"
>
@@ -99,13 +99,13 @@ export default {
</gl-sprintf>
</div>
</td>
- <td class="gl-py-4 gl-px-3 gl-align-top">
+ <td class="gl-px-3 gl-py-4 gl-align-top">
<assigned-users :users="mergeRequest.assignees.nodes" type="ASSIGNEES" />
</td>
- <td class="gl-py-4 gl-px-3 gl-align-top">
+ <td class="gl-px-3 gl-py-4 gl-align-top">
<assigned-users :users="mergeRequest.reviewers.nodes" type="REVIEWERS" />
</td>
- <td class="gl-py-4 gl-pr-5 gl-pl-3 gl-align-top">
+ <td class="gl-py-4 gl-pl-3 gl-pr-5 gl-align-top">
<div class="gl-flex gl-justify-end" :aria-label="statsAriaLabel">
<div class="gl-whitespace-nowrap">
<gl-icon name="comments" class="!gl-align-middle" />
@@ -115,11 +115,11 @@ export default {
<gl-icon name="doc-code" />
<span>{{ mergeRequest.diffStatsSummary.fileCount }}</span>
</div>
- <div class="gl-ml-3 gl-text-green-600 gl-font-bold gl-flex gl-items-center">
+ <div class="gl-ml-3 gl-flex gl-items-center gl-font-bold gl-text-green-600">
<span>+</span>
<span>{{ mergeRequest.diffStatsSummary.additions }}</span>
</div>
- <div class="gl-ml-3 gl-text-red-500 gl-font-bold gl-flex gl-items-center">
+ <div class="gl-ml-3 gl-flex gl-items-center gl-font-bold gl-text-red-500">
<span>−</span>
<span>{{ mergeRequest.diffStatsSummary.deletions }}</span>
</div>
diff --git a/app/assets/javascripts/merge_requests/components/compare_app.vue b/app/assets/javascripts/merge_requests/components/compare_app.vue
index a753641ffd2b3ddfcae7d4a8f828a1341109deba..88b83a201598cfc8423f307a2f46e6560058051f 100644
--- a/app/assets/javascripts/merge_requests/components/compare_app.vue
+++ b/app/assets/javascripts/merge_requests/components/compare_app.vue
@@ -133,14 +133,14 @@ export default {
</div>
<div
v-if="showCommitBox"
- class="gl-bg-gray-50 gl-rounded-base gl-my-4"
+ class="gl-my-4 gl-rounded-base gl-bg-gray-50"
data-testid="commit-box"
>
<gl-loading-icon v-if="loading" class="gl-py-3" />
<template v-else>
<div
v-if="!selectedBranch.value"
- class="compare-commit-empty gl-display-flex gl-align-items-center gl-p-5"
+ class="compare-commit-empty gl-flex gl-items-center gl-p-5"
>
<gl-icon name="branch" class="gl-mr-3" />
{{ __('Select a branch to compare') }}
diff --git a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue
index 35fbf4bc4e632f826313b5b8f9eb4e7ac3e54a37..884a3ee75a273f57dc6771a4f8ac684fce0c3f3a 100644
--- a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue
+++ b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue
@@ -138,11 +138,8 @@ export default {
:searching="isLoading"
:disabled="disabled"
searchable
- class="gl-w-full dropdown-target-project"
- :toggle-class="[
- 'gl-align-items-flex-start! gl-justify-content-start! mr-compare-dropdown',
- toggleClass,
- ]"
+ class="dropdown-target-project gl-w-full"
+ :toggle-class="['!gl-items-start !gl-justify-start mr-compare-dropdown', toggleClass]"
@shown="fetchData"
@search="searchData"
@select="selectItem"
diff --git a/app/assets/javascripts/merge_requests/components/merge_request_header.vue b/app/assets/javascripts/merge_requests/components/merge_request_header.vue
index 667670b46eb67fcb44c3c3ed30d4aa69019e774e..698cfd891ec917c1f4b8b698ec578a56cb231d6b 100644
--- a/app/assets/javascripts/merge_requests/components/merge_request_header.vue
+++ b/app/assets/javascripts/merge_requests/components/merge_request_header.vue
@@ -94,31 +94,31 @@ export default {
</script>
<template>
- <span class="gl-display-contents">
+ <span class="gl-contents">
<status-badge
- class="gl-align-self-center gl-mr-2"
+ class="gl-mr-2 gl-self-center"
:issuable-type="$options.TYPE_MERGE_REQUEST"
:state="state"
/>
<confidentiality-badge
v-if="isConfidential"
- class="gl-align-self-center gl-mr-2"
+ class="gl-mr-2 gl-self-center"
:issuable-type="$options.TYPE_ISSUE"
:workspace-type="$options.WORKSPACE_PROJECT"
/>
<locked-badge
v-if="isLocked"
- class="gl-align-self-center gl-mr-2"
+ class="gl-mr-2 gl-self-center"
:issuable-type="$options.TYPE_MERGE_REQUEST"
/>
<hidden-badge
v-if="hidden"
- class="gl-align-self-center gl-mr-2"
+ class="gl-mr-2 gl-self-center"
:issuable-type="$options.TYPE_MERGE_REQUEST"
/>
<imported-badge
v-if="isImported"
- class="gl-align-self-center gl-mr-2"
+ class="gl-mr-2 gl-self-center"
:importable-type="$options.TYPE_MERGE_REQUEST"
/>
</span>
diff --git a/app/assets/javascripts/merge_requests/components/reviewers/reviewer_dropdown.vue b/app/assets/javascripts/merge_requests/components/reviewers/reviewer_dropdown.vue
index 34b10b55e8d5ff391a007fd2dcc492fe086f9d5a..0d85c5dba7d216548841fafc2aa9472351aa81a9 100644
--- a/app/assets/javascripts/merge_requests/components/reviewers/reviewer_dropdown.vue
+++ b/app/assets/javascripts/merge_requests/components/reviewers/reviewer_dropdown.vue
@@ -156,7 +156,7 @@ export default {
@hidden="updateReviewers"
>
<template #list-item="{ item }">
- <span class="gl-display-flex gl-align-items-center">
+ <span class="gl-flex gl-items-center">
<div class="gl-relative gl-mr-3">
<gl-avatar :size="32" :src="item.avatarUrl" :entity-name="item.value" />
<gl-icon
@@ -166,8 +166,8 @@ export default {
class="reviewer-merge-icon"
/>
</div>
- <span class="gl-display-flex gl-flex-direction-column">
- <span class="gl-font-bold gl-white-space-nowrap">{{ item.text }}</span>
+ <span class="gl-flex gl-flex-col">
+ <span class="gl-whitespace-nowrap gl-font-bold">{{ item.text }}</span>
<span class="gl-text-gray-400"> {{ item.secondaryText }}</span>
</span>
</span>
diff --git a/app/assets/javascripts/merge_requests/components/reviewers/reviewers_container.vue b/app/assets/javascripts/merge_requests/components/reviewers/reviewers_container.vue
index 921c2d5a09444183df129b85ea8bb1d997ca84bb..9e475d0ee6836274c319c7c114f8fa33d198a33e 100644
--- a/app/assets/javascripts/merge_requests/components/reviewers/reviewers_container.vue
+++ b/app/assets/javascripts/merge_requests/components/reviewers/reviewers_container.vue
@@ -66,10 +66,10 @@ export default {
<template>
<div>
- <div class="gl-leading-20 gl-font-bold gl-flex gl-w-full gl-align-items-center gl-mb-3">
+ <div class="gl-mb-3 gl-flex gl-w-full gl-items-center gl-font-bold gl-leading-20">
<template v-if="loadingReviewers">
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-w-20"></div>
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-w-4 gl-ml-auto"></div>
+ <div class="gl-animate-skeleton-loader gl-h-4 gl-w-20 gl-rounded-base"></div>
+ <div class="gl-animate-skeleton-loader gl-ml-auto gl-h-4 gl-w-4 gl-rounded-base"></div>
</template>
<template v-else>
{{ reviewersTitle }}
@@ -77,9 +77,9 @@ export default {
</template>
</div>
<div v-if="loadingReviewers">
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-mb-3 gl-max-w-20!"></div>
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-mb-3 gl-max-w-20!"></div>
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-max-w-20!"></div>
+ <div class="gl-animate-skeleton-loader gl-mb-3 gl-h-4 !gl-max-w-20 gl-rounded-base"></div>
+ <div class="gl-animate-skeleton-loader gl-mb-3 gl-h-4 !gl-max-w-20 gl-rounded-base"></div>
+ <div class="gl-animate-skeleton-loader gl-h-4 !gl-max-w-20 gl-rounded-base"></div>
</div>
<uncollapsed-reviewer-list
v-else-if="reviewers.length"
@@ -90,7 +90,7 @@ export default {
/>
<gl-empty-state v-else :svg-path="$options.noReviewersAssignedSvg" :svg-height="70">
<template #description>
- <p class="gl-font-normal gl-mb-3">{{ __('No reviewers assigned') }}</p>
+ <p class="gl-mb-3 gl-font-normal">{{ __('No reviewers assigned') }}</p>
<update-reviewers
v-if="userPermissions.adminMergeRequest"
:selected-reviewers="currentUser"
diff --git a/app/assets/javascripts/merge_requests/components/sticky_header.vue b/app/assets/javascripts/merge_requests/components/sticky_header.vue
index 539848ec89065ae780e268d113694ebf88240045..c7cf2197aa9bef7f676b225d522bf6b1dcfce28b 100644
--- a/app/assets/javascripts/merge_requests/components/sticky_header.vue
+++ b/app/assets/javascripts/merge_requests/components/sticky_header.vue
@@ -160,20 +160,20 @@ export default {
@disappear="setStickyHeaderVisible(true)"
>
<div
- class="issue-sticky-header merge-request-sticky-header gl-fixed gl-bg-default gl-hidden md:gl-flex gl-flex-col gl-justify-end gl-border-b"
+ class="issue-sticky-header merge-request-sticky-header gl-border-b gl-fixed gl-hidden gl-flex-col gl-justify-end gl-bg-default md:gl-flex"
:class="{ 'gl-invisible': !isStickyHeaderVisible }"
>
<div
- class="issue-sticky-header-text gl-flex gl-flex-col gl-items-center gl-mx-auto gl-w-full"
+ class="issue-sticky-header-text gl-mx-auto gl-flex gl-w-full gl-flex-col gl-items-center"
:class="{ 'container-limited': !isFluidLayout }"
>
- <div class="gl-w-full gl-flex gl-items-center gl-gap-2">
+ <div class="gl-flex gl-w-full gl-items-center gl-gap-2">
<status-badge :issuable-type="$options.TYPE_MERGE_REQUEST" :state="badgeState.state" />
<imported-badge v-if="isImported" :importable-type="$options.TYPE_MERGE_REQUEST" />
<a
v-safe-html:[$options.safeHtmlConfig]="titleHtml"
href="#top"
- class="gl-hidden lg:gl-block gl-font-bold gl-overflow-hidden gl-whitespace-nowrap gl-text-overflow-ellipsis gl-my-0 gl-ml-1 gl-mr-2 gl-text-black-normal"
+ class="gl-my-0 gl-ml-1 gl-mr-2 gl-hidden gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-font-bold gl-text-default lg:gl-block"
></a>
<div class="gl-flex gl-items-center">
<gl-sprintf :message="__('%{source} %{copyButton} into %{target}')">
@@ -184,20 +184,20 @@ export default {
:text="getNoteableData.source_branch"
size="small"
category="tertiary"
- class="gl-mx-1 js-source-branch-copy"
+ class="js-source-branch-copy gl-mx-1"
/>
</template>
<template #source>
<gl-link
:title="getNoteableData.source_branch"
:href="getNoteableData.source_branch_path"
- class="gl-font-monospace gl-bg-blue-50 gl-rounded-base gl-font-sm gl-px-2 gl-mt-2 gl-truncate gl-max-w-26"
+ class="gl-mt-2 gl-max-w-26 gl-truncate gl-rounded-base gl-bg-blue-50 gl-px-2 gl-text-sm gl-font-monospace"
data-testid="source-branch"
>
<span
v-if="isForked"
v-gl-tooltip
- class="gl-align-middle -gl-mr-2"
+ class="-gl-mr-2 gl-align-middle"
:title="__('The source project is a fork')"
>
<gl-icon name="fork" :size="12" class="gl-ml-1" />
@@ -209,7 +209,7 @@ export default {
<gl-link
:title="getNoteableData.target_branch"
:href="getNoteableData.target_branch_path"
- class="gl-text-blue-500! gl-font-monospace gl-bg-blue-50 gl-rounded-base gl-font-sm gl-px-2 gl-mt-2 gl-truncate gl-max-w-26 gl-ml-2"
+ class="gl-ml-2 gl-mt-2 gl-max-w-26 gl-truncate gl-rounded-base gl-bg-blue-50 gl-px-2 gl-text-sm !gl-text-blue-500 gl-font-monospace"
>
{{ getNoteableData.target_branch }}
</gl-link>
@@ -217,9 +217,9 @@ export default {
</gl-sprintf>
</div>
</div>
- <div class="gl-w-full gl-flex">
+ <div class="gl-flex gl-w-full">
<ul
- class="merge-request-tabs nav-tabs nav nav-links gl-flex gl-flex-nowrap gl-m-0 gl-p-0 gl-border-b-0"
+ class="merge-request-tabs nav-tabs nav nav-links gl-m-0 gl-flex gl-flex-nowrap gl-border-b-0 gl-p-0"
>
<li
v-for="(tab, index) in tabs"
@@ -239,7 +239,7 @@ export default {
</gl-link>
</li>
</ul>
- <div class="gl-hidden lg:gl-flex gl-items-center gl-ml-auto">
+ <div class="gl-ml-auto gl-hidden gl-items-center lg:gl-flex">
<discussion-counter :blocks-merge="blocksMerge" hide-options />
<div v-if="isSignedIn" :class="{ 'gl-flex gl-gap-3': isNotificationsTodosButtons }">
<todo-widget
diff --git a/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue b/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue
index 94d3c6f51f1e5b005a13214b844ba0367bb9ea4a..c79cbd37403cf1c681635ee1f856e5315ed704d5 100644
--- a/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue
+++ b/app/assets/javascripts/merge_requests/list/components/merge_request_statistics.vue
@@ -20,7 +20,7 @@ export default {
</script>
<template>
- <ul class="gl-display-contents">
+ <ul class="gl-contents">
<li
v-if="mergeRequest.upvotes"
v-gl-tooltip
diff --git a/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue b/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue
index e77d011b98b6762be6e51f83d5d0e84458ee9fe0..9388126d606d6fdc153a613d7e82885416c04f4d 100644
--- a/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue
+++ b/app/assets/javascripts/merge_requests/list/components/merge_requests_list_app.vue
@@ -493,7 +493,7 @@ export default {
@filter="handleFilter"
>
<template #nav-actions>
- <div class="gl-display-flex gl-gap-3">
+ <div class="gl-flex gl-gap-3">
<gl-button
v-if="newMergeRequestPath"
variant="confirm"
diff --git a/app/assets/javascripts/merge_requests/list/components/more_actions_dropdown.vue b/app/assets/javascripts/merge_requests/list/components/more_actions_dropdown.vue
index 08b3f023c809f4dd871777b16fdf40c51f21d99a..9c36b5692bbc122bedc7329b5de6e705799e8672 100644
--- a/app/assets/javascripts/merge_requests/list/components/more_actions_dropdown.vue
+++ b/app/assets/javascripts/merge_requests/list/components/more_actions_dropdown.vue
@@ -68,8 +68,8 @@ export default {
<template #toggle>
<div class="gl-min-h-7">
<gl-button
- class="md:!gl-hidden gl-w-full"
- button-text-classes="gl-display-flex gl-justify-content-space-between gl-w-full"
+ class="gl-w-full md:!gl-hidden"
+ button-text-classes="gl-flex gl-justify-between gl-w-full"
category="secondary"
:aria-label="$options.i18n.toggleText"
>
diff --git a/app/assets/javascripts/milestones/components/milestone_combobox.vue b/app/assets/javascripts/milestones/components/milestone_combobox.vue
index 205a09dbfe88f9be2dd6ae20eb23c4813eee655c..4e951f30778c78c3afbae2feb8b44ac0127fd58f 100644
--- a/app/assets/javascripts/milestones/components/milestone_combobox.vue
+++ b/app/assets/javascripts/milestones/components/milestone_combobox.vue
@@ -171,7 +171,7 @@ export default {
</template>
<template #footer>
<div
- class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-200 gl-display-flex gl-flex-direction-column gl-p-2! gl-pt-0!"
+ class="gl-flex gl-flex-col gl-border-t-1 gl-border-t-gray-200 !gl-p-2 !gl-pt-0 gl-border-t-solid"
>
<gl-button
v-for="(item, idx) in extraLinks"
@@ -181,7 +181,7 @@ export default {
data-testid="milestone-combobox-extra-links"
category="tertiary"
block
- class="gl-justify-content-start! gl-mt-2!"
+ class="!gl-mt-2 !gl-justify-start"
>
{{ item.text }}
</gl-button>
diff --git a/app/assets/javascripts/milestones/components/milestone_results_section.vue b/app/assets/javascripts/milestones/components/milestone_results_section.vue
index e3c691b14c7b6c83043b8676a4f1f5bc9e585fbc..363c8b79e35590ca62d7e11236f4871923a84edd 100644
--- a/app/assets/javascripts/milestones/components/milestone_results_section.vue
+++ b/app/assets/javascripts/milestones/components/milestone_results_section.vue
@@ -62,17 +62,14 @@ export default {
<template>
<div>
<gl-dropdown-section-header>
- <div
- class="gl-display-flex gl-align-items-center gl-pl-6"
- data-testid="milestone-results-section-header"
- >
- <span class="gl-mr-2 gl-mb-1">{{ sectionTitle }}</span>
+ <div class="gl-flex gl-items-center gl-pl-6" data-testid="milestone-results-section-header">
+ <span class="gl-mb-1 gl-mr-2">{{ sectionTitle }}</span>
<gl-badge variant="neutral">{{ totalCountText }}</gl-badge>
</div>
</gl-dropdown-section-header>
<template v-if="error">
- <div class="gl-display-flex align-items-start gl-text-red-500 gl-ml-4 gl-mr-4 gl-mb-3">
- <gl-icon name="error" class="gl-mr-2 gl-mt-2 gl-flex-shrink-0" />
+ <div class="align-items-start gl-mb-3 gl-ml-4 gl-mr-4 gl-flex gl-text-red-500">
+ <gl-icon name="error" class="gl-mr-2 gl-mt-2 gl-shrink-0" />
<span>{{ errorMessage }}</span>
</div>
</template>
diff --git a/app/assets/javascripts/milestones/components/more_actions_dropdown.vue b/app/assets/javascripts/milestones/components/more_actions_dropdown.vue
index c2ea3d3050084bf585af409b32a9cdb1a79d4bba..9d65e5639d00530e6ebe1e0ec1f3d99b4d5b5109 100644
--- a/app/assets/javascripts/milestones/components/more_actions_dropdown.vue
+++ b/app/assets/javascripts/milestones/components/more_actions_dropdown.vue
@@ -104,7 +104,7 @@ export default {
return {
text: this.$options.i18n.delete,
extraAttrs: {
- class: 'gl-text-red-500!',
+ class: '!gl-text-red-500',
'data-testid': 'milestone-delete-item',
},
};
@@ -183,7 +183,7 @@ export default {
<template v-if="isDetailPage" #toggle>
<div class="gl-min-h-7">
<gl-button
- class="md:!gl-hidden gl-new-dropdown-toggle gl-absolute gl-top-0 gl-left-0 gl-w-full gl-sm-w-auto"
+ class="gl-new-dropdown-toggle gl-absolute gl-left-0 gl-top-0 gl-w-full sm:gl-w-auto md:!gl-hidden"
button-text-classes="gl-w-full"
category="secondary"
:aria-label="$options.i18n.actionsLabel"
@@ -193,7 +193,7 @@ export default {
<gl-icon class="dropdown-chevron" name="chevron-down" />
</gl-button>
<gl-button
- class="gl-hidden md:!gl-flex gl-new-dropdown-toggle gl-new-dropdown-icon-only gl-new-dropdown-toggle-no-caret"
+ class="gl-new-dropdown-toggle gl-new-dropdown-icon-only gl-new-dropdown-toggle-no-caret gl-hidden md:!gl-flex"
category="tertiary"
icon="ellipsis_v"
:aria-label="$options.i18n.actionsLabel"
@@ -214,11 +214,11 @@ export default {
@action="setPromoteModalVisibility(true)"
/>
- <gl-disclosure-dropdown-group v-if="canReadMilestone" bordered class="gl-border-t-gray-200!">
+ <gl-disclosure-dropdown-group v-if="canReadMilestone" bordered class="!gl-border-t-gray-200">
<gl-disclosure-dropdown-item :item="copyIdItem" :data-clipboard-text="id" />
</gl-disclosure-dropdown-group>
- <gl-disclosure-dropdown-group v-if="showDelete" bordered class="gl-border-t-gray-200!">
+ <gl-disclosure-dropdown-group v-if="showDelete" bordered class="!gl-border-t-gray-200">
<gl-disclosure-dropdown-item :item="deleteItem" @action="setDeleteModalVisibility(true)" />
</gl-disclosure-dropdown-group>
diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
index 93b35d71becc448d8986c9b36f6a2f4cbc2e5766..f463724c31a583e41eee533bf54a5af9adb20c36 100644
--- a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
@@ -197,7 +197,7 @@ export default {
:items="tableItems"
show-empty
small
- class="gl-mt-0! ml-candidate-table"
+ class="ml-candidate-table !gl-mt-0"
>
<template #cell()="data">
<div>{{ data.value }}</div>
diff --git a/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue b/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
index 76497608365cd11cbab07748f474b58d22c1965d..da2a7f73e0cb56328ff4cb32afd16bfffeffd471 100644
--- a/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
+++ b/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
@@ -136,7 +136,7 @@ export default {
<div>
<title-area>
<template #title>
- <div class="gl-flex-grow-1 gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-grow gl-items-center">
<span>{{ $options.i18n.TITLE_LABEL }}</span>
<gl-experiment-badge :help-page-url="$options.docHref" type="beta" />
</div>
diff --git a/app/assets/javascripts/ml/model_registry/apps/show_ml_model_version.vue b/app/assets/javascripts/ml/model_registry/apps/show_ml_model_version.vue
index b49f42e64f1368af5452fe6ca0fd5ffb18d5c81b..62c67072c407d8394ee0f7412a0e346eeeef595e 100644
--- a/app/assets/javascripts/ml/model_registry/apps/show_ml_model_version.vue
+++ b/app/assets/javascripts/ml/model_registry/apps/show_ml_model_version.vue
@@ -163,13 +163,11 @@ export default {
<template>
<div>
- <div
- class="gl-display-flex gl-flex-wrap gl-sm-flex-nowrap gl-justify-content-space-between gl-py-3"
- >
- <div class="gl-flex-direction-column gl-flex-grow-1 gl-min-w-0">
+ <div class="gl-flex gl-flex-wrap gl-justify-between gl-py-3 sm:gl-flex-nowrap">
+ <div class="gl-min-w-0 gl-grow gl-flex-col">
<title-area :title="title" />
</div>
- <div class="gl-display-flex gl-align-items-flex-start gl-gap-3 gl-mt-3">
+ <div class="gl-mt-3 gl-flex gl-items-start gl-gap-3">
<model-version-actions-dropdown @delete-model-version="deleteModelVersion" />
</div>
</div>
diff --git a/app/assets/javascripts/ml/model_registry/components/candidate_detail.vue b/app/assets/javascripts/ml/model_registry/components/candidate_detail.vue
index 58216a77e9e876fa889df6f43598d56bffa1b5b9..3745038231b20a4fc675ca040473600abf46d610 100644
--- a/app/assets/javascripts/ml/model_registry/components/candidate_detail.vue
+++ b/app/assets/javascripts/ml/model_registry/components/candidate_detail.vue
@@ -24,7 +24,7 @@ import {
import DetailRow from './candidate_detail_row.vue';
export default {
- HEADER_CLASSES: ['gl-font-lg', 'gl-mt-5'],
+ HEADER_CLASSES: ['gl-text-lg', 'gl-mt-5'],
name: 'MlCandidateDetail',
components: {
DetailRow,
@@ -80,7 +80,7 @@ export default {
},
metricsTableFields() {
const maxStep = maxBy(this.candidate.metrics, 'step').step;
- const rowClass = 'gl-p-3!';
+ const rowClass = '!gl-p-3';
const cssClasses = { thClass: rowClass, tdClass: rowClass };
diff --git a/app/assets/javascripts/ml/model_registry/components/candidate_list_row.vue b/app/assets/javascripts/ml/model_registry/components/candidate_list_row.vue
index 24248c0981be6b3d041baf51efea85f9d93728a0..66235274bf0d08dce6a9438127d5f56e76daa143 100644
--- a/app/assets/javascripts/ml/model_registry/components/candidate_list_row.vue
+++ b/app/assets/javascripts/ml/model_registry/components/candidate_list_row.vue
@@ -29,8 +29,8 @@ export default {
<template>
<list-item v-bind="$attrs">
<template #left-primary>
- <div class="gl-display-flex gl-align-items-center">
- <gl-link class="gl-text-body" :href="pathToDetails">
+ <div class="gl-flex gl-items-center">
+ <gl-link class="gl-text-primary" :href="pathToDetails">
<gl-truncate :text="candidate.name" />
</gl-link>
</div>
diff --git a/app/assets/javascripts/ml/model_registry/components/import_artifact_zone.vue b/app/assets/javascripts/ml/model_registry/components/import_artifact_zone.vue
index ac6933a91af42e134c09638a0fca35556648950e..55179f6ec7ca2b07fe111aee4ebe5d5828a2cee4 100644
--- a/app/assets/javascripts/ml/model_registry/components/import_artifact_zone.vue
+++ b/app/assets/javascripts/ml/model_registry/components/import_artifact_zone.vue
@@ -158,7 +158,7 @@ export default {
:description="subfolderValid ? $options.i18n.subfolderDescription : ''"
>
<div>
- <label for="subfolderId" class="gl-font-weight-bold" data-testid="subfolderLabel">{{
+ <label for="subfolderId" class="gl-font-bold" data-testid="subfolderLabel">{{
$options.i18n.subfolderLabel
}}</label>
<gl-icon id="toolTipSubfolderId" v-gl-tooltip name="information-o" tabindex="0" />
diff --git a/app/assets/javascripts/ml/model_registry/components/mlflow_usage_modal.vue b/app/assets/javascripts/ml/model_registry/components/mlflow_usage_modal.vue
index e9021cb693d7b58de31217f9b98ba803c89f5211..84bfcc74ff966729b22aa85a2a72857b110c3109 100644
--- a/app/assets/javascripts/ml/model_registry/components/mlflow_usage_modal.vue
+++ b/app/assets/javascripts/ml/model_registry/components/mlflow_usage_modal.vue
@@ -92,7 +92,7 @@ export default {
<label> {{ instruction.label }}</label>
<pre
- class="code highlight gl-flex gl-border-none gl-text-left gl-p-2 gl-font-monospace"
+ class="code highlight gl-flex gl-border-none gl-p-2 gl-text-left gl-font-monospace"
data-testid="preview-code"
>
<code class="gl-grow">{{ instruction.cmd }}</code>
diff --git a/app/assets/javascripts/ml/model_registry/components/model_create.vue b/app/assets/javascripts/ml/model_registry/components/model_create.vue
index 0dd8dbaef42f60a0a2c564e0668ee8106c7d46e9..799c0c28fff897b4a1b2fbb0e643750f5606e19c 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_create.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_create.vue
@@ -271,7 +271,7 @@ export default {
label-for="descriptionId"
optional
:optional-text="$options.modal.optionalText"
- class="common-note-form gfm-form js-main-target-form gl-flex-grow-1 new-note"
+ class="common-note-form gfm-form js-main-target-form new-note gl-grow"
>
<markdown-editor
ref="markdownEditor"
diff --git a/app/assets/javascripts/ml/model_registry/components/model_detail.vue b/app/assets/javascripts/ml/model_registry/components/model_detail.vue
index f01af8e88b47f5567b0f2847c00a928decd28cd3..c42dd1d6f8f8e8421432ccc087b908ab66a00b26 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_detail.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_detail.vue
@@ -66,7 +66,7 @@ export default {
<template>
<div class="issue-details issuable-details">
<div v-if="model.latestVersion">
- <h3 class="gl-font-lg">
+ <h3 class="gl-text-lg">
{{ s__('MlModelRegistry|Latest version') }}:
<gl-link :href="model.latestVersion._links.showPath" data-testid="model-version-link">
diff --git a/app/assets/javascripts/ml/model_registry/components/model_edit.vue b/app/assets/javascripts/ml/model_registry/components/model_edit.vue
index 2080632ecc70cc731563b8b555db626093158c54..84fce4edecfcec6025e07397d0ff2a13833cecee 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_edit.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_edit.vue
@@ -177,7 +177,7 @@ export default {
label-for="descriptionId"
optional
:optional-text="$options.modal.optionalText"
- class="common-note-form gfm-form js-main-target-form gl-grow new-note"
+ class="common-note-form gfm-form js-main-target-form new-note gl-grow"
>
<markdown-editor
ref="markdownEditor"
diff --git a/app/assets/javascripts/ml/model_registry/components/model_list_empty_state.vue b/app/assets/javascripts/ml/model_registry/components/model_list_empty_state.vue
index 4c033b737e11d7c79998567ffdf9ea866111436a..ccfbf11b008aff5b7d9b36d9ebf9a56e71db0cac 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_list_empty_state.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_list_empty_state.vue
@@ -53,7 +53,7 @@ export default {
<gl-button v-gl-modal="modalId" variant="confirm" class="gl-mx-2 gl-mb-3">{{
primaryText
}}</gl-button>
- <gl-button v-gl-modal="$options.mlflowModalId" class="gl-mb-3 gl-mr-3 gl-mx-2">
+ <gl-button v-gl-modal="$options.mlflowModalId" class="gl-mx-2 gl-mb-3 gl-mr-3">
{{ $options.mlflowDocs }}
</gl-button>
</template>
diff --git a/app/assets/javascripts/ml/model_registry/components/model_row.vue b/app/assets/javascripts/ml/model_registry/components/model_row.vue
index 49f72c7cef2ad2c795692346f6fecc5ba362747b..5603c0dc8a879ab8b8e28bbfa9bd717d74148980 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_row.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_row.vue
@@ -36,8 +36,8 @@ export default {
<template>
<list-item v-bind="$attrs">
<template #left-primary>
- <div class="gl-display-flex gl-align-items-center">
- <gl-link class="gl-text-body" :href="model._links.showPath">
+ <div class="gl-flex gl-items-center">
+ <gl-link class="gl-text-primary" :href="model._links.showPath">
<gl-truncate :text="model.name" />
</gl-link>
</div>
diff --git a/app/assets/javascripts/ml/model_registry/components/model_version_detail.vue b/app/assets/javascripts/ml/model_registry/components/model_version_detail.vue
index e93d8df042f49cdcbde3c375a6556a02b0e230b8..125a2d4abaa8a098e0c4da104380c4d6cd180ac7 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_version_detail.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_version_detail.vue
@@ -43,7 +43,7 @@ export default {
<template>
<div>
- <h3 class="gl-font-lg gl-mt-5">{{ $options.i18n.DESCRIPTION_LABEL }}</h3>
+ <h3 class="gl-mt-5 gl-text-lg">{{ $options.i18n.DESCRIPTION_LABEL }}</h3>
<div v-if="modelVersion.description">
{{ modelVersion.description }}
@@ -61,7 +61,7 @@ export default {
:package-type="packageType"
>
<template v-if="showImportArtifactZone" #upload="{ refetch }">
- <h3 data-testid="uploadHeader" class="gl-text-lg gl-mt-5">
+ <h3 data-testid="uploadHeader" class="gl-mt-5 gl-text-lg">
{{ __('Upload artifacts') }}
</h3>
<import-artifact-zone :path="importPath" @change="refetch" />
diff --git a/app/assets/javascripts/ml/model_registry/components/model_version_row.vue b/app/assets/javascripts/ml/model_registry/components/model_version_row.vue
index 7e024ff546d7ac93bf17ad69a12d374144f541a1..33443defc9039b61fb615e16be768decf6ab9029 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_version_row.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_version_row.vue
@@ -29,8 +29,8 @@ export default {
<template>
<list-item v-bind="$attrs">
<template #left-primary>
- <div class="gl-display-flex gl-align-items-center">
- <gl-link class="gl-text-body" :href="pathToDetails">
+ <div class="gl-flex gl-items-center">
+ <gl-link class="gl-text-primary" :href="pathToDetails">
<gl-truncate :text="modelVersion.version" />
</gl-link>
</div>
diff --git a/app/assets/javascripts/namespaces/cascading_settings/components/cascading_lock_icon.vue b/app/assets/javascripts/namespaces/cascading_settings/components/cascading_lock_icon.vue
index 6cb344ad711d6c34255aac5c1e3305e0a5b0bab0..c0a9c41d19dec435d88963ea18115592eaf18aa0 100644
--- a/app/assets/javascripts/namespaces/cascading_settings/components/cascading_lock_icon.vue
+++ b/app/assets/javascripts/namespaces/cascading_settings/components/cascading_lock_icon.vue
@@ -46,7 +46,7 @@ export default {
<template>
<span>
- <gl-button :ref="$options.refName" class="gl-hover-bg-transparent! !gl-p-0" category="tertiary">
+ <gl-button :ref="$options.refName" class="!gl-p-0 hover:!gl-bg-transparent" category="tertiary">
<gl-icon name="lock" :aria-label="$options.i18n.lockIconLabel" class="!gl-text-gray-400" />
</gl-button>
<lock-tooltip
diff --git a/app/assets/javascripts/namespaces/cascading_settings/components/lock_tooltip.vue b/app/assets/javascripts/namespaces/cascading_settings/components/lock_tooltip.vue
index 300b98002334321c510d32646d96914324e3b0ea..2a72990e40c28797838ce58b4cbcdc3b07826385 100644
--- a/app/assets/javascripts/namespaces/cascading_settings/components/lock_tooltip.vue
+++ b/app/assets/javascripts/namespaces/cascading_settings/components/lock_tooltip.vue
@@ -50,7 +50,7 @@ export default {
:message="s__('CascadingSettings|This setting has been enforced by an owner of %{link}.')"
>
<template #link>
- <gl-link :href="ancestorNamespace.path" class="gl-font-sm">{{
+ <gl-link :href="ancestorNamespace.path" class="gl-text-sm">{{
ancestorNamespace.fullName
}}</gl-link>
</template>
diff --git a/app/assets/javascripts/network/branch_graph.js b/app/assets/javascripts/network/branch_graph.js
index 8adac3b65054b5c45822d25b5ad9340b164c875f..195cfc326f3097938bed62405ddb72f540660f12 100644
--- a/app/assets/javascripts/network/branch_graph.js
+++ b/app/assets/javascripts/network/branch_graph.js
@@ -272,7 +272,7 @@ export default class BranchGraph {
.text(this.offsetX + this.unitSpace * this.mspace + 35, y, commit.message.split('\n')[0])
.attr({
fill: 'currentColor',
- class: 'gl-text-body',
+ class: 'gl-text-primary',
'text-anchor': 'start',
font: '14px Monaco, monospace',
});
diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue
index 211a12208c110f6fc63056c35e5abd185160318d..d4854a482e2388a50f504a2a91c3684dba22e275 100644
--- a/app/assets/javascripts/notebook/cells/code/index.vue
+++ b/app/assets/javascripts/notebook/cells/code/index.vue
@@ -51,7 +51,7 @@ export default {
language="python"
:code="code"
:max-height="maxHeight"
- class="gl-border gl-p-4!"
+ class="gl-border !gl-p-4"
/>
</div>
</template>
diff --git a/app/assets/javascripts/notes/components/comment_field_layout.vue b/app/assets/javascripts/notes/components/comment_field_layout.vue
index 3011e549fa70a9fd22806afff288744dc400a917..01eae3e0512b4b442a4d95860407c63146e9b1b0 100644
--- a/app/assets/javascripts/notes/components/comment_field_layout.vue
+++ b/app/assets/javascripts/notes/components/comment_field_layout.vue
@@ -68,7 +68,7 @@ export default {
></div>
<noteable-warning
v-if="hasWarning"
- class="gl-pt-4 gl-pb-5 -gl-mb-3 gl-rounded-lg gl-rounded-bottom-left-none gl-rounded-bottom-right-none"
+ class="-gl-mb-3 gl-rounded-lg gl-rounded-bl-none gl-rounded-br-none gl-pb-5 gl-pt-4"
:is-locked="isLocked"
:is-confidential="isConfidential"
:noteable-type="noteableType"
@@ -80,15 +80,15 @@ export default {
v-if="showAttachmentWarning"
:class="{
'gl-py-3': !showEmailParticipantsWarning,
- 'gl-pt-4 gl-pb-3 -gl-mt-3': showEmailParticipantsWarning,
+ '-gl-mt-3 gl-pb-3 gl-pt-4': showEmailParticipantsWarning,
}"
/>
<email-participants-warning
v-if="showEmailParticipantsWarning"
- class="gl-border-t-1 gl-rounded-lg gl-rounded-top-left-none! gl-rounded-top-right-none!"
+ class="gl-rounded-lg !gl-rounded-tl-none !gl-rounded-tr-none gl-border-t-1"
:class="{
- 'gl-pt-4 gl-pb-3 -gl-mt-3': !showAttachmentWarning,
- 'gl-py-3 gl-mt-1': showAttachmentWarning,
+ '-gl-mt-3 gl-pb-3 gl-pt-4': !showAttachmentWarning,
+ 'gl-mt-1 gl-py-3': showAttachmentWarning,
}"
:emails="emailParticipants"
/>
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 721687dc6a684f31474493736d362406d33b3fa7..9753b4e6eb21fa7f48cd173fd1aa70cd8d60bf6e 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -395,7 +395,7 @@ export default {
<gl-form-checkbox
v-if="canSetInternalNote"
v-model="noteIsInternal"
- class="gl-mb-2 gl-flex-basis-full"
+ class="gl-mb-2 gl-basis-full"
data-testid="internal-note-checkbox"
>
{{ $options.i18n.internal }}
diff --git a/app/assets/javascripts/notes/components/comment_type_dropdown.vue b/app/assets/javascripts/notes/components/comment_type_dropdown.vue
index 271e00f1c80b53709216d087b18a96742305de7e..a5b187bfa1d94ea0d694cd901c49995c904a8217 100644
--- a/app/assets/javascripts/notes/components/comment_type_dropdown.vue
+++ b/app/assets/javascripts/notes/components/comment_type_dropdown.vue
@@ -137,7 +137,7 @@ export default {
<template>
<gl-button-group
- class="js-comment-button js-comment-submit-button comment-type-dropdown gl-w-full gl-mb-3 gl-md-w-auto gl-md-mb-0"
+ class="js-comment-button js-comment-submit-button comment-type-dropdown gl-mb-3 gl-w-full md:gl-mb-0 md:gl-w-auto"
:data-track-label="trackingLabel"
data-track-action="click_button"
data-testid="comment-button"
diff --git a/app/assets/javascripts/notes/components/diff_discussion_header.vue b/app/assets/javascripts/notes/components/diff_discussion_header.vue
index 0f61476ac16fd96deb7be7594b63bae542c0b73c..29f847ae526bb486af350e28b35dbd1ad9d5740b 100644
--- a/app/assets/javascripts/notes/components/diff_discussion_header.vue
+++ b/app/assets/javascripts/notes/components/diff_discussion_header.vue
@@ -106,8 +106,8 @@ export default {
</script>
<template>
- <div class="discussion-header gl-display-flex gl-align-items-center">
- <div v-once class="timeline-avatar gl-align-self-start gl-flex-shrink-0 gl-flex-shrink">
+ <div class="discussion-header gl-flex gl-items-center">
+ <div v-once class="timeline-avatar gl-flex-shrink gl-shrink-0 gl-self-start">
<gl-avatar-link
v-if="author"
:href="author.path"
@@ -118,7 +118,7 @@ export default {
<gl-avatar :src="author.avatar_url" :alt="author.name" :size="32" />
</gl-avatar-link>
</div>
- <div class="timeline-content gl-w-full gl-ml-3" :class="toggleClass">
+ <div class="timeline-content gl-ml-3 gl-w-full" :class="toggleClass">
<note-header
:author="author"
:created-at="firstNote.created_at"
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index 5e3b89a6be50a84c8ee4d91841a583430421ef08..e1d017d572ae6349b17114cefe7ffe24334ef976 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -130,7 +130,7 @@ export default {
<td v-if="error" class="js-error-lazy-load-diff diff-loading-error-block">
{{ __('Unable to load the diff') }}
<gl-button
- class="gl-font-regular js-toggle-lazy-diff-retry-button"
+ class="js-toggle-lazy-diff-retry-button gl-font-regular"
@click="fetchDiff"
>
{{ __('Try again') }}
@@ -144,7 +144,7 @@ export default {
</tr>
</template>
<tr class="notes_holder">
- <td :class="{ 'gl-border-top-0!': isFileDiscussion }" class="notes-content" colspan="3">
+ <td :class="{ '!gl-border-t-0': isFileDiscussion }" class="notes-content" colspan="3">
<slot></slot>
</td>
</tr>
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index e14803efba2ce9bcb34ac79184005694a574be47..36cd6a69605ed555c828b1a922bd3433a74f79ea 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -119,10 +119,10 @@ export default {
v-if="resolvableDiscussionsCount > 0"
id="discussionCounter"
ref="discussionCounter"
- class="gl-display-flex discussions-counter"
+ class="discussions-counter gl-flex"
>
<div
- class="gl-display-flex gl-align-items-center gl-pl-4 gl-rounded-base gl-min-h-7"
+ class="gl-flex gl-min-h-7 gl-items-center gl-rounded-base gl-pl-4"
:class="{
'gl-bg-orange-50': blocksMerge && !allResolved,
'gl-bg-gray-50': !blocksMerge || allResolved,
@@ -143,7 +143,7 @@ export default {
:title="__('Thread options')"
:aria-label="__('Thread options')"
toggle-class="btn-icon"
- class="gl-rounded-base! gl-pt-0! gl-h-full gl-ml-3"
+ class="gl-ml-3 gl-h-full !gl-rounded-base !gl-pt-0"
:items="threadOptions"
/>
</template>
@@ -154,7 +154,7 @@ export default {
v-gl-tooltip.html="previousUnresolvedDiscussionTooltip"
:aria-label="previousUnresolvedDiscussionTitle"
:aria-keyshortcuts="previousUnresolvedDiscussionShortcutKey"
- class="discussion-previous-btn gl-rounded-base! gl-px-2!"
+ class="discussion-previous-btn !gl-rounded-base !gl-px-2"
data-track-action="click_button"
data-track-label="mr_previous_unresolved_thread"
data-track-property="click_previous_unresolved_thread_top"
@@ -166,7 +166,7 @@ export default {
v-gl-tooltip.html="nextUnresolvedDiscussionTooltip"
:aria-label="nextUnresolvedDiscussionTitle"
:aria-keyshortcuts="nextUnresolvedDiscussionShortcutKey"
- class="discussion-next-btn gl-rounded-base! gl-px-2!"
+ class="discussion-next-btn !gl-rounded-base !gl-px-2"
data-track-action="click_button"
data-track-label="mr_next_unresolved_thread"
data-track-property="click_next_unresolved_thread_top"
@@ -184,7 +184,7 @@ export default {
:title="__('Thread options')"
:aria-label="__('Thread options')"
toggle-class="btn-icon"
- class="gl-rounded-base! gl-pt-0!"
+ class="!gl-rounded-base !gl-pt-0"
:items="threadOptions"
/>
</gl-button-group>
diff --git a/app/assets/javascripts/notes/components/discussion_filter.vue b/app/assets/javascripts/notes/components/discussion_filter.vue
index 96d71915f7995ff28c40d3a65be7a4966eebc11f..38f386c7d5fdecd0c078f41304b17991abd52566 100644
--- a/app/assets/javascripts/notes/components/discussion_filter.vue
+++ b/app/assets/javascripts/notes/components/discussion_filter.vue
@@ -163,7 +163,7 @@ export default {
v-if="displayFilters"
id="discussion-preferences"
data-testid="discussion-preferences"
- class="gl-display-inline-block gl-align-bottom full-width-mobile"
+ class="full-width-mobile gl-inline-block gl-align-bottom"
>
<local-storage-sync
:value="sortDirection"
diff --git a/app/assets/javascripts/notes/components/discussion_filter_note.vue b/app/assets/javascripts/notes/components/discussion_filter_note.vue
index 9b838571d2cbca28d1d6813466a24e3e7070278f..9b2bad3856b40cd732b9bc97bb76aaa9d9cdd8d5 100644
--- a/app/assets/javascripts/notes/components/discussion_filter_note.vue
+++ b/app/assets/javascripts/notes/components/discussion_filter_note.vue
@@ -29,7 +29,7 @@ export default {
data-testid="discussion-filter-container"
>
<div
- class="gl-float-left gl-flex gl-justify-center gl-items-center gl-rounded-full -gl-mt-1 gl-ml-2 gl-w-6 gl-h-6 gl-bg-gray-50 gl-text-gray-600"
+ class="gl-float-left -gl-mt-1 gl-ml-2 gl-flex gl-h-6 gl-w-6 gl-items-center gl-justify-center gl-rounded-full gl-bg-gray-50 gl-text-gray-600"
>
<gl-icon name="comment" />
</div>
@@ -41,7 +41,7 @@ export default {
</template>
</gl-sprintf>
</div>
- <div class="discussion-filter-actions gl-mt-3 gl-display-flex">
+ <div class="discussion-filter-actions gl-mt-3 gl-flex">
<gl-button variant="default" class="gl-mr-3" @click="selectFilter(0)">
{{ __('Show all activity') }}
</gl-button>
diff --git a/app/assets/javascripts/notes/components/discussion_locked_widget.vue b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
index 88fec0dfb9b37b2fbc11b6c4bf92b935d71fa01b..9503ab92603e5b2ab39fd30564df6f5db0f6f790 100644
--- a/app/assets/javascripts/notes/components/discussion_locked_widget.vue
+++ b/app/assets/javascripts/notes/components/discussion_locked_widget.vue
@@ -36,9 +36,7 @@ export default {
<template>
<div class="gl-mt-3" data-testid="disabled-comments">
- <span
- class="issuable-note-warning gl-display-inline-block gl-w-full gl-px-5 gl-py-4 gl-rounded-base"
- >
+ <span class="issuable-note-warning gl-inline-block gl-w-full gl-rounded-base gl-px-5 gl-py-4">
<gl-icon :size="16" name="lock" class="icon" />
<span v-if="isProjectArchived">
{{ projectArchivedWarning }}
diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index 71674169af0083744d29ef53b9228e6c80c5b2ef..3dd0799ca402c27350cfed9b48d4b22738c65b14 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -148,7 +148,7 @@ export default {
:is-overview-tab="isOverviewTab"
:should-scroll-to-note="shouldScrollToNote"
:internal-note="isDiscussionInternal"
- :class="{ 'gl-border-top-0!': isFileDiscussion }"
+ :class="{ '!gl-border-t-0': isFileDiscussion }"
@handleDeleteNote="$emit('deleteNote')"
@startReplying="$emit('startReplying')"
>
diff --git a/app/assets/javascripts/notes/components/discussion_notes_replies_wrapper.vue b/app/assets/javascripts/notes/components/discussion_notes_replies_wrapper.vue
index 571928b972be600f805bbd221a99176d90d8bc68..49ef23c9ebfd63feed75a0129635282bd13d0af9 100644
--- a/app/assets/javascripts/notes/components/discussion_notes_replies_wrapper.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes_replies_wrapper.vue
@@ -21,7 +21,7 @@ export default {
'li',
{
class:
- 'discussion-collapsible gl-border-solid gl-border-gray-100 gl-border-1 gl-rounded-base gl-border-top-0',
+ 'discussion-collapsible gl-border-solid gl-border-gray-100 gl-border-1 gl-rounded-base gl-border-t-0',
},
[h('ul', { class: 'notes' }, children)],
);
diff --git a/app/assets/javascripts/notes/components/discussion_resolve_button.vue b/app/assets/javascripts/notes/components/discussion_resolve_button.vue
index cc4f360a694d11e3a02bea900dcb31f606fe7cdd..ac1876a14a3f1a575c255cb9d85cf503f68197f5 100644
--- a/app/assets/javascripts/notes/components/discussion_resolve_button.vue
+++ b/app/assets/javascripts/notes/components/discussion_resolve_button.vue
@@ -23,7 +23,7 @@ export default {
<template>
<gl-button
:loading="isResolving"
- class="gl-w-full gl-sm-w-auto ml-sm-2"
+ class="ml-sm-2 gl-w-full sm:gl-w-auto"
@click="$emit('onClick')"
>
{{ buttonTitle }}
diff --git a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
index 34cbba8ce43ac85564d6431083a0914fa466ba39..fbc8cd154e88e60bb5938871cd884a0165543c0c 100644
--- a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
+++ b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
@@ -29,7 +29,7 @@ export default {
:href="url"
:title="$options.i18n.buttonLabel"
:aria-label="$options.i18n.buttonLabel"
- class="new-issue-for-discussion discussion-create-issue-btn gl-w-full gl-sm-w-auto"
+ class="new-issue-for-discussion discussion-create-issue-btn gl-w-full sm:gl-w-auto"
icon="issue-new"
/>
</div>
diff --git a/app/assets/javascripts/notes/components/mr_discussion_filter.vue b/app/assets/javascripts/notes/components/mr_discussion_filter.vue
index feb6b7377f0061968880ad10926631d31441bb78..2e3c525a2aefefb6668d56d6f84390616e941b8d 100644
--- a/app/assets/javascripts/notes/components/mr_discussion_filter.vue
+++ b/app/assets/javascripts/notes/components/mr_discussion_filter.vue
@@ -146,7 +146,7 @@ export default {
@select="select"
>
<template #toggle>
- <gl-button class="gl-rounded-top-right-none! gl-rounded-bottom-right-none!">
+ <gl-button class="!gl-rounded-br-none !gl-rounded-tr-none">
<gl-sprintf :message="selectedFilterText">
<template #strong="{ content }">
<strong>{{ content }}</strong>
diff --git a/app/assets/javascripts/notes/components/note_edited_text.vue b/app/assets/javascripts/notes/components/note_edited_text.vue
index 25c82c29a29c088d92c0499de692ecea43adf0ba..4c4e7ce14f1dc08286fa8a958015d10cf8fbf7e3 100644
--- a/app/assets/javascripts/notes/components/note_edited_text.vue
+++ b/app/assets/javascripts/notes/components/note_edited_text.vue
@@ -56,7 +56,7 @@ export default {
<gl-link
:href="editedBy.path"
:data-user-id="editedBy.id"
- class="js-user-link author-link gl-hover-text-decoration-underline"
+ class="js-user-link author-link hover:gl-underline"
>
{{ editedBy.name }}
</gl-link>
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index de1bd5590019c427faf652658bd807a9be450270..019e994662410a77a59da1e6ba07865ed4ec33b9 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -399,12 +399,12 @@ export default {
</template>
<template v-if="showBatchCommentsActions">
- <div class="gl-display-flex gl-flex-wrap -gl-mb-3">
+ <div class="-gl-mb-3 gl-flex gl-flex-wrap">
<gl-button
:disabled="isDisabled"
category="primary"
variant="confirm"
- class="gl-sm-mr-3 gl-mb-3"
+ class="gl-mb-3 sm:gl-mr-3"
data-testid="start-review-button"
@click="handleAddToReview"
>
@@ -416,13 +416,13 @@ export default {
category="secondary"
variant="confirm"
data-testid="comment-now-button"
- class="gl-sm-mr-3 gl-mb-3 js-comment-button"
+ class="js-comment-button gl-mb-3 sm:gl-mr-3"
@click="handleUpdate()"
>
{{ __('Add comment now') }}
</gl-button>
<gl-button
- class="note-edit-cancel gl-mb-3 js-close-discussion-note-form"
+ class="note-edit-cancel js-close-discussion-note-form gl-mb-3"
category="secondary"
variant="default"
data-testid="cancelBatchCommentsEnabled"
@@ -433,13 +433,13 @@ export default {
</div>
</template>
<template v-else>
- <div class="gl-display-sm-flex gl-flex-wrap gl-font-size-0">
+ <div class="gl-display-sm-flex gl-font-size-0 gl-flex-wrap">
<gl-button
:disabled="isDisabled"
category="primary"
variant="confirm"
data-testid="reply-comment-button"
- class="gl-sm-mr-3 gl-mb-3 gl-sm-mb-0 js-vue-issue-save js-comment-button"
+ class="js-vue-issue-save js-comment-button gl-mb-3 sm:gl-mb-0 sm:gl-mr-3"
@click="handleUpdate()"
>
{{ saveButtonTitle }}
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 1c645fb7333dea737f59ad394e7c003a87ce5418..491ed9634801fb97e5867dd104954b602e502482 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -209,7 +209,7 @@ export default {
</a>
<span
v-if="!isSystemNote && !emailParticipant"
- class="text-nowrap author-username gl-text-truncate"
+ class="text-nowrap author-username gl-truncate"
>
<a
ref="authorUsernameLink"
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index 03e954d185931c00ca29fd82fb2441a0668cc1ee..150c0b4bd092cd34918bbe662bc46193f606e299 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -178,9 +178,9 @@ export default {
},
discussionHolderClass() {
return {
- 'is-replying gl-pt-0!': this.isReplying,
+ 'is-replying !gl-pt-0': this.isReplying,
'internal-note': this.isDiscussionInternal,
- 'gl-pt-0!': !this.discussion.diff_discussion && this.isReplying,
+ '!gl-pt-0': !this.discussion.diff_discussion && this.isReplying,
};
},
hasDraft() {
@@ -341,7 +341,7 @@ export default {
<li
v-else-if="canShowReplyActions && showReplies"
data-testid="reply-wrapper"
- class="discussion-reply-holder gl-border-t-0! gl-pb-5! clearfix"
+ class="discussion-reply-holder clearfix !gl-border-t-0 !gl-pb-5"
:class="discussionHolderClass"
>
<discussion-actions
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index bc460f55eb498ad0f2c6f50831aab3b2d0b8861a..a5827cc815cdeb55a9355eecd86556050cf4f6ac 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -412,7 +412,7 @@ export default {
<div
v-if="showMultiLineComment"
data-testid="multiline-comment"
- class="gl-text-gray-500 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-px-5 gl-py-3"
+ class="gl-border-b-1 gl-border-gray-100 gl-px-5 gl-py-3 gl-text-gray-500 gl-border-b-solid"
>
<gl-sprintf :message="__('Comment on lines %{startLine} to %{endLine}')">
<template #startLine>
diff --git a/app/assets/javascripts/notes/components/notes_activity_header.vue b/app/assets/javascripts/notes/components/notes_activity_header.vue
index cb088b7d7c2e82bbf6e26efceeeb0a1e5405fdae..5758a0834c2041cbdae9a9724e156ce9a76fc9fe 100644
--- a/app/assets/javascripts/notes/components/notes_activity_header.vue
+++ b/app/assets/javascripts/notes/components/notes_activity_header.vue
@@ -51,10 +51,10 @@ export default {
<template>
<div
- class="gl-display-flex gl-sm-align-items-center gl-flex-direction-column gl-sm-flex-direction-row gl-justify-content-space-between gl-pt-5 gl-pb-3"
+ class="gl-flex gl-flex-col gl-justify-between gl-pb-3 gl-pt-5 sm:gl-flex-row sm:gl-items-center"
>
- <h2 class="gl-font-size-h1 gl-m-0">{{ __('Activity') }}</h2>
- <div class="gl-display-flex gl-gap-3 gl-w-full gl-sm-w-auto gl-mt-3 gl-sm-mt-0">
+ <h2 class="gl-m-0 gl-text-size-h1">{{ __('Activity') }}</h2>
+ <div class="gl-mt-3 gl-flex gl-w-full gl-gap-3 sm:gl-mt-0 sm:gl-w-auto">
<ai-summarize-notes
v-if="showAiActions"
:resource-global-id="resourceGlobalId"
diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
index fe2e78c81cb27c0ac59a8135408b113d4daf1747..9fed414394c28f16e4498770627b0c581e3e1383 100644
--- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue
+++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue
@@ -40,7 +40,7 @@ export default {
},
liClasses() {
return this.collapsed
- ? 'gl-text-gray-500 gl-rounded-bottom-left-base! gl-rounded-bottom-right-base!'
+ ? 'gl-text-gray-500 !gl-rounded-bl-base !gl-rounded-br-base'
: 'gl-border-b';
},
buttonIcon() {
@@ -62,11 +62,11 @@ export default {
<template>
<li
:class="liClasses"
- class="toggle-replies-widget gl-display-flex! gl-align-items-center gl-flex-wrap gl-bg-gray-10 gl-py-3 gl-px-5 gl-border"
+ class="toggle-replies-widget gl-border !gl-flex gl-flex-wrap gl-items-center gl-bg-gray-10 gl-px-5 gl-py-3"
>
<gl-button
ref="toggle"
- class="gl-my-2 gl-mr-3 gl-p-0!"
+ class="gl-my-2 gl-mr-3 !gl-p-0"
category="tertiary"
:icon="buttonIcon"
:aria-label="buttonLabel"
@@ -99,7 +99,7 @@ export default {
<template #name>
<gl-link
:href="lastReply.author.path || lastReply.author.webUrl"
- class="gl-text-body! gl-text-decoration-none! gl-mx-2"
+ class="gl-mx-2 !gl-text-primary !gl-no-underline"
>
{{ lastReply.author.name }}
</gl-link>
@@ -112,7 +112,7 @@ export default {
</template>
<gl-button
v-else
- class="gl-text-body! gl-text-decoration-none!"
+ class="!gl-text-primary !gl-no-underline"
variant="link"
data-testid="collapse-replies-button"
@click="toggle"
diff --git a/app/assets/javascripts/notifications/components/notifications_dropdown_item.vue b/app/assets/javascripts/notifications/components/notifications_dropdown_item.vue
index ff7b9a73029ee2c9fc255ef82eb8753d8c324aef..5a11bcf713efa80e8153ca6b9d7758892955156d 100644
--- a/app/assets/javascripts/notifications/components/notifications_dropdown_item.vue
+++ b/app/assets/javascripts/notifications/components/notifications_dropdown_item.vue
@@ -39,7 +39,7 @@ export default {
:class="{ 'is-active': isActive }"
@click="$emit('item-selected', level)"
>
- <div class="gl-display-flex gl-flex-direction-column">
+ <div class="gl-flex gl-flex-col">
<span class="gl-font-bold">{{ title }}</span>
<span class="gl-text-gray-500">{{ description }}</span>
</div>
diff --git a/app/assets/javascripts/oauth_application/components/oauth_secret.vue b/app/assets/javascripts/oauth_application/components/oauth_secret.vue
index c4d77f108fe19e0433366cf518e8a92286c828b0..68779c800572da30a0d54fc82a83aef101448e78 100644
--- a/app/assets/javascripts/oauth_application/components/oauth_secret.vue
+++ b/app/assets/javascripts/oauth_application/components/oauth_secret.vue
@@ -76,7 +76,7 @@ export default {
</script>
<template>
- <div class="gl-display-flex gl-flex-wrap gl-gap-5">
+ <div class="gl-flex gl-flex-wrap gl-gap-5">
<input-copy-toggle-visibility
v-if="secret"
:copy-button-title="$options.COPY_SECRET"
@@ -89,7 +89,7 @@ export default {
</template>
</input-copy-toggle-visibility>
- <gl-button category="secondary" class="gl-align-self-start" @click="displayModal">{{
+ <gl-button category="secondary" class="gl-self-start" @click="displayModal">{{
$options.RENEW_SECRET
}}</gl-button>
diff --git a/app/assets/javascripts/observability/components/date_range_filter.vue b/app/assets/javascripts/observability/components/date_range_filter.vue
index 43cff0fba1f15f7ed5b11fc8257a31cdb0a957a0..db844a2eb18434e804dc4731ec021dae02cc7c90 100644
--- a/app/assets/javascripts/observability/components/date_range_filter.vue
+++ b/app/assets/javascripts/observability/components/date_range_filter.vue
@@ -99,10 +99,7 @@ export default {
</script>
<template>
- <div
- class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-gap-3"
- data-testid="date-range-filter"
- >
+ <div class="gl-flex gl-flex-col gl-gap-3 lg:gl-flex-row" data-testid="date-range-filter">
<date-ranges-dropdown
:selected="dateRange.value"
:date-range-options="dateRangeOptions"
diff --git a/ee/app/assets/javascripts/maintenance_mode_settings/components/app.vue b/ee/app/assets/javascripts/maintenance_mode_settings/components/app.vue
index 5524f6ed7ec90a422ab8b824c6a59fca6f3a6755..7f5066cbc57b9265bc6136b4767756f6dd12d703 100644
--- a/ee/app/assets/javascripts/maintenance_mode_settings/components/app.vue
+++ b/ee/app/assets/javascripts/maintenance_mode_settings/components/app.vue
@@ -40,7 +40,7 @@ export default {
<section>
<gl-loading-icon v-if="loading" size="xl" />
<gl-form v-else @submit.prevent="updateMaintenanceModeSettings">
- <div class="gl-display-flex gl-align-items-center gl-mb-4">
+ <div class="gl-mb-4 gl-flex gl-items-center">
<gl-toggle
v-model="maintenanceEnabled"
:label="$options.i18n.toggleLabel"
diff --git a/ee/app/assets/javascripts/members/components/action_dropdowns/manage_roles_dropdown_footer.vue b/ee/app/assets/javascripts/members/components/action_dropdowns/manage_roles_dropdown_footer.vue
index b86aaddcfa5b3c180f658560eb4fe9bf2d3396ff..59081415834086753f128130a801e07ed13bb284 100644
--- a/ee/app/assets/javascripts/members/components/action_dropdowns/manage_roles_dropdown_footer.vue
+++ b/ee/app/assets/javascripts/members/components/action_dropdowns/manage_roles_dropdown_footer.vue
@@ -18,7 +18,7 @@ export default {
<gl-button
:href="manageMemberRolesPath"
category="tertiary"
- class="gl-w-full gl-justify-content-start!"
+ class="gl-w-full !gl-justify-start"
>
{{ s__('MemberRole|Manage roles') }}
</gl-button>
diff --git a/ee/app/assets/javascripts/members/promotion_requests/components/app.vue b/ee/app/assets/javascripts/members/promotion_requests/components/app.vue
index 70a06636eba3d6cdd9e87aa431bc6703ab315ff5..c4f3a6074713e3b3d3176f5418f06fc557d92282 100644
--- a/ee/app/assets/javascripts/members/promotion_requests/components/app.vue
+++ b/ee/app/assets/javascripts/members/promotion_requests/components/app.vue
@@ -137,7 +137,7 @@ export default {
<user-date :date="item.createdAt" />
</template>
</gl-table>
- <div class="gl-flex gl-flex-col gl-items-center gl-mt-4">
+ <div class="gl-mt-4 gl-flex gl-flex-col gl-items-center">
<gl-keyset-pagination
v-bind="pendingMemberApprovals.pageInfo"
:disabled="isLoading"
diff --git a/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules.vue b/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules.vue
index a650c5389b39609a7902463cc7b0cb975e44a013..993ce2ea425fcd2166b78dfca71a7a1b608e2397 100644
--- a/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules.vue
+++ b/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules.vue
@@ -51,19 +51,19 @@ export default {
fields: [
{
key: 'rule_name',
- thClass: 'gl-text-secondary! gl-font-sm! !gl-font-semibold gl-border-t-0! w-60p',
- class: 'gl-px-0! gl-py-4!',
+ thClass: '!gl-text-secondary !gl-text-sm !gl-font-semibold !gl-border-t-0 w-60p',
+ class: '!gl-px-0 !gl-py-4',
},
{
key: 'rule_approvals',
- thClass: 'gl-text-secondary! gl-font-sm! !gl-font-semibold gl-border-t-0! w-30p',
- class: 'gl-px-0! gl-py-4!',
+ thClass: '!gl-text-secondary !gl-text-sm !gl-font-semibold !gl-border-t-0 w-30p',
+ class: '!gl-px-0 !gl-py-4',
},
{
key: 'dropdown',
label: '',
- thClass: 'gl-border-t-0! w-30p',
- class: 'gl-px-0! gl-py-4!',
+ thClass: '!gl-border-t-0 w-30p',
+ class: '!gl-px-0 !gl-py-4',
},
],
};
@@ -71,19 +71,19 @@ export default {
<template>
<div class="gl-mb-2">
- <gl-table-lite :items="filteredRules" :fields="$options.fields" class="gl-mb-0!">
+ <gl-table-lite :items="filteredRules" :fields="$options.fields" class="!gl-mb-0">
<template #head(rule_name)>{{ group.label }}</template>
<template #head(rule_approvals)>{{ __('Approvals') }}</template>
<template #cell(rule_name)="{ item }">{{ item.name }}</template>
<template #cell(rule_approvals)="{ item }">{{ getApprovalsLeftText(item) }}</template>
<template #cell(dropdown)="{ item }">
- <div class="gl-display-flex gl-justify-content-end">
+ <div class="gl-flex gl-justify-end">
<reviewer-dropdown :selected-reviewers="reviewers" :users="item.eligibleApprovers" />
</div>
</template>
</gl-table-lite>
- <div v-if="optionalRulesLength" class="gl-py-3 gl-border-b">
+ <div v-if="optionalRulesLength" class="gl-border-b gl-py-3">
<gl-button
category="tertiary"
size="small"
diff --git a/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules_wrapper.vue b/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules_wrapper.vue
index d58bbce6f0770bfefb35a50705ea3a9fee8c1a47..e3ea12887c04fb5c1bc8ee3d9178c4b36c3f716f 100644
--- a/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules_wrapper.vue
+++ b/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules_wrapper.vue
@@ -86,10 +86,10 @@ export default {
<template>
<div v-if="isLoading">
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-mb-3 gl-max-w-30!"></div>
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-mb-3 gl-max-w-30!"></div>
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-mb-3 gl-max-w-30!"></div>
- <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-mb-3 gl-max-w-30!"></div>
+ <div class="gl-animate-skeleton-loader gl-mb-3 gl-h-4 !gl-max-w-30 gl-rounded-base"></div>
+ <div class="gl-animate-skeleton-loader gl-mb-3 gl-h-4 !gl-max-w-30 gl-rounded-base"></div>
+ <div class="gl-animate-skeleton-loader gl-mb-3 gl-h-4 !gl-max-w-30 gl-rounded-base"></div>
+ <div class="gl-animate-skeleton-loader gl-mb-3 gl-h-4 !gl-max-w-30 gl-rounded-base"></div>
</div>
<div v-else>
<approval-rules
diff --git a/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_summary.vue b/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_summary.vue
index 5d266816fcba7097a711ba27563759275b03efc2..f35237850d526d4a001fe4077d8a0a30f682dba2 100644
--- a/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_summary.vue
+++ b/ee/app/assets/javascripts/merge_requests/components/reviewers/approval_summary.vue
@@ -97,9 +97,9 @@ export default {
<template>
<div
v-if="isLoading"
- class="gl-animate-skeleton-loader gl-mt-3 gl-h-4 gl-rounded-base gl-w-full"
+ class="gl-animate-skeleton-loader gl-mt-3 gl-h-4 gl-w-full gl-rounded-base"
></div>
- <p v-else-if="mergeRequest" :class="{ 'text-muted': approvalsOptional }" class="gl-mt-3 gl-mb-0">
+ <p v-else-if="mergeRequest" :class="{ 'text-muted': approvalsOptional }" class="gl-mb-0 gl-mt-3">
{{ approvalsLeftMessage }}
</p>
</template>
diff --git a/ee/app/assets/javascripts/merge_requests/components/summarize_code_changes.vue b/ee/app/assets/javascripts/merge_requests/components/summarize_code_changes.vue
index 498724d076f9a6cdc15feed3d8a69b6bd24ea524..4d18f8705f5bdc1b50059a1c7a2f30b0f09fcc9b 100644
--- a/ee/app/assets/javascripts/merge_requests/components/summarize_code_changes.vue
+++ b/ee/app/assets/javascripts/merge_requests/components/summarize_code_changes.vue
@@ -87,7 +87,7 @@ export default {
</script>
<template>
- <div class="gl-ml-auto gl-mb-4">
+ <div class="gl-mb-4 gl-ml-auto">
<gl-button
ref="button"
icon="tanuki-ai"
@@ -111,7 +111,7 @@ export default {
@close-button-clicked="dismiss"
>
<div v-outside="() => dismiss()">
- <p class="gl-mb-2 -gl-mt-3">
+ <p class="-gl-mt-3 gl-mb-2">
<gl-icon name="tanuki-ai" class="gl-mr-2" />
<strong>{{ __('Introducing: Summarize code changes') }}</strong>
</p>
diff --git a/ee/app/assets/javascripts/metrics/details/filter_bar/groupby_filter.vue b/ee/app/assets/javascripts/metrics/details/filter_bar/groupby_filter.vue
index d67f6a024fc942def5f693c41c9dd1fb5c0d78a4..bc5cb359e0d17dd54568f80832cde0d4fd562f33 100644
--- a/ee/app/assets/javascripts/metrics/details/filter_bar/groupby_filter.vue
+++ b/ee/app/assets/javascripts/metrics/details/filter_bar/groupby_filter.vue
@@ -88,7 +88,7 @@ export default {
</script>
<template>
- <div class="gl-display-flex gl-flex-direction-row gl-align-items-center gl-gap-3">
+ <div class="gl-flex gl-flex-row gl-items-center gl-gap-3">
<gl-collapsible-listbox
v-model="groupByFunction"
data-testid="group-by-function-dropdown"
diff --git a/ee/app/assets/javascripts/metrics/details/filter_bar/metrics_filtered_search.vue b/ee/app/assets/javascripts/metrics/details/filter_bar/metrics_filtered_search.vue
index 0907d43dce1823bcef020fe30d0ebd2994b91da0..e13453fc46a125ac3e305d7d50bede7f9103fb22 100644
--- a/ee/app/assets/javascripts/metrics/details/filter_bar/metrics_filtered_search.vue
+++ b/ee/app/assets/javascripts/metrics/details/filter_bar/metrics_filtered_search.vue
@@ -115,10 +115,10 @@ export default {
<template>
<div
- class="gl-mt-3 gl-mb-6 gl-py-5 gl-px-3 gl-bg-gray-10 gl-border-b-1 gl-border-b-solid gl-border-t-1 gl-border-t-solid gl-border-gray-100"
+ class="gl-mb-6 gl-mt-3 gl-border-b-1 gl-border-t-1 gl-border-gray-100 gl-bg-gray-10 gl-px-3 gl-py-5 gl-border-b-solid gl-border-t-solid"
>
<filtered-search
- class="filtered-search-box gl-display-flex gl-border-none"
+ class="filtered-search-box gl-flex gl-border-none"
recent-searches-storage-key="recent-metrics-filter-search"
namespace="metrics-details-filtered-search"
:search-input-placeholder="$options.i18n.searchInputPlaceholder"
@@ -147,7 +147,7 @@ export default {
<gl-button
type="submit"
:variant="loading ? 'danger' : 'confirm'"
- class="gl-my-5 gl-mb-0!"
+ class="gl-my-5 !gl-mb-0"
@click="onSubmit"
>
<template v-if="loading">
diff --git a/ee/app/assets/javascripts/metrics/details/metrics_details.vue b/ee/app/assets/javascripts/metrics/details/metrics_details.vue
index 9c91ebb18c673aa7c7b47247f5bf885d91c4dfc7..8488e86e923a248b3cd9012e519655b9a4865c0c 100644
--- a/ee/app/assets/javascripts/metrics/details/metrics_details.vue
+++ b/ee/app/assets/javascripts/metrics/details/metrics_details.vue
@@ -296,7 +296,7 @@ export default {
<gl-empty-state v-else :svg-path="$options.EMPTY_CHART_SVG">
<template #title>
- <p class="gl-font-lg gl-my-0">
+ <p class="gl-my-0 gl-text-lg">
<gl-sprintf
:message="
s__('ObservabilityMetrics|No data found for the selected time range %{time}')
diff --git a/ee/app/assets/javascripts/metrics/details/metrics_heatmap.vue b/ee/app/assets/javascripts/metrics/details/metrics_heatmap.vue
index f5607d7a72b859c5d044fbf468e0decc706a137e..d8ef247adf76e89baca5a120669ca2d5dd78da2e 100644
--- a/ee/app/assets/javascripts/metrics/details/metrics_heatmap.vue
+++ b/ee/app/assets/javascripts/metrics/details/metrics_heatmap.vue
@@ -102,7 +102,7 @@ export default {
/>
<div
v-if="cancelled"
- class="gl-absolute gl-right-0 gl-left-0 gl-top-0 gl-bottom-0 gl-text-center gl-font-bold gl-font-lg gl-py-2"
+ class="gl-absolute gl-bottom-0 gl-left-0 gl-right-0 gl-top-0 gl-py-2 gl-text-center gl-text-lg gl-font-bold"
>
<span>{{ $options.i18n.cancelledText }}</span>
</div>
diff --git a/ee/app/assets/javascripts/metrics/details/metrics_line_chart.vue b/ee/app/assets/javascripts/metrics/details/metrics_line_chart.vue
index ee5621e02c73ffab97ce22e36e368c297be231fc..3075d98beacd79ff8518f1d19a12fdc4f69fd462 100644
--- a/ee/app/assets/javascripts/metrics/details/metrics_line_chart.vue
+++ b/ee/app/assets/javascripts/metrics/details/metrics_line_chart.vue
@@ -119,9 +119,9 @@ export default {
v-for="(metric, index) in tooltipContent"
:key="`${metric.seriesId}_${index}`"
data-testid="metric-tooltip-content"
- class="gl-display-flex gl-justify-content-space-between gl-font-sm gl-mb-1"
+ class="gl-mb-1 gl-flex gl-justify-between gl-text-sm"
>
- <gl-chart-series-label :color="metric.color" class="gl-leading-normal gl-mr-7">
+ <gl-chart-series-label :color="metric.color" class="gl-mr-7 gl-leading-normal">
<div v-for="attr in metric.attributes" :key="attr.key + attr.value">
<span class="gl-font-bold">{{ attr.key }}: </span>{{ attr.value }}
</div>
@@ -136,7 +136,7 @@ export default {
<div
v-if="cancelled"
- class="gl-absolute gl-right-0 gl-left-0 gl-top-0 gl-bottom-0 gl-text-center gl-font-bold gl-font-lg gl-py-13"
+ class="gl-absolute gl-bottom-0 gl-left-0 gl-right-0 gl-top-0 gl-py-13 gl-text-center gl-text-lg gl-font-bold"
>
<span>{{ $options.i18n.cancelledText }}</span>
</div>
diff --git a/ee/app/assets/javascripts/metrics/list/metrics_list.vue b/ee/app/assets/javascripts/metrics/list/metrics_list.vue
index 7587fba432674c2143fbac76dbc2335b9e4a5604..1816c2f87f1cb22206dc474723856c43466b2846 100644
--- a/ee/app/assets/javascripts/metrics/list/metrics_list.vue
+++ b/ee/app/assets/javascripts/metrics/list/metrics_list.vue
@@ -173,7 +173,7 @@ export default {
</header>
<div
- class="gl-mt-3 gl-py-5 gl-px-3 gl-bg-gray-10 gl-border-b-1 gl-border-b-solid gl-border-t-1 gl-border-t-solid gl-border-gray-100"
+ class="gl-mt-3 gl-border-b-1 gl-border-t-1 gl-border-gray-100 gl-bg-gray-10 gl-px-3 gl-py-5 gl-border-b-solid gl-border-t-solid"
>
<filtered-search
:initial-filter-value="initialFilterValue"
diff --git a/ee/app/assets/javascripts/metrics/list/metrics_table.vue b/ee/app/assets/javascripts/metrics/list/metrics_table.vue
index 3bb3e1435a31a2bab73efa318ad5f99ea45abab9..b4fe0c96f6e147a92703beb3e8d2470ba9b8cf80 100644
--- a/ee/app/assets/javascripts/metrics/list/metrics_table.vue
+++ b/ee/app/assets/javascripts/metrics/list/metrics_table.vue
@@ -104,7 +104,7 @@ export default {
<template>
<div>
- <h4 class="gl-block md:!gl-hidden gl-my-5">{{ $options.i18n.title }}</h4>
+ <h4 class="gl-my-5 gl-block md:!gl-hidden">{{ $options.i18n.title }}</h4>
<gl-table
:items="formattedMetrics"
@@ -130,7 +130,7 @@ export default {
v-if="metricAttributesTruncatedItems(item) > 0"
v-gl-tooltip="metricAttributesTooltipContent(item)"
data-testid="metric-attributes-tooltip"
- class="gl-link gl-hover-text-decoration-underline"
+ class="gl-link hover:gl-underline"
>
<gl-sprintf :message="$options.i18n.moreAttributes">
<template #count>{{ metricAttributesTruncatedItems(item) }}</template>
diff --git a/ee/app/assets/javascripts/ml/ai_agents/components/agent_list.vue b/ee/app/assets/javascripts/ml/ai_agents/components/agent_list.vue
index a5a0a36cc80ba201da846b70726f1e63b861358f..6565357c543d5252c7482557fa039610f539cf66 100644
--- a/ee/app/assets/javascripts/ml/ai_agents/components/agent_list.vue
+++ b/ee/app/assets/javascripts/ml/ai_agents/components/agent_list.vue
@@ -111,7 +111,7 @@ export default {
<router-link
:to="{ name: $options.ROUTE_SHOW_AGENT, params: { agentId: item.routeId } }"
data-testid="agent-item"
- class="gl-text-body gl-leading-24"
+ class="gl-leading-24 gl-text-primary"
>
{{ item.name }}
</router-link>
diff --git a/ee/app/assets/javascripts/ml/ai_agents/views/create_agent.vue b/ee/app/assets/javascripts/ml/ai_agents/views/create_agent.vue
index 79abfecd9412776a324bdb327d8ba3fb9e19fd82..bc9bf966a8b2d9633f8a3f7e9a9759be3a44876b 100644
--- a/ee/app/assets/javascripts/ml/ai_agents/views/create_agent.vue
+++ b/ee/app/assets/javascripts/ml/ai_agents/views/create_agent.vue
@@ -60,7 +60,7 @@ export default {
<div>
<title-area>
<template #title>
- <div class="gl-flex-grow-1 gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-grow gl-items-center">
<span>{{ s__('AIAgents|New agent') }}</span>
<gl-experiment-badge />
</div>
diff --git a/ee/app/assets/javascripts/ml/ai_agents/views/edit_agent.vue b/ee/app/assets/javascripts/ml/ai_agents/views/edit_agent.vue
index 3967fb73a1ecb62643bacd675e4aab661ff73ff4..6bea1df98f12765124e0b9ee82bd670729e5ea7c 100644
--- a/ee/app/assets/javascripts/ml/ai_agents/views/edit_agent.vue
+++ b/ee/app/assets/javascripts/ml/ai_agents/views/edit_agent.vue
@@ -137,7 +137,7 @@ export default {
<div v-else>
<title-area>
<template #title>
- <div class="gl-flex-grow-1 gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-grow gl-items-center">
<span>{{ s__('AIAgents|Agent Settings') }}</span>
<gl-experiment-badge />
</div>
diff --git a/ee/app/assets/javascripts/ml/ai_agents/views/list_agents.vue b/ee/app/assets/javascripts/ml/ai_agents/views/list_agents.vue
index d157140130829d618edf3a7eeb69ddb41545da89..29b17a41ff581d6c79cc5f04c060fcf849b517d2 100644
--- a/ee/app/assets/javascripts/ml/ai_agents/views/list_agents.vue
+++ b/ee/app/assets/javascripts/ml/ai_agents/views/list_agents.vue
@@ -30,7 +30,7 @@ export default {
<div>
<title-area>
<template #title>
- <div class="gl-flex-grow-1 gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-grow gl-items-center">
<span>{{ s__('AIAgents|AI Agents') }}</span>
<gl-experiment-badge />
</div>
diff --git a/ee/app/assets/javascripts/ml/ai_agents/views/show_agent.vue b/ee/app/assets/javascripts/ml/ai_agents/views/show_agent.vue
index 57765afdb64f13a1a73cbcd25932da75c8196ad4..0fa31a5437452a3a1c54ea7e4aeca6b6287102d7 100644
--- a/ee/app/assets/javascripts/ml/ai_agents/views/show_agent.vue
+++ b/ee/app/assets/javascripts/ml/ai_agents/views/show_agent.vue
@@ -139,7 +139,7 @@ export default {
<div v-else-if="latestVersion">
<title-area>
<template #title>
- <div class="gl-flex-grow-1 gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-grow gl-items-center">
<span>{{ agentWithVersion.name }}</span>
<gl-experiment-badge />
</div>
@@ -158,7 +158,7 @@ export default {
:is-loading="isLoading"
:predefined-prompts="$options.predefinedPrompts"
:tool-name="s__('AIAgent|Agent')"
- class="ai-agent-chat !gl-w-full gl-static gl-border-r gl-border-transparent"
+ class="ai-agent-chat gl-border-r gl-static !gl-w-full gl-border-transparent"
:empty-state-title="s__('AIAgent|Try out your agent')"
:empty-state-description="
s__('AIAgent|Your agent\'s system prompt will be applied to the chat input.')
diff --git a/ee/app/assets/javascripts/notes/components/ai_summary.vue b/ee/app/assets/javascripts/notes/components/ai_summary.vue
index 1512467bdaa444eb993b20d793e0594d42b37194..f7c7d87d2810c6f30b0ed6b6c52a0cbe8cafff56 100644
--- a/ee/app/assets/javascripts/notes/components/ai_summary.vue
+++ b/ee/app/assets/javascripts/notes/components/ai_summary.vue
@@ -145,7 +145,7 @@ export default {
text: __('Remove summary'),
extraAttrs: {
variant: 'danger',
- class: 'gl-text-red-500!',
+ class: '!gl-text-red-500',
},
},
},
@@ -153,9 +153,9 @@ export default {
</script>
<template>
- <div v-if="markdown || aiLoading" class="ai-summary-card gl-rounded-base gl-border gl-bg-gray-10">
- <div class="gl-px-5 gl-py-4 gl-bg-white gl-rounded-top-base gl-border-b">
- <div class="gl-display-flex gl-align-items-center gl-gap-3">
+ <div v-if="markdown || aiLoading" class="ai-summary-card gl-border gl-rounded-base gl-bg-gray-10">
+ <div class="gl-border-b gl-rounded-t-base gl-bg-white gl-px-5 gl-py-4">
+ <div class="gl-flex gl-items-center gl-gap-3">
<gl-icon name="tanuki-ai" class="gl-text-purple-600" />
<h5 class="gl-my-0">{{ __('AI-generated summary') }}</h5>
<gl-disclosure-dropdown
@@ -191,12 +191,12 @@ export default {
<div v-else>
<div v-if="markdown" ref="markdown" v-safe-html="markdown" class="gl-mb-2"></div>
- <div class="gl-text-secondary gl-font-sm">
- <gl-icon name="eye-slash" class="gl-text-gray-400 gl-mr-2" :size="12" />{{
+ <div class="gl-text-sm gl-text-secondary">
+ <gl-icon name="eye-slash" class="gl-mr-2 gl-text-gray-400" :size="12" />{{
$options.i18n.onlyVisibleToYou
}}
·
- <gl-link :href="$options.feedback.link" target="_blank" class="gl-font-sm">{{
+ <gl-link :href="$options.feedback.link" target="_blank" class="gl-text-sm">{{
__('Leave feedback')
}}</gl-link>
</div>
diff --git a/ee/app/assets/javascripts/on_demand_scans/components/actions.vue b/ee/app/assets/javascripts/on_demand_scans/components/actions.vue
index 32262c32415b049aea4a29a8f21be50b47df3182..931f24529b042e45bae3a9e0657e63e831cdcb58 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/actions.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/actions.vue
@@ -119,7 +119,7 @@ export default {
</script>
<template>
- <div class="gl-display-flex gl-justify-content-end">
+ <div class="gl-flex gl-justify-end">
<gl-button
v-if="hasResults"
data-testid="view-scan-results-button"
diff --git a/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue b/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
index 5a905c7f85d4170be6b37ee913cab2f70f33035d..8bd745e755471acd9646c7ac5cdb6358b57fc09e 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/tabs/base_tab.vue
@@ -161,7 +161,7 @@ export default {
return [...this.fields, ACTION_COLUMN].map((field) => ({
...field,
class: ['gl-text-primary'],
- thClass: ['gl-bg-transparent!', 'gl-whitespace-nowrap'],
+ thClass: ['!gl-bg-transparent', 'gl-whitespace-nowrap'],
}));
},
},
@@ -306,7 +306,7 @@ export default {
</template>
</gl-table>
- <div class="gl-display-flex gl-justify-content-center">
+ <div class="gl-flex gl-justify-center">
<gl-keyset-pagination
data-testid="pagination"
v-bind="pageInfo"
diff --git a/ee/app/assets/javascripts/on_demand_scans/components/tabs/saved.vue b/ee/app/assets/javascripts/on_demand_scans/components/tabs/saved.vue
index 9f0990d2f41448d3ff7e1d017bacba1ce2303726..d275f180d4620826c8c0e239850bfa3c72881ec2 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/tabs/saved.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/tabs/saved.vue
@@ -164,7 +164,7 @@ export default {
extraAttrs: {
'aria-label': this.$options.i18n.deleteProfile,
'data-testid': 'delete-scan-button-desktop',
- class: 'gl-text-red-500!',
+ class: '!gl-text-red-500',
boundary: 'viewport',
variant: 'danger',
},
@@ -213,7 +213,7 @@ export default {
<div
v-if="canEditOnDemandScans"
data-testid="saved-scanners-actions"
- class="gl-md-w-full gl-text-right"
+ class="gl-text-right md:gl-w-full"
>
<gl-button
size="small"
@@ -235,7 +235,7 @@ export default {
size="small"
icon="ellipsis_v"
class="gl-hidden md:!gl-inline-flex"
- toggle-class="gl-border-0! !gl-shadow-none"
+ toggle-class="!gl-border-0 !gl-shadow-none"
:toggle-text="$options.i18n.moreActions"
:title="$options.i18n.moreActions"
>
diff --git a/ee/app/assets/javascripts/on_demand_scans/components/tabs/scheduled.vue b/ee/app/assets/javascripts/on_demand_scans/components/tabs/scheduled.vue
index edb4ad9d01d13916362df4fc438c1e96cd201a6e..e624f146d6ee7d4b05216c2eb8e9a333ee963cd3 100644
--- a/ee/app/assets/javascripts/on_demand_scans/components/tabs/scheduled.vue
+++ b/ee/app/assets/javascripts/on_demand_scans/components/tabs/scheduled.vue
@@ -46,7 +46,7 @@ export default {
>
<template #cell(nextRun)="{ value: { date, time, timezone } }">
<div class="gl-whitespace-nowrap"><gl-icon :size="12" name="calendar" /> {{ date }}</div>
- <div class="gl-text-secondary gl-whitespace-nowrap">
+ <div class="gl-whitespace-nowrap gl-text-secondary">
<gl-icon :size="12" name="clock" /> {{ time }} {{ getTimezoneCode(timezone) }}
</div>
</template>
diff --git a/ee/app/assets/javascripts/on_demand_scans_form/components/on_demand_scans_form.vue b/ee/app/assets/javascripts/on_demand_scans_form/components/on_demand_scans_form.vue
index 0b9abe8e4385f96ccdcfb71febaed970178f021b..c12a39536c47bb7cfb67845570cc8d68060342c5 100644
--- a/ee/app/assets/javascripts/on_demand_scans_form/components/on_demand_scans_form.vue
+++ b/ee/app/assets/javascripts/on_demand_scans_form/components/on_demand_scans_form.vue
@@ -348,7 +348,7 @@ export default {
@dismiss="hideErrors"
>
{{ errorMessage }}
- <ul v-if="errors.length" class="gl-mt-3 gl-mb-0">
+ <ul v-if="errors.length" class="gl-mb-0 gl-mt-3">
<li v-for="error in errors" :key="error" v-safe-html="error"></li>
</ul>
</gl-alert>
@@ -394,7 +394,7 @@ export default {
<gl-icon
id="scan-type-info"
name="question-o"
- class="gl-ml-2 gl-link gl-cursor-pointer"
+ class="gl-link gl-ml-2 gl-cursor-pointer"
/>
<gl-popover target="scan-type-info" placement="top" triggers="focus hover">
<span>{{ $options.i18n.scanTypeTooltip }}</span>
@@ -402,7 +402,7 @@ export default {
</gl-form-group>
<gl-form-group class="gl-mb-3" :label="__('Branch')">
- <small class="form-text gl-text-secondary gl-mt-0 gl-mb-5">
+ <small class="form-text gl-mb-5 gl-mt-0 gl-text-secondary">
{{ $options.i18n.branchSelectorHelpText }}
</small>
<ref-selector
@@ -413,12 +413,12 @@ export default {
:project-id="projectPath"
:translations="$options.i18n.scanConfigurationBranchDropDown"
/>
- <div v-if="!defaultBranch" class="gl-text-red-500 gl-mt-3">
+ <div v-if="!defaultBranch" class="gl-mt-3 gl-text-red-500">
{{ $options.i18n.scanConfigurationDefaultBranchLabel }}
</div>
</gl-form-group>
<gl-form-group
- class="gl-mt-6 gl-mb-3"
+ class="gl-mb-3 gl-mt-6"
data-testid="on-demand-scan-runner-tags"
optional
:label="$options.i18n.runnerTagsLabel"
diff --git a/ee/app/assets/javascripts/on_demand_scans_form/components/runner_tags.vue b/ee/app/assets/javascripts/on_demand_scans_form/components/runner_tags.vue
index ffc54497fa40ba495b9fab6079006babd001e7d6..4e5594b0bbcb65f0f724c1c742bf18ccfd3990e8 100644
--- a/ee/app/assets/javascripts/on_demand_scans_form/components/runner_tags.vue
+++ b/ee/app/assets/javascripts/on_demand_scans_form/components/runner_tags.vue
@@ -69,7 +69,7 @@ export default {
</gl-sprintf>
<runner-tags-dropdown
- toggle-class="gl-w-full gl-mb-1! gl-mt-4"
+ toggle-class="gl-w-full !gl-mb-1 gl-mt-4"
:block="true"
:disabled="isRunnerTagsDisabled"
:empty-tags-list-placeholder="$options.i18n.noRunnerTagsText"
diff --git a/ee/app/assets/javascripts/on_demand_scans_form/components/scan_schedule.vue b/ee/app/assets/javascripts/on_demand_scans_form/components/scan_schedule.vue
index 58c12d7b641c1e1c8b112c9db2c75ae2b701c4b8..84bdd52899ae3fb2348807dc4c2c500bd4584dc3 100644
--- a/ee/app/assets/javascripts/on_demand_scans_form/components/scan_schedule.vue
+++ b/ee/app/assets/javascripts/on_demand_scans_form/components/scan_schedule.vue
@@ -108,10 +108,10 @@ export default {
/>
<transition name="fade">
<gl-form-group v-if="form.isScheduledScan" data-testid="profile-schedule-form-group">
- <div class="gl-font-bold gl-mb-3">
+ <div class="gl-mb-3 gl-font-bold">
{{ $options.i18n.scanStartTimeLabel }}
</div>
- <div class="gl-display-flex gl-align-items-center gl-mb-5">
+ <div class="gl-mb-5 gl-flex gl-items-center">
<gl-datepicker v-model="form.startDate" @input="handleInput" />
<span class="gl-px-3">
{{ $options.i18n.scanScheduleRepeatLabel }}
@@ -124,7 +124,7 @@ export default {
/>
</div>
- <div class="gl-font-bold gl-mb-3">
+ <div class="gl-mb-3 gl-font-bold">
{{ $options.i18n.scanScheduleTimezoneLabel }}
</div>
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
index 805acf2eca4483af923829db4d8751f2d0350899..c186229a1fc5e23cc74dbcd66df1c9501369e1f4 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue
@@ -267,15 +267,15 @@ export default {
<div>
<gl-card
class="gl-mt-5"
- :class="{ 'gl-border-bottom-0': !scheduleVisible }"
+ :class="{ 'gl-border-b-0': !scheduleVisible }"
body-class="gl-bg-gray-10 gl-py-0"
:header-class="{ 'gl-bg-white': true, 'gl-rounded-small': !scheduleVisible }"
>
<template #header>
- <div class="gl-display-flex gl-align-items-flex-start" data-testid="schedule-header">
- <div class="gl-flex-grow-1">
- <h2 class="gl-font-bold gl-m-0">{{ schedule.name }}</h2>
- <p class="gl-text-gray-500 gl-m-0">
+ <div class="gl-flex gl-items-start" data-testid="schedule-header">
+ <div class="gl-grow">
+ <h2 class="gl-m-0 gl-font-bold">{{ schedule.name }}</h2>
+ <p class="gl-m-0 gl-text-gray-500">
{{ scheduleInfo }}
</p>
</div>
@@ -283,7 +283,7 @@ export default {
v-if="userCanCreateSchedule"
v-gl-tooltip.hover
:title="$options.i18n.moreActions"
- toggle-class="gl-mr-2 gl-py-2!"
+ toggle-class="gl-mr-2 !gl-py-2"
class="gl-border-r"
data-testid="schedule-edit-button-group"
icon="ellipsis_v"
@@ -318,11 +318,8 @@ export default {
</div>
</template>
<gl-collapse :visible="scheduleVisible">
- <div
- class="gl-mt-3 gl-display-flex gl-justify-content-space-between"
- data-testid="rotations-header"
- >
- <h3 class="gl-font-lg gl-m-0">{{ $options.i18n.rotationTitle }}</h3>
+ <div class="gl-mt-3 gl-flex gl-justify-between" data-testid="rotations-header">
+ <h3 class="gl-m-0 gl-text-lg">{{ $options.i18n.rotationTitle }}</h3>
<gl-button v-if="userCanCreateSchedule" v-gl-modal="addRotationModalId" variant="link"
>{{ $options.i18n.addARotation }}
</gl-button>
@@ -330,9 +327,9 @@ export default {
<hr class="gl-my-3" />
- <div class="gl-display-flex gl-align-items-center gl-mb-3">
- <gl-icon name="calendar" :size="14" class="gl-text-gray-700 gl-mr-2" />
- <div class="gl-flex-grow-1 gl-text-gray-700 gl-font-bold">{{ scheduleRange }}</div>
+ <div class="gl-mb-3 gl-flex gl-items-center">
+ <gl-icon name="calendar" :size="14" class="gl-mr-2 gl-text-gray-700" />
+ <div class="gl-grow gl-font-bold gl-text-gray-700">{{ scheduleRange }}</div>
<gl-collapsible-listbox
:items="$options.presetListboxItems"
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedules_wrapper.vue b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedules_wrapper.vue
index d8872a62766a213c592f2cb9d60d0e918132e8af..afb7e7ad22b88ecc08cac46a6a5921b5cc130d58 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedules_wrapper.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/oncall_schedules_wrapper.vue
@@ -109,7 +109,7 @@ export default {
<gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3" />
<template v-else-if="hasSchedules">
- <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
+ <div class="gl-flex gl-items-center gl-justify-between">
<h1>{{ $options.i18n.title }}</h1>
<gl-button
v-if="userCanCreateSchedule"
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue
index 684f2d7c2805d346eb2242df8fafb1f23b231fee..c33e69ca8bc7e9d87e74d7f2e21ee5f24e9e31fe 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue
@@ -112,7 +112,7 @@ export default {
<template>
<gl-form>
- <div class="gl-w-full gl-sm-w-75p">
+ <div class="gl-w-full sm:gl-w-3/4">
<gl-form-group
:label="$options.i18n.fields.name.title"
label-size="sm"
@@ -166,11 +166,11 @@ export default {
:invalid-feedback="$options.i18n.fields.rotationLength.error"
:state="validationState.rotationLength"
>
- <div class="gl-display-flex">
+ <div class="gl-flex">
<gl-form-input
id="rotation-length"
type="number"
- class="gl-w-12 gl-mr-3"
+ class="gl-mr-3 gl-w-12"
min="1"
:value="form.rotationLength.length"
@input="$emit('update-rotation-form', { type: 'rotationLength.length', value: $event })"
@@ -195,7 +195,7 @@ export default {
:invalid-feedback="$options.i18n.fields.startsAt.error"
:state="validationState.startsAt"
>
- <div class="gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-items-center">
<gl-datepicker
class="gl-mr-3"
:value="form.startsAt.date"
@@ -230,7 +230,7 @@ export default {
</div>
</gl-form-group>
</div>
- <div class="gl-display-inline-block">
+ <div class="gl-inline-block">
<gl-toggle
:value="form.isEndDateEnabled"
:label="$options.i18n.fields.endsAt.enableToggle"
@@ -253,7 +253,7 @@ export default {
:invalid-feedback="$options.i18n.fields.endsAt.error"
class="gl-mb-0"
>
- <div class="gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-items-center">
<gl-datepicker
class="gl-mr-3"
:value="form.endsAt.date"
@@ -313,7 +313,7 @@ export default {
:invalid-feedback="$options.i18n.fields.endsAt.error"
class="gl-mb-0"
>
- <div class="gl-display-flex gl-align-items-center">
+ <div class="gl-flex gl-items-center">
<span> {{ __('From') }} </span>
<gl-dropdown
data-testid="restricted-from"
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
index d7c5478cb7a14899498a4b28b99ecab220b90007..9c025c06576eb929d5c169a910af757f16fd9307 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue
@@ -11,7 +11,7 @@ export const SHIFT_WIDTHS = {
xs: 20,
};
-const ROTATION_CENTER_CLASS = 'gl-rounded-base gl-display-flex gl-align-items-center';
+const ROTATION_CENTER_CLASS = 'gl-rounded-base gl-flex gl-items-center';
export const TIME_DATE_FORMAT = 'mmmm d, yyyy, HH:MM ("UTC:" o)';
export default {
@@ -85,17 +85,14 @@ export default {
<template>
<div
- class="rotation-asignee-container gl-absolute gl-h-7 gl-mt-3 gl-pr-1"
+ class="rotation-asignee-container gl-absolute gl-mt-3 gl-h-7 gl-pr-1"
:style="containerStyle"
>
<div
:id="rotationAssigneeUniqueID"
class="gl-h-6"
:style="backgroundStyle"
- :class="[
- $options.ROTATION_CENTER_CLASS,
- { 'gl-justify-content-center': hasRotationMobileViewText },
- ]"
+ :class="[$options.ROTATION_CENTER_CLASS, { 'gl-justify-center': hasRotationMobileViewText }]"
data-testid="rotation-assignee"
>
<div
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/current_day_indicator.vue b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/current_day_indicator.vue
index 0d98b8978d9c2e8751dc08174935fd2adec37e1d..cd71061704b43c67b7fad22bac79ae580916b5af 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/current_day_indicator.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/current_day_indicator.vue
@@ -39,6 +39,6 @@ export default {
v-if="isVisible"
:style="getIndicatorStyles(presetType, timeframeItem, timelineWidth)"
data-testid="current-day-indicator"
- class="current-day-indicator gl-absolute gl-bg-red-500 gl-pointer-events-none -gl-translate-x-1/2"
+ class="current-day-indicator gl-pointer-events-none gl-absolute -gl-translate-x-1/2 gl-bg-red-500"
></span>
</template>
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_days/days_header_sub_item.vue b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_days/days_header_sub_item.vue
index 9813c36d20cc7347655edfccd17f6196d69d8c62..90cf54f4fc69794b05c77394dd87c9334e122344 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_days/days_header_sub_item.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_days/days_header_sub_item.vue
@@ -20,20 +20,20 @@ export default {
return '';
}
- return 'gl-text-gray-900! gl-font-bold';
+ return '!gl-text-gray-900 gl-font-bold';
},
},
};
</script>
<template>
- <div class="item-sublabel gl-pb-3 gl-relative gl-display-flex" data-testid="day-item-sublabel">
+ <div class="item-sublabel gl-relative gl-flex gl-pb-3" data-testid="day-item-sublabel">
<span
v-for="hour in $options.HOURS_IN_DAY"
:key="hour"
ref="dailyHourCell"
:class="getSubItemValueClass(hour)"
- class="sublabel-value gl-text-gray-700 gl-font-normal gl-text-center gl-flex-grow-1 gl-flex-basis-0"
+ class="sublabel-value gl-grow gl-basis-0 gl-text-center gl-font-normal gl-text-gray-700"
data-testid="sublabel-value"
>{{ hour - 1 }}</span
>
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_item.vue b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_item.vue
index 48b2892a8904bb3f2e4f1eab3222bf4e875b5bec..bdccd692a003c5e6137fcf7f5078d8cfc068d788 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_item.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_item.vue
@@ -44,7 +44,7 @@ export default {
<template>
<span class="timeline-header-item gl-float-left" :style="timelineHeaderStyles">
- <div class="gl-font-bold gl-text-gray-500 gl-pl-6" data-testid="timeline-header-label">
+ <div class="gl-pl-6 gl-font-bold gl-text-gray-500" data-testid="timeline-header-label">
{{ timelineHeaderLabel }}
</div>
<weeks-header-sub-item :timeframe-item="timeframeItem" />
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_sub_item.vue b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_sub_item.vue
index b34fe8fcf81b923f8041fb605dcfb434145445fa..653336a29e3cc83b9410285beb2904c728ccfe0b 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_sub_item.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/preset_weeks/weeks_header_sub_item.vue
@@ -32,7 +32,7 @@ export default {
getSubItemValueClass(subItem) {
// Show dark color text only for the current date
if (subItem.getTime() === this.$options.currentDate.getTime()) {
- return 'gl-text-gray-900! gl-font-bold';
+ return '!gl-text-gray-900 gl-font-bold';
}
return '';
@@ -45,13 +45,13 @@ export default {
</script>
<template>
- <div class="item-sublabel week-item-sublabel gl-pb-3 gl-relative gl-display-flex">
+ <div class="item-sublabel week-item-sublabel gl-relative gl-flex gl-pb-3">
<span
v-for="(subItem, index) in headerSubItems"
:key="index"
ref="weeklyDayCell"
:class="getSubItemValueClass(subItem)"
- class="sublabel-value gl-text-gray-700 gl-font-normal gl-text-center gl-flex-grow-1 gl-flex-basis-0"
+ class="sublabel-value gl-grow gl-basis-0 gl-text-center gl-font-normal gl-text-gray-700"
data-testid="sublabel-value"
>{{ getSubItemValue(subItem) }}</span
>
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue
index b45f3c646f5a974c4021556ae58a01432b3fd977..53202dd537347bf25864c6370ee25cd875df3b8f 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue
@@ -90,14 +90,14 @@ export default {
<template>
<div class="list-section">
<gl-loading-icon v-if="loading" size="sm" />
- <div v-else-if="rotations.length === 0 && !loading" class="gl-clearfix gl-border-t">
+ <div v-else-if="rotations.length === 0 && !loading" class="gl-border-t gl-clearfix">
<span
- class="details-cell gl-sticky gl-left-0 gl-float-left gl-display-flex gl-justify-content-space-between gl-align-items-center"
+ class="details-cell gl-sticky gl-left-0 gl-float-left gl-flex gl-items-center gl-justify-between"
>
- <span class="gl-text-truncate gl-text-gray-700">{{ $options.i18n.addRotationLabel }}</span>
+ <span class="gl-truncate gl-text-gray-700">{{ $options.i18n.addRotationLabel }}</span>
</span>
<span
- class="timeline-cell gl-float-left gl-overflow-hidden gl-relative"
+ class="timeline-cell gl-relative gl-float-left gl-overflow-hidden"
:style="timelineStyles"
>
<current-day-indicator
@@ -108,13 +108,13 @@ export default {
</span>
</div>
<div v-else>
- <div v-for="rotation in rotations" :key="rotation.id" class="gl-clearfix gl-border-t">
+ <div v-for="rotation in rotations" :key="rotation.id" class="gl-border-t gl-clearfix">
<span
- class="details-cell gl-sticky gl-left-0 gl-float-left gl-display-flex gl-justify-content-space-between gl-align-items-center"
+ class="details-cell gl-sticky gl-left-0 gl-float-left gl-flex gl-items-center gl-justify-between"
>
<span
v-gl-tooltip="{ boundary: 'viewport', title: rotation.name }"
- class="gl-text-truncate gl-text-gray-700"
+ class="gl-truncate gl-text-gray-700"
:aria-label="rotation.name"
:data-testid="`rotation-name-${rotation.id}`"
>{{ rotation.name }}</span
@@ -145,7 +145,7 @@ export default {
</gl-button-group>
</span>
<span
- class="timeline-cell gl-float-left gl-overflow-hidden gl-relative"
+ class="timeline-cell gl-relative gl-float-left gl-overflow-hidden"
:style="timelineStyles"
data-testid="timeline-cell"
>
diff --git a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/schedule_timeline_section.vue b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/schedule_timeline_section.vue
index db9b4e1c1f1aaf05491a921d8a02f0c95e1b8c9c..e2b93dc8ca2e7f3839fe369144684e22e22dacb5 100644
--- a/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/schedule_timeline_section.vue
+++ b/ee/app/assets/javascripts/oncall_schedules/components/schedule/components/schedule_timeline_section.vue
@@ -54,7 +54,7 @@ export default {
<template>
<div class="timeline-section clearfix gl-sticky gl-top-0">
<div>
- <span class="timeline-header-label gl-text-gray-700 gl-float-left">{{
+ <span class="timeline-header-label gl-float-left gl-text-gray-700">{{
presetIsDay ? __('Hour') : __('Date')
}}</span>
</div>
diff --git a/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_spec.js.snap b/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_spec.js.snap
index 3b5f7d7352dffd66c1589ec084543fb51d65bc1a..6d88b78a1b759fa036881621ee73f327674328ee 100644
--- a/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_spec.js.snap
+++ b/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_spec.js.snap
@@ -6,25 +6,25 @@ exports[`Reviewer drawer approval rules component renders non-optional rules by
>
<td
aria-colindex="1"
- class="gl-px-0! gl-py-4!"
+ class="!gl-px-0 !gl-py-4"
role="cell"
>
Required rule
</td>
<td
aria-colindex="2"
- class="gl-px-0! gl-py-4!"
+ class="!gl-px-0 !gl-py-4"
role="cell"
>
0 of 1
</td>
<td
aria-colindex="3"
- class="gl-px-0! gl-py-4!"
+ class="!gl-px-0 !gl-py-4"
role="cell"
>
<div
- class="gl-display-flex gl-justify-content-end"
+ class="gl-flex gl-justify-end"
/>
</td>
</tr>
@@ -36,25 +36,25 @@ exports[`Reviewer drawer approval rules component toggles optional rows when cli
>
<td
aria-colindex="1"
- class="gl-px-0! gl-py-4!"
+ class="!gl-px-0 !gl-py-4"
role="cell"
>
Optional rule
</td>
<td
aria-colindex="2"
- class="gl-px-0! gl-py-4!"
+ class="!gl-px-0 !gl-py-4"
role="cell"
>
0 of 0
</td>
<td
aria-colindex="3"
- class="gl-px-0! gl-py-4!"
+ class="!gl-px-0 !gl-py-4"
role="cell"
>
<div
- class="gl-display-flex gl-justify-content-end"
+ class="gl-flex gl-justify-end"
/>
</td>
</tr>
diff --git a/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_wrapper_spec.js.snap b/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_wrapper_spec.js.snap
index 8f06f792c83b5aca3675f5aa5295fb0172435f1d..c27d8a92ae67a2ff18cc6958b9cd29728d0c60b5 100644
--- a/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_wrapper_spec.js.snap
+++ b/ee/spec/frontend/merge_requests/components/reviewers/__snapshots__/approval_rules_wrapper_spec.js.snap
@@ -3,16 +3,16 @@
exports[`Reviewer drawer approval rules wrapper component renders loading skeleton 1`] = `
<div>
<div
- class="gl-animate-skeleton-loader gl-h-4 gl-max-w-30! gl-mb-3 gl-rounded-base"
+ class="!gl-max-w-30 gl-animate-skeleton-loader gl-h-4 gl-mb-3 gl-rounded-base"
/>
<div
- class="gl-animate-skeleton-loader gl-h-4 gl-max-w-30! gl-mb-3 gl-rounded-base"
+ class="!gl-max-w-30 gl-animate-skeleton-loader gl-h-4 gl-mb-3 gl-rounded-base"
/>
<div
- class="gl-animate-skeleton-loader gl-h-4 gl-max-w-30! gl-mb-3 gl-rounded-base"
+ class="!gl-max-w-30 gl-animate-skeleton-loader gl-h-4 gl-mb-3 gl-rounded-base"
/>
<div
- class="gl-animate-skeleton-loader gl-h-4 gl-max-w-30! gl-mb-3 gl-rounded-base"
+ class="!gl-max-w-30 gl-animate-skeleton-loader gl-h-4 gl-mb-3 gl-rounded-base"
/>
</div>
`;
diff --git a/ee/spec/frontend/on_demand_scans/components/__snapshots__/actions_spec.js.snap b/ee/spec/frontend/on_demand_scans/components/__snapshots__/actions_spec.js.snap
index 1aa5ce8e53e9196bea305344d185652cda06eea9..93767f1e474a19d4d77bee0a8d1e89c815876b52 100644
--- a/ee/spec/frontend/on_demand_scans/components/__snapshots__/actions_spec.js.snap
+++ b/ee/spec/frontend/on_demand_scans/components/__snapshots__/actions_spec.js.snap
@@ -2,6 +2,6 @@
exports[`Actions doesn't render anything if the scan status is not supported 1`] = `
<div
- class="gl-display-flex gl-justify-content-end"
+ class="gl-flex gl-justify-end"
/>
`;
diff --git a/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap b/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap
index 792943ff4fa5e95521b48c8421a33fc7862eb959..a942a381d2966a7b5cccd79c9e9b8035df6963d1 100644
--- a/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap
+++ b/ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap
@@ -9,11 +9,11 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
class="gl-border-t gl-clearfix"
>
<span
- class="details-cell gl-align-items-center gl-display-flex gl-float-left gl-justify-content-space-between gl-left-0 gl-sticky"
+ class="details-cell gl-flex gl-float-left gl-items-center gl-justify-between gl-left-0 gl-sticky"
>
<span
aria-label="Rotation 242"
- class="gl-text-gray-700 gl-text-truncate"
+ class="gl-text-gray-700 gl-truncate"
data-testid="rotation-name-gid://gitlab/IncidentManagement::OncallRotation/2"
>
Rotation 242
@@ -75,13 +75,13 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
style="left: 0px; width: 0px;"
>
<div
- class="gl-align-items-center gl-display-flex gl-h-6 gl-justify-content-center gl-rounded-base"
+ class="gl-flex gl-h-6 gl-items-center gl-justify-center gl-rounded-base"
data-testid="rotation-assignee"
id="reference-0"
style="background-color: rgb(97, 122, 226);"
>
<div
- class="gl-align-items-center gl-display-flex gl-rounded-base gl-text-white"
+ class="gl-flex gl-items-center gl-rounded-base gl-text-white"
/>
</div>
<div
@@ -106,13 +106,13 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
style="left: 0px; width: 0px;"
>
<div
- class="gl-align-items-center gl-display-flex gl-h-6 gl-justify-content-center gl-rounded-base"
+ class="gl-flex gl-h-6 gl-items-center gl-justify-center gl-rounded-base"
data-testid="rotation-assignee"
id="reference-1"
style="background-color: rgb(201, 93, 46);"
>
<div
- class="gl-align-items-center gl-display-flex gl-rounded-base gl-text-white"
+ class="gl-flex gl-items-center gl-rounded-base gl-text-white"
/>
</div>
<div
diff --git a/ee/spec/frontend/oncall_schedule/schedule/components/preset_days/days_header_sub_item_spec.js b/ee/spec/frontend/oncall_schedule/schedule/components/preset_days/days_header_sub_item_spec.js
index c13dae0d7797cf368d0f80838d7777c17b214d62..f85c7704449a7dabde80b51e98d42e678acb616d 100644
--- a/ee/spec/frontend/oncall_schedule/schedule/components/preset_days/days_header_sub_item_spec.js
+++ b/ee/spec/frontend/oncall_schedule/schedule/components/preset_days/days_header_sub_item_spec.js
@@ -47,12 +47,12 @@ describe('ee/oncall_schedules/components/schedule/components/preset_days/days_he
const currentHour = currentDate.getHours();
expect(findSublabels().at(currentHour).classes()).toStrictEqual([
'sublabel-value',
- 'gl-text-gray-700',
- 'gl-font-normal',
+ 'gl-grow',
+ 'gl-basis-0',
'gl-text-center',
- 'gl-flex-grow-1',
- 'gl-flex-basis-0',
- 'gl-text-gray-900!',
+ 'gl-font-normal',
+ 'gl-text-gray-700',
+ '!gl-text-gray-900',
'gl-font-bold',
]);
expect(findDaysHeaderCurrentIndicator().exists()).toBe(true);
diff --git a/ee/spec/frontend/oncall_schedule/schedule/components/preset_weeks/weeks_header_sub_item_spec.js b/ee/spec/frontend/oncall_schedule/schedule/components/preset_weeks/weeks_header_sub_item_spec.js
index ea297ea6ba881183ece46a1f58b4adf88ba3f8ac..1bbe5a93bda042d3a457607466d11c90669e5ef8 100644
--- a/ee/spec/frontend/oncall_schedule/schedule/components/preset_weeks/weeks_header_sub_item_spec.js
+++ b/ee/spec/frontend/oncall_schedule/schedule/components/preset_weeks/weeks_header_sub_item_spec.js
@@ -60,10 +60,10 @@ describe('WeeksHeaderSubItemComponent', () => {
expect(wrapper.find('.current-day-indicator-header.preset-weeks').exists()).toBe(true);
});
- it("sublabel has `gl-text-gray-900! gl-font-bold` classes when it is for today's date", () => {
+ it("sublabel has `!gl-text-gray-900 gl-font-bold` classes when it is for today's date", () => {
// Timeframe starts at Jan 1, 2018, faked today is Jan 3, 2018 (3rd item in a week timeframe)
expect(findSublabelValues().at(2).classes()).toEqual(
- expect.arrayContaining(['gl-text-gray-900!', 'gl-font-bold']),
+ expect.arrayContaining(['!gl-text-gray-900', 'gl-font-bold']),
);
});
});
diff --git a/spec/frontend/members/components/table/__snapshots__/member_activity_spec.js.snap b/spec/frontend/members/components/table/__snapshots__/member_activity_spec.js.snap
index 5ba3b9c1efe8ab77cbd7304fa2b162b9f1f78337..9ece3dda10df78f2c1d0ec6c351454c314e8c942 100644
--- a/spec/frontend/members/components/table/__snapshots__/member_activity_spec.js.snap
+++ b/spec/frontend/members/components/table/__snapshots__/member_activity_spec.js.snap
@@ -2,10 +2,10 @@
exports[`MemberActivity with a member that does not have all of the fields renders \`User created\` field 1`] = `
<div
- class="gl-display-flex gl-flex-direction-column gl-gap-2"
+ class="gl-flex gl-flex-col gl-gap-2"
>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"
@@ -27,10 +27,10 @@ exports[`MemberActivity with a member that does not have all of the fields rende
exports[`MemberActivity with a member that has all fields and "requestAcceptedAt" field in the member entity is not null should use this field to display an access granted date 1`] = `
<div
- class="gl-display-flex gl-flex-direction-column gl-gap-2"
+ class="gl-flex gl-flex-col gl-gap-2"
>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"
@@ -48,7 +48,7 @@ exports[`MemberActivity with a member that has all fields and "requestAcceptedAt
</span>
</div>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"
@@ -66,7 +66,7 @@ exports[`MemberActivity with a member that has all fields and "requestAcceptedAt
</span>
</div>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"
@@ -88,10 +88,10 @@ exports[`MemberActivity with a member that has all fields and "requestAcceptedAt
exports[`MemberActivity with a member that has all fields renders \`User created\`, \`Access granted\`, and \`Last activity\` fields 1`] = `
<div
- class="gl-display-flex gl-flex-direction-column gl-gap-2"
+ class="gl-flex gl-flex-col gl-gap-2"
>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"
@@ -109,7 +109,7 @@ exports[`MemberActivity with a member that has all fields renders \`User created
</span>
</div>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"
@@ -127,7 +127,7 @@ exports[`MemberActivity with a member that has all fields renders \`User created
</span>
</div>
<div
- class="gl-display-flex gl-gap-3"
+ class="gl-flex gl-gap-3"
>
<svg
aria-hidden="true"