From ca1fe2afa377beecf85238a502664f1d0d31e8ff Mon Sep 17 00:00:00 2001
From: Mihail Geshoski <mihail@moodle.com>
Date: Wed, 6 Jul 2022 10:17:04 +0800
Subject: [PATCH] MDL-74813 filepicker: Replace the dnd gif animation with a
 static icon

---
 lib/outputrenderers.php                              | 12 ++++++++++--
 .../filemanager_page_generallayout.mustache          | 12 ++++++++++--
 theme/boost/scss/moodle/filemanager.scss             |  2 +-
 theme/boost/style/moodle.css                         |  4 ++--
 theme/classic/style/moodle.css                       |  4 ++--
 5 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
index f8efbe6e4f0..50d6abbb831 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -2795,10 +2795,18 @@ EOD;
             $html .= <<<EOD
     <div id="file_info_{$client_id}" class="mdl-left filepicker-filelist" style="position: relative">
     <div class="filepicker-filename">
-        <div class="filepicker-container">$currentfile<div class="dndupload-message">$strdndenabled <br/><div class="dndupload-arrow"></div></div></div>
+        <div class="filepicker-container">$currentfile
+            <div class="dndupload-message">$strdndenabled <br/>
+                <div class="dndupload-arrow d-flex"><i class="fa fa-arrow-circle-o-down fa-3x m-auto"></i></div>
+            </div>
+        </div>
         <div class="dndupload-progressbars"></div>
     </div>
-    <div><div class="dndupload-target">{$strdroptoupload}<br/><div class="dndupload-arrow"></div></div></div>
+    <div>
+        <div class="dndupload-target">{$strdroptoupload}<br/>
+            <div class="dndupload-arrow d-flex"><i class="fa fa-arrow-circle-o-down fa-3x m-auto"></i></div>
+        </div>
+    </div>
     </div>
 EOD;
         }
diff --git a/lib/templates/filemanager_page_generallayout.mustache b/lib/templates/filemanager_page_generallayout.mustache
index dcdc35661a9..b4ed879b614 100644
--- a/lib/templates/filemanager_page_generallayout.mustache
+++ b/lib/templates/filemanager_page_generallayout.mustache
@@ -80,9 +80,17 @@
         <div class="fm-content-wrapper">
             <div class="fp-content"></div>
             <div class="fm-empty-container">
-                <div class="dndupload-message">{{#str}}dndenabled_inbox{{/str}}<br/><div class="dndupload-arrow"></div></div>
+                <div class="dndupload-message">{{#str}}dndenabled_inbox{{/str}}<br/>
+                    <div class="dndupload-arrow d-flex">
+                        <i class="fa fa-arrow-circle-o-down fa-3x m-auto"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="dndupload-target">{{#str}}droptoupload{{/str}}<br/>
+                <div class="dndupload-arrow d-flex">
+                    <i class="fa fa-arrow-circle-o-down fa-3x m-auto"></i>
+                </div>
             </div>
-            <div class="dndupload-target">{{#str}}droptoupload{{/str}}<br/><div class="dndupload-arrow"></div></div>
             <div class="dndupload-progressbars"></div>
             <div class="dndupload-uploadinprogress">{{#pix}}i/loading_small{{/pix}}<span class="sr-only">{{#str}}loadinghelp{{/str}}</span></div>
         </div>
diff --git a/theme/boost/scss/moodle/filemanager.scss b/theme/boost/scss/moodle/filemanager.scss
index b6bfc3217bb..2279d5b439c 100644
--- a/theme/boost/scss/moodle/filemanager.scss
+++ b/theme/boost/scss/moodle/filemanager.scss
@@ -844,11 +844,11 @@ a.ygtvspacer:hover {
 }
 
 .dndupload-arrow {
-    background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
     width: 100%;
     height: 80px;
     position: absolute;
     top: 5px;
+    color: $gray-500;
 }
 
 .fitem.disabled .filepicker-container,
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 39475277a2d..ae35ed63e26 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -15873,11 +15873,11 @@ a.ygtvspacer:hover {
   display: block; }
 
 .dndupload-arrow {
-  background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
   width: 100%;
   height: 80px;
   position: absolute;
-  top: 5px; }
+  top: 5px;
+  color: #8f959e; }
 
 .fitem.disabled .filepicker-container,
 .fitem.disabled .fm-empty-container {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 587c026c738..86a222c26c6 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -15873,11 +15873,11 @@ a.ygtvspacer:hover {
   display: block; }
 
 .dndupload-arrow {
-  background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
   width: 100%;
   height: 80px;
   position: absolute;
-  top: 5px; }
+  top: 5px;
+  color: #8f959e; }
 
 .fitem.disabled .filepicker-container,
 .fitem.disabled .fm-empty-container {