add a mask to load shape to flow text around quicker

3 files changed, 4 insertions, 1 deletions

diff --git a/src/assets/pleromatan_apology_fox_mask.png b/src/assets/pleromatan_apology_fox_mask.png
new file mode 100644
index 00000000..4d1990d5
--- /dev/null
+++ b/src/assets/pleromatan_apology_fox_mask.png
diff --git a/src/assets/pleromatan_apology_mask.png b/src/assets/pleromatan_apology_mask.png
new file mode 100644
index 00000000..18adafff
--- /dev/null
+++ b/src/assets/pleromatan_apology_mask.png
diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
index ba008d81..6cfe893c 100644
--- a/src/components/update_notification/update_notification.js
+++ b/src/components/update_notification/update_notification.js
@@ -2,6 +2,8 @@ import Modal from 'src/components/modal/modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import pleromaTan from 'src/assets/pleromatan_apology.png'
 import pleromaTanFox from 'src/assets/pleromatan_apology_fox.png'
+import pleromaTanMask from 'src/assets/pleromatan_apology_mask.png'
+import pleromaTanFoxMask from 'src/assets/pleromatan_apology_fox_mask.png'
 
 import {
   faTimes
@@ -25,8 +27,9 @@ const UpdateNotification = {
   },
   computed: {
     pleromaTanStyles () {
+      const mask = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
       return {
-        'shape-outside': 'url(' + this.pleromaTanVariant + ')'
+        'shape-outside': 'url(' + mask + ')'
       }
     },
     dynamicStyles () {