DIV-1167 - Use material icon for PDF

edivorce/apps/core/static/svg/pdf-icon.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#606060;}
+</style>
+<path class="st0" d="M0,0h50v50H0V0z"/>
+<path class="st1" d="M41.7,4.2h-25c-2.3,0-4.2,1.9-4.2,4.2v25c0,2.3,1.9,4.2,4.2,4.2h25c2.3,0,4.2-1.9,4.2-4.2v-25
+	C45.8,6,44,4.2,41.7,4.2z M24,19.8c0,1.7-1.5,3.1-3.1,3.1h-2.1v4.2h-3.1V14.6h5.2c1.7,0,3.1,1.5,3.1,3.1V19.8z M34.4,24
+	c0,1.7-1.5,3.1-3.1,3.1H26V14.6h5.2c1.7,0,3.1,1.5,3.1,3.1V24z M42.7,17.7h-3.1v2.1h3.1v3.1h-3.1v4.2h-3.1V14.6h6.2V17.7z
+	 M18.8,19.8h2.1v-2.1h-2.1V19.8z M8.3,12.5H4.2v29.2c0,2.3,1.9,4.2,4.2,4.2h29.2v-4.2H8.3V12.5z M29.2,24h2.1v-6.2h-2.1V24z"/>
+</svg>

vue/package-lock.json

@@ -7303,9 +7303,9 @@
       }
     },
     "node-forge": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
-      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
       "dev": true
     },
     "node-gyp": {
@@ -9515,12 +9515,12 @@
       "dev": true
     },
     "selfsigned": {
-      "version": "1.10.7",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
-      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
+      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
       "dev": true,
       "requires": {
-        "node-forge": "0.9.0"
+        "node-forge": "^0.10.0"
       }
     },
     "semver": {

vue/src/components/Uploader/Image.vue

@@ -4,11 +4,14 @@
       :class="['image-wrap', isValidImage ? 'valid' : '']"
       @click.prevent="showPreview($event)"
     >
-      <img v-if="isValidImage" :src="file.objectURL" :style="imageStyle" />
-      <i
-        class="fa fa-file-pdf-o"
+      <img v-if="isValidImage" class="image" :src="file.objectURL" :style="imageStyle" />
+      <img 
+        class="pdf"
+        :src="pdfIconUrl"
         v-if="!this.file.error && file.type === 'application/pdf'"
-      ></i>
+        width="50" 
+        height="50"
+      >
       <i class="fa fa-frown-o" v-if="this.file.error"></i>
       <button
         type="button"
@@ -91,6 +94,9 @@
         }
         return "";
       },
+      pdfIconUrl() {
+        return "../../static/svg/pdf-icon.svg";
+      }
     },
   };
 </script>
@@ -108,24 +114,20 @@
     display: flex;
     align-items: center;
 
-    img {
+    img.image {
       position: absolute;
       top: 0;
       left: 0;
     }
 
-    i.fa-file-pdf-o,
+    img.pdf {
+      margin-left: 52px;
+    }
+
     i.fa-frown-o {
       display: block;
       font-size: 48px;
       margin-left: 60px;
-    }
-
-    i.fa-file-pdf-o {
-      color: #d5d5d5;
-    }
-
-    i.fa-frown-o {
       color: #eee;
     }
 
@@ -154,7 +156,7 @@
       color: white;
     }
 
-    &:hover img {
+    &:hover img.image {
       opacity: 0.12;
     }
   }