From d7f3e449fb4268433cefccb3b99e541032642733 Mon Sep 17 00:00:00 2001
From: Kevin MacMartin <prurigro@gmail.com>
Date: Wed, 25 Apr 2018 01:33:17 -0400
Subject: [PATCH] Use the same surface to render both the default and active
 profile image so transparent pngs don't show the default image behind them

---
 resources/assets/js/dashboard.js                   |  7 ++++---
 resources/assets/sass/dashboard.scss               | 11 -----------
 resources/views/dashboard/pages/settings.blade.php |  7 +++++--
 3 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/resources/assets/js/dashboard.js b/resources/assets/js/dashboard.js
index 9b9d2d0..c2c99aa 100644
--- a/resources/assets/js/dashboard.js
+++ b/resources/assets/js/dashboard.js
@@ -630,7 +630,8 @@ function userProfileImageInit() {
         $upload = $("#profile-image-upload"),
         $delete = $("#profile-image-delete"),
         $token = $("#token"),
-        $displayInner = $form.find(".image-display-inner").first();
+        $display = $form.find(".image-display").first(),
+        defaultImage = $display.data("default");
 
     let file,
         submitting = false;
@@ -660,7 +661,7 @@ function userProfileImageInit() {
                     submitting = false;
 
                     if (/\.png\?version=/.test(response)) {
-                        $displayInner.css({ backgroundImage: `url(${response})` });
+                        $display.css({ backgroundImage: `url(${response})` });
                         $delete.removeClass("inactive");
                     } else {
                         showAlert("Failed to upload image");
@@ -687,7 +688,7 @@ function userProfileImageInit() {
                     }
                 }).always(function(response) {
                     if (response === "success") {
-                        $displayInner.css({ backgroundImage: "none" });
+                        $display.css({ backgroundImage: `url(${defaultImage})` });
                         $delete.addClass("inactive");
                     } else {
                         showAlert("Failed to delete profile image");
diff --git a/resources/assets/sass/dashboard.scss b/resources/assets/sass/dashboard.scss
index 7823e55..faefdb7 100644
--- a/resources/assets/sass/dashboard.scss
+++ b/resources/assets/sass/dashboard.scss
@@ -820,17 +820,6 @@ body {
             background-position: center center;
             background-size: cover;
             background-repeat: no-repeat;
-
-            &-inner {
-                position: absolute;
-                top: 0px;
-                left: 0px;
-                width: 100%;
-                height: 100%;
-                background-position: center center;
-                background-size: cover;
-                background-repeat: no-repeat;
-            }
         }
 
         .image-buttons {
diff --git a/resources/views/dashboard/pages/settings.blade.php b/resources/views/dashboard/pages/settings.blade.php
index 2695b92..4d0719c 100644
--- a/resources/views/dashboard/pages/settings.blade.php
+++ b/resources/views/dashboard/pages/settings.blade.php
@@ -10,9 +10,12 @@
             <div class="col-12 col-md-8">
                 <form id="user-profile-image" class="edit-item user-profile-image">
                     @set('profile_image', $user->profileImage())
+                    @set('default_image', App\User::$default_profile_image)
 
-                    <div class="image-display" style="background-image: url('{{ App\User::$default_profile_image }}')">
-                        <div class="image-display-inner" style="background-image: url('{{ $profile_image !== null ? $profile_image : App\User::$default_profile_image }}')"></div>
+                    <div
+                        class="image-display"
+                        style="background-image: url('{{ $profile_image !== null ? $profile_image : $default_image }}')"
+                        data-default="{{ $default_image }}">
                     </div>
 
                     <div class="image-buttons">