From 6f60d74cc50569528a1b8dfefc60729bd513dfa0 Mon Sep 17 00:00:00 2001
From: DianaXWiki <diana.voineag@xwiki.com>
Date: Thu, 18 Sep 2025 13:04:53 +0300
Subject: [PATCH] Update teams & admin & differentiate loading page spinner to
 apps spinner

---
 customize.dist/loading.js                           |  2 +-
 customize.dist/src/less2/include/loading.less       | 11 ++++++++++-
 .../src/less2/include/modals-ui-elements.less       |  2 +-
 www/admin/app-admin.less                            | 13 ++++++++++++-
 www/common/drive-ui.js                              |  2 +-
 www/secureiframe/app-secure.less                    |  2 +-
 www/secureiframe/inner.js                           |  2 +-
 www/teams/app-team.less                             |  6 +++++-
 8 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/customize.dist/loading.js b/customize.dist/loading.js
index 4d8242e27..0234be46f 100644
--- a/customize.dist/loading.js
+++ b/customize.dist/loading.js
@@ -20,7 +20,7 @@ define([
         '</div>',
         '<div class="cp-loading-container">',
             '<div class="cp-loading-spinner-container">',
-                '<span class="cp-spinner"></span>',
+                '<span class="cp-spinner-main"></span>',
             '</div>',
             '<div class="cp-loading-progress" aria-hidden="true" role="presentation">',
                 '<div class="cp-loading-progress-list"></div>',
diff --git a/customize.dist/src/less2/include/loading.less b/customize.dist/src/less2/include/loading.less
index c07ec2c29..8fa4f428f 100644
--- a/customize.dist/src/less2/include/loading.less
+++ b/customize.dist/src/less2/include/loading.less
@@ -216,7 +216,7 @@
         }
     }
 
-    .cp-spinner {
+    .cp-spinner-main {
         display: inline-block;
         box-sizing: border-box;
         width: 80px;
@@ -228,4 +228,13 @@
         animation-timing-function: cubic-bezier(.6,0.15,0.4,0.85);
     }
 
+    button {
+        .cp-spinner {
+            svg {
+                animation: spin 10s linear infinite ;
+                margin: 0 0 0.1rem 0.3rem;
+            }
+        }
+    }
+
 }
diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less
index 0a1ef4329..ef386408a 100644
--- a/customize.dist/src/less2/include/modals-ui-elements.less
+++ b/customize.dist/src/less2/include/modals-ui-elements.less
@@ -307,7 +307,7 @@
                         color: @cp_markdown-block-fg;
                     }
                 }
-                .cp-spinner {
+                .cp-spinner-main {
                     border-color: @cryptpad_color_brand;
                     border-top-color: transparent;
                 }
diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less
index 971933bcf..60f775f3e 100644
--- a/www/admin/app-admin.less
+++ b/www/admin/app-admin.less
@@ -21,6 +21,17 @@
     display: flex;
     flex-flow: column;
     font: @colortheme_app-font;
+    .cp-spinner {
+        svg {
+            animation: spin 10s linear infinite;
+        }
+    }
+    .cp-checkmark {
+        height: 1.2rem;
+        svg {
+            margin-left: @variables_icon_margin;
+        }
+    }
 
     input, textarea, .cp-appblock {
         &:focus-visible {
@@ -142,7 +153,7 @@
     }
 
     .cp-admin-support-state {
-        i {
+        svg {
             margin-right: @sidebar_base-margin;
         }
     }
diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js
index 17acb3fd5..c088d503d 100644
--- a/www/common/drive-ui.js
+++ b/www/common/drive-ui.js
@@ -3991,7 +3991,7 @@ define([
             $input[0].selectionStart = search.cursor || 0;
             $input[0].selectionEnd = search.cursor || 0;
 
-            var cancel = Icons.get('close', {class: 'cp-app-drive-search-cancel',title:Messages.cancel});
+            var cancel = Icons.get('close', {class: 'cp-app-drive-search-cancel',title:Messages.cancel}); // not visible
             cancel.addEventListener('click', function () {
                 $input.val('');
                 search.cursor = 0;
diff --git a/www/secureiframe/app-secure.less b/www/secureiframe/app-secure.less
index b876ad77a..19470b6c8 100644
--- a/www/secureiframe/app-secure.less
+++ b/www/secureiframe/app-secure.less
@@ -46,7 +46,7 @@
 
             .cp-loading-spinner-container {
                 height: 100px;
-                .cp-spinner {
+                .cp-spinner-main {
                     border-color: @cryptpad_color_brand;
                     border-top-color: transparent;
                 }
diff --git a/www/secureiframe/inner.js b/www/secureiframe/inner.js
index 2a8f19441..001eaa660 100644
--- a/www/secureiframe/inner.js
+++ b/www/secureiframe/inner.js
@@ -213,7 +213,7 @@ define([
             }
 
             var $container = $(h('span.cp-filepicker-content', [
-                h('div.cp-loading-spinner-container', h('span.cp-spinner'))
+                h('div.cp-loading-spinner-container', h('span.cp-spinner-main'))
             ])).appendTo($block);
 
             // Update the files list when needed
diff --git a/www/teams/app-team.less b/www/teams/app-team.less
index b5e4f9d46..b7f8686ec 100644
--- a/www/teams/app-team.less
+++ b/www/teams/app-team.less
@@ -50,7 +50,11 @@
             margin: @variables_icon_margin;
         }
     }
-
+    .cp-spinner {
+        svg {
+            animation: spin 10s linear infinite;
+        }
+    }
     #cp-sidebarlayout-container {
         @media screen and (max-width: 900px) {
             .cp-app-drive-toolbar-leftside {