app/assets/javascripts/security_configuration/components/training_provider_list.vue

@@ -268,7 +268,7 @@ export default {
                 <span
                   v-if="!securityTrainingEnabled"
                   data-testid="unavailable-text"
-                  class="gl-text-gray-600"
+                  class="gl-text-subtle"
                 >
                   {{ $options.i18n.unavailableText }}
                 </span>

app/assets/javascripts/todos/components/todo_item.vue

@@ -24,11 +24,6 @@ export default {
       type: Object,
       required: true,
     },
-    fadeDoneTodo: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     isDone() {
@@ -40,9 +35,6 @@ export default {
     targetUrl() {
       return this.todo.targetUrl;
     },
-    fadeTodo() {
-      return this.fadeDoneTodo && this.isDone;
-    },
     trackingLabel() {
       return this.todo.targetType ?? 'UNKNOWN';
     },
@@ -53,7 +45,6 @@ export default {
 <template>
   <li
     class="gl-border-t gl-border-b gl-relative -gl-mt-px gl-block gl-px-5 gl-py-3 hover:gl-z-1 hover:gl-cursor-pointer hover:gl-border-blue-200 hover:gl-bg-blue-50"
-    :class="{ 'gl-border-gray-50 gl-bg-gray-10': fadeTodo }"
   >
     <gl-link
       :href="targetUrl"
@@ -63,16 +54,18 @@ export default {
     >
       <div
         class="gl-w-64 gl-flex-grow-2 gl-self-center gl-overflow-hidden gl-overflow-x-auto sm:gl-w-auto"
-        :class="{ 'gl-opacity-5': fadeTodo }"
       >
         <todo-item-title :todo="todo" />
         <todo-item-body :todo="todo" :current-user-id="currentUserId" />
       </div>
-      <todo-item-actions :todo="todo" class="sm:gl-order-3" />
+      <todo-item-actions
+        :todo="todo"
+        class="sm:gl-order-3"
+        @change="(id, markedAsDone) => $emit('change', id, markedAsDone)"
+      />
       <todo-item-timestamp
         :todo="todo"
         class="gl-w-full gl-whitespace-nowrap gl-px-2 sm:gl-w-auto"
-        :class="{ 'gl-opacity-5': fadeTodo }"
       />
     </gl-link>
   </li>

app/assets/javascripts/todos/components/todo_item_actions.vue

@@ -3,7 +3,12 @@ import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { reportToSentry } from '~/ci/utils';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
-import { INSTRUMENT_TODO_ITEM_CLICK, TODO_STATE_DONE, TODO_STATE_PENDING } from '../constants';
+import {
+  INSTRUMENT_TODO_ITEM_CLICK,
+  TAB_ALL,
+  TODO_STATE_DONE,
+  TODO_STATE_PENDING,
+} from '../constants';
 import markAsDoneMutation from './mutations/mark_as_done.mutation.graphql';
 import markAsPendingMutation from './mutations/mark_as_pending.mutation.graphql';
 
@@ -15,6 +20,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [Tracking.mixin()],
+  inject: ['currentTab'],
   props: {
     todo: {
       type: Object,
@@ -33,6 +39,14 @@ export default {
     isPending() {
       return this.todo.state === TODO_STATE_PENDING;
     },
+    tooltipTitle() {
+      // Setting this to null while loading, combined with keeping the
+      // loading state till the item gets removed, prevents the tooltip
+      // text changing with the item state before the item gets removed.
+      if (this.isLoading) return null;
+
+      return this.isDone ? this.$options.i18n.markAsPending : this.$options.i18n.markAsDone;
+    },
   },
   methods: {
     showMarkAsDoneError() {
@@ -75,12 +89,22 @@ export default {
         if (data.errors?.length > 0) {
           reportToSentry(this.$options.name, new Error(data.errors.join(', ')));
           showError();
+        } else {
+          this.$emit('change', this.todo.id, this.isDone);
         }
       } catch (failure) {
         reportToSentry(this.$options.name, failure);
         showError();
-      } finally {
         this.isLoading = false;
+      } finally {
+        // Only stop loading spinner when on "All" tab.
+        // On the other tabs (Pending/Done) we want the loading to continue
+        // until the todos query finished, removing this item from the list.
+        // This way we hide the state change, which would otherwise update
+        // the button's icon before it gets removed.
+        if (this.currentTab === TAB_ALL) {
+          this.isLoading = false;
+        }
       }
     },
   },
@@ -97,7 +121,7 @@ export default {
     :icon="isDone ? 'redo' : 'check'"
     :loading="isLoading"
     :aria-label="isDone ? $options.i18n.markAsPending : $options.i18n.markAsDone"
-    :title="isDone ? $options.i18n.markAsPending : $options.i18n.markAsDone"
+    :title="tooltipTitle"
     @click.prevent="toggleStatus"
   />
 </template>

app/assets/javascripts/todos/components/todos_app.vue

 <script>
+import { computed } from 'vue';
 import { GlLoadingIcon, GlKeysetPagination, GlLink, GlBadge, GlTab, GlTabs } from '@gitlab/ui';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import { createAlert } from '~/alert';
@@ -11,6 +12,8 @@ import {
 } from '~/todos/constants';
 import getTodosQuery from './queries/get_todos.query.graphql';
 import getPendingTodosCount from './queries/get_pending_todos_count.query.graphql';
+import markAsDoneMutation from './mutations/mark_as_done.mutation.graphql';
+import markAsPendingMutation from './mutations/mark_as_pending.mutation.graphql';
 import TodoItem from './todo_item.vue';
 import TodosEmptyState from './todos_empty_state.vue';
 import TodosFilterBar, { SORT_OPTIONS } from './todos_filter_bar.vue';
@@ -32,6 +35,11 @@ export default {
     TodosMarkAllDoneButton,
   },
   mixins: [Tracking.mixin()],
+  provide() {
+    return {
+      currentTab: computed(() => this.currentTab),
+    };
+  },
   data() {
     return {
       cursor: {
@@ -54,11 +62,13 @@ export default {
         sort: `${SORT_OPTIONS[0].value}_DESC`,
       },
       alert: null,
+      showSpinnerWhileLoading: true,
     };
   },
   apollo: {
     todos: {
       query: getTodosQuery,
+      fetchPolicy: 'cache-and-network',
       variables() {
         return {
           state: this.statusByTab,
@@ -107,9 +117,6 @@ export default {
     showMarkAllAsDone() {
       return this.currentTab === 0 && !this.showEmptyState;
     },
-    fadeDoneTodo() {
-      return this.currentTab === 0;
-    },
   },
   methods: {
     nextPage(item) {
@@ -144,9 +151,34 @@ export default {
       this.alert?.dismiss();
       this.queryFilterValues = { ...data };
     },
+    async handleItemChanged(id, markedAsDone) {
+      await this.updateAllQueries(false);
+      this.showUndoToast(id, markedAsDone);
+    },
+    showUndoToast(todoId, markedAsDone) {
+      const message = markedAsDone ? s__('Todos|Marked as done') : s__('Todos|Marked as undone');
+      const mutation = markedAsDone ? markAsPendingMutation : markAsDoneMutation;
+
+      const { hide } = this.$toast.show(message, {
+        action: {
+          text: s__('Todos|Undo'),
+          onClick: async () => {
+            hide();
+            await this.$apollo.mutate({ mutation, variables: { todoId } });
+            this.updateAllQueries(false);
+          },
+        },
+      });
+    },
     updateCounts() {
       this.$apollo.queries.pendingTodosCount.refetch();
     },
+    async updateAllQueries(showLoading = true) {
+      this.showSpinnerWhileLoading = showLoading;
+      this.updateCounts();
+      await this.$apollo.queries.todos.refetch();
+      this.showSpinnerWhileLoading = true;
+    },
   },
 };
 </script>
@@ -184,15 +216,17 @@ export default {
 
     <div>
       <div class="gl-flex gl-flex-col">
-        <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-5" />
+        <gl-loading-icon v-if="isLoading && showSpinnerWhileLoading" size="lg" class="gl-mt-5" />
         <ul v-else class="gl-m-0 gl-border-collapse gl-list-none gl-p-0">
-          <todo-item
-            v-for="todo in todos"
-            :key="todo.id"
-            :todo="todo"
-            :current-user-id="currentUserId"
-            :fade-done-todo="fadeDoneTodo"
-          />
+          <transition-group name="todos">
+            <todo-item
+              v-for="todo in todos"
+              :key="todo.id"
+              :todo="todo"
+              :current-user-id="currentUserId"
+              @change="handleItemChanged"
+            />
+          </transition-group>
         </ul>
 
         <todos-empty-state v-if="showEmptyState" :is-filtered="isFiltered" />
@@ -214,3 +248,17 @@ export default {
     </div>
   </div>
 </template>
+
+<style>
+.todos-leave-active {
+  transition: transform 0.15s ease-out;
+  position: absolute;
+}
+.todos-leave-to {
+  opacity: 0;
+  transform: translateY(-100px);
+}
+.todos-move {
+  transition: transform 0.15s ease-out;
+}
+</style>

app/assets/javascripts/todos/constants.js

@@ -36,6 +36,7 @@ export const TODO_EMPTY_TITLE_POOL = [
 ];
 
 export const STATUS_BY_TAB = [['pending'], ['done'], ['pending', 'done']];
+export const TAB_ALL = 2;
 
 /**
  * Instrumentation

app/assets/javascripts/usage_quotas/storage/components/project_list.vue

@@ -152,7 +152,7 @@ export default {
       <template v-if="isCostFactored(project)">
         <number-to-human-size :value="project.statistics.costFactoredStorageSize" />
 
-        <div class="gl-mt-2 gl-text-sm gl-text-gray-600">
+        <div class="gl-mt-2 gl-text-sm gl-text-subtle">
           <gl-sprintf :message="s__('UsageQuotas|(of %{totalStorageSize})')">
             <template #totalStorageSize>
               <number-to-human-size :value="project.statistics.storageSize" />

app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue

@@ -781,7 +781,7 @@ export default {
               <p v-if="showMergeDetailsHeader" class="gl-mb-2 gl-text-gray-900">
                 {{ __('Merge details') }}
               </p>
-              <ul class="gl-mb-0 gl-ml-3 gl-pl-4 gl-text-gray-600">
+              <ul class="gl-mb-0 gl-ml-3 gl-pl-4 gl-text-subtle">
                 <li v-if="sourceHasDivergedFromTarget" class="gl-leading-normal">
                   <gl-sprintf :message="$options.i18n.sourceDivergedFromTargetText">
                     <template #link>

app/assets/javascripts/vue_shared/components/list_selector/deploy_key_item.vue

@@ -41,7 +41,7 @@ export default {
     <gl-icon class="gl-min-w-6" name="key" />
     <span class="gl-flex gl-min-w-0 gl-grow gl-flex-col">
       <span class="gl-truncate gl-font-bold">{{ title }}</span>
-      <span class="gl-text-gray-600">@{{ username }}</span>
+      <span class="gl-text-subtle">@{{ username }}</span>
     </span>
 
     <gl-button

app/assets/javascripts/vue_shared/components/list_selector/group_item.vue

@@ -56,7 +56,7 @@ export default {
       />
       <span class="gl-flex gl-flex-col">
         <span class="gl-font-bold">{{ fullName }}</span>
-        <span class="gl-text-gray-600">@{{ name }}</span>
+        <span class="gl-text-subtle">@{{ name }}</span>
       </span>
     </div>
 

app/assets/javascripts/vue_shared/components/list_selector/project_item.vue

@@ -45,7 +45,7 @@ export default {
     />
     <span class="gl-flex gl-max-w-30 gl-grow gl-flex-col">
       <span class="gl-font-bold">{{ name }}</span>
-      <span class="gl-text-gray-600">{{ data.nameWithNamespace }}</span>
+      <span class="gl-text-subtle">{{ data.nameWithNamespace }}</span>
     </span>
 
     <gl-button

app/assets/javascripts/vue_shared/components/list_selector/user_item.vue

@@ -44,7 +44,7 @@ export default {
     <gl-avatar :alt="name" :entity-name="name" :size="32" :src="avatarUrl" fallback-on-error />
     <span class="gl-flex gl-grow gl-flex-col">
       <span class="gl-font-bold">{{ name }}</span>
-      <span class="gl-text-gray-600">@{{ username }}</span>
+      <span class="gl-text-subtle">@{{ username }}</span>
     </span>
 
     <gl-button

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -272,7 +272,7 @@ export default {
     <div class="gl-flex gl-flex-wrap gl-items-center">
       <div
         data-testid="md-header-toolbar"
-        class="md-header-toolbar gl-flex gl-grow gl-items-start gl-gap-y-2 gl-bg-default gl-py-3"
+        class="md-header-toolbar gl-flex gl-grow gl-items-start gl-gap-y-2 gl-py-3"
       >
         <div class="gl-flex gl-flex-wrap gl-gap-y-2">
           <gl-button

app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue

@@ -14,7 +14,7 @@ export default {
 <template>
   <timeline-entry-item class="note note-wrapper">
     <div
-      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"
+      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-subtle"
     ></div>
     <div class="timeline-content">
       <div class="note-header"></div>

app/assets/javascripts/vue_shared/components/notes/system_note.vue

@@ -105,7 +105,7 @@ export default {
       return this.getNoteableData.noteableType === 'MergeRequest';
     },
     iconBgClass() {
-      return ICON_COLORS[this.note.system_note_icon_name] || 'gl-bg-gray-50 gl-text-gray-600';
+      return ICON_COLORS[this.note.system_note_icon_name] || 'gl-bg-gray-50 gl-text-subtle';
     },
     systemNoteIconName() {
       let icon = this.note.system_note_icon_name;

app/assets/javascripts/vue_shared/components/notes/timeline_icon.vue

 <template>
   <div
-    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"
+    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-subtle"
   >
     <slot></slot>
   </div>

app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue

@@ -130,12 +130,12 @@ export default {
           <span data-testid="legend-text">{{ legendText }}</span>
         </template>
       </gl-infinite-scroll>
-      <div v-if="showNoResultsMessage" class="js-no-results-message gl-ml-3 gl-text-gray-600">
+      <div v-if="showNoResultsMessage" class="js-no-results-message gl-ml-3 gl-text-subtle">
         {{ __('Sorry, no projects matched your search') }}
       </div>
       <div
         v-if="showMinimumSearchQueryMessage"
-        class="js-minimum-search-query-message gl-ml-3 gl-text-gray-600"
+        class="js-minimum-search-query-message gl-ml-3 gl-text-subtle"
       >
         {{ __('Enter at least three characters to search') }}
       </div>

app/assets/javascripts/vue_shared/components/registry/history_item.vue

@@ -20,7 +20,7 @@ export default {
 <template>
   <timeline-entry-item class="system-note note-wrapper">
     <div
-      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"
+      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-subtle"
     >
       <gl-icon :name="icon" />
     </div>

app/assets/javascripts/work_items/components/design_management/design_version_dropdown.vue

@@ -119,7 +119,7 @@ export default {
         <gl-avatar :alt="getAuthorName(item.author)" :size="32" :src="getAvatarUrl(item)" />
         <span class="gl-flex gl-flex-col">
           <span class="gl-font-bold">{{ versionText(item) }}</span>
-          <span v-if="item.author" class="gl-mt-1 gl-text-gray-600">
+          <span v-if="item.author" class="gl-mt-1 gl-text-subtle">
             <span class="gl-block">{{ getAuthorName(item.author) }}</span>
             <time-ago
               v-if="item.createdAt"

app/assets/javascripts/work_items/components/notes/work_item_history_only_filter_note.vue

@@ -31,7 +31,7 @@ export default {
 <template>
   <li class="timeline-entry note note-wrapper discussion-filter-note">
     <div
-      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"
+      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-subtle"
     >
       <gl-icon name="comment" />
     </div>

app/assets/javascripts/work_items/components/work_item_crm_contacts.vue

@@ -331,7 +331,7 @@ export default {
                   <div class="gl-font-bold">{{ organizationName }}</div>
                   <div
                     v-if="contact.organization.description || contact.organization.defaultRate"
-                    class="gl-text-gray-600"
+                    class="gl-text-subtle"
                   >
                     <gl-truncate-text
                       v-if="contact.organization.description"