UX: Remove animation in admin theme list (#14743)

app/assets/javascripts/admin/addon/components/themes-list-item.js

@@ -1,10 +1,8 @@
 import { and, gt } from "@ember/object/computed";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import { escape } from "pretty-text/sanitizer";
 import { iconHTML } from "discourse-common/lib/icon-library";
-import { isTesting } from "discourse-common/config/environment";
-import { schedule } from "@ember/runloop";
 
 const MAX_COMPONENTS = 4;
 
@@ -22,36 +20,6 @@ export default Component.extend({
     }
   },
 
-  init() {
-    this._super(...arguments);
-    this.scheduleAnimation();
-  },
-
-  @observes("theme.selected")
-  triggerAnimation() {
-    this.animate();
-  },
-
-  scheduleAnimation() {
-    schedule("afterRender", () => {
-      this.animate(true);
-    });
-  },
-
-  animate(isInitial) {
-    const $container = $(this.element);
-    const $list = $(this.element.querySelector(".components-list"));
-    if ($list.length === 0 || isTesting()) {
-      return;
-    }
-    const duration = 300;
-    if (this.get("theme.selected")) {
-      this.collapseComponentsList($container, $list, duration);
-    } else if (!isInitial) {
-      this.expandComponentsList($container, $list, duration);
-    }
-  },
-
   @discourseComputed(
     "theme.component",
     "theme.childThemes.@each.name",
@@ -91,54 +59,6 @@ export default Component.extend({
     return childrenCount - MAX_COMPONENTS;
   },
 
-  expandComponentsList($container, $list, duration) {
-    $container.css("height", `${$container.height()}px`);
-    $list.css("display", "");
-    $container.animate(
-      {
-        height: `${$container.height() + $list.outerHeight(true)}px`,
-      },
-      {
-        duration,
-        done: () => {
-          $list.css("display", "");
-          $container.css("height", "");
-        },
-      }
-    );
-    $list.animate(
-      {
-        opacity: 1,
-      },
-      {
-        duration,
-      }
-    );
-  },
-
-  collapseComponentsList($container, $list, duration) {
-    $container.animate(
-      {
-        height: `${$container.height() - $list.outerHeight(true)}px`,
-      },
-      {
-        duration,
-        done: () => {
-          $list.css("display", "none");
-          $container.css("height", "");
-        },
-      }
-    );
-    $list.animate(
-      {
-        opacity: 0,
-      },
-      {
-        duration,
-      }
-    );
-  },
-
   actions: {
     toggleChildrenExpanded() {
       this.toggleProperty("childrenExpanded");

app/assets/stylesheets/common/admin/customize.scss

@@ -244,9 +244,6 @@
         .components-list {
           color: var(--secondary);
         }
-        .fa {
-          color: inherit;
-        }
       }
       &:not(.selected) {
         .broken-indicator {
@@ -284,9 +281,13 @@
 
         .others-count,
         .others-count:hover {
-          color: var(--primary-high);
+          color: inherit;
           text-decoration: underline;
         }
+
+        .d-icon {
+          color: inherit;
+        }
       }
 
       .inner-wrapper {