Update teams & admin & differentiate loading page spinner to apps spinner

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>',

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;
+            }
+        }
+    }
+
 }

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;
                 }

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;
         }
     }

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;

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;
                 }

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

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 {