Improved UI manage-whitelist component (#11861)

themes-default/slim/src/components/helpers/search-template-pattern.vue

@@ -350,16 +350,6 @@ export default {
     animation-timing-function: ease-out;
 }
 
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(180deg);
-    }
-}
-
 .template-body {
     display: flex;
 }

themes-default/slim/src/components/show-results/manage-whitelist.vue

@@ -4,7 +4,7 @@
         <div v-if="open" class="manage-whitelist-control-wrapper">
             <div class="title-header">
                 <span class="title">{{releaseGroup}}</span>
-                <svg class="manage-whitelist-close" @click="open = !open">
+                <svg class="manage-whitelist-close spin-hover-90" @click="open = !open">
                     <use xlink:href="images/svg/close.svg#close" />
                 </svg>
             </div>
@@ -47,27 +47,31 @@ export default {
                 this.show.config.release.whitelist.push(releaseGroup);
                 this.save(`adding release group ${releaseGroup} from the whitelist`);
             }
+            this.open = false;
         },
         removeFromWhitelist() {
             const { releaseGroup, show } = this;
             if (show.config.release.whitelist.map(item => item.toLowerCase()).includes(releaseGroup.toLowerCase())) {
                 this.show.config.release.whitelist = this.show.config.release.whitelist.filter(group => group.toLowerCase() !== releaseGroup.toLowerCase());
                 this.save(`removing release group ${releaseGroup} from the whitelist`);
             }
+            this.open = false;
         },
         addToBlacklist() {
             const { releaseGroup, show } = this;
             if (!show.config.release.blacklist.map(item => item.toLowerCase()).includes(releaseGroup.toLowerCase())) {
                 this.show.config.release.blacklist.push(releaseGroup);
                 this.save(`adding release group ${releaseGroup} from the blacklist`);
             }
+            this.open = false;
         },
         removeFromBlacklist() {
             const { releaseGroup, show } = this;
             if (show.config.release.blacklist.map(item => item.toLowerCase()).includes(releaseGroup.toLowerCase())) {
                 this.show.config.release.blacklist = this.show.config.release.blacklist.filter(group => group.toLowerCase() !== releaseGroup.toLowerCase());
                 this.save(`removing release group ${releaseGroup} from the blacklist`);
             }
+            this.open = false;
         },
         async save(message) {
             const { saveShowConfig, show } = this;
@@ -95,7 +99,7 @@ export default {
     top: 25px;
     left: 0;
     background-color: rgb(51, 51, 51);
-    padding: 1rem;
+    padding: 1rem 1.2rem;
     border-radius: 4px;
     z-index: 1;
     flex-flow: column;
@@ -125,7 +129,7 @@ export default {
 .manage-whitelist-control-wrapper form {
     display: flex;
     flex-flow: column;
-    gap: 5px;
+    gap: 10px;
 }
 
 .manage-whitelist-control-wrapper button {

themes-default/slim/src/style/spin.scss

@@ -11,3 +11,13 @@
         transform: rotate(90deg);
     }
 }
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(180deg);
+    }
+}