From e036ef1d5c55e6715236b4aae3c95270832592a6 Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Wed, 7 Oct 2020 08:28:10 -0700
Subject: [PATCH] Improved styling and design of the editable image.

---
 editable-image.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/editable-image.js b/editable-image.js
index a9871de..f263146 100644
--- a/editable-image.js
+++ b/editable-image.js
@@ -26,15 +26,19 @@ class EditableImage extends IgniteElement {
 
             mt-editable-image:hover:after {
                 position: absolute;
-                font-family: 'Font Awesome 5 Duotone';
+                font-family: 'Font Awesome 5 Pro';
                 font-weight: 900;
                 content: '\\f332';
-                color: rgba(0,0,0,0.5);
-                font-size: 2.5em;
+                color: #fff;
+                font-size: 2.2em;
+                display: flex;
+                align-items: center;
+                justify-content: center;
             }
 
             mt-editable-image:hover {
                 cursor: pointer;
+                filter: brightness(0.9);
             }
         `;
     }
@@ -56,7 +60,8 @@ class EditableImage extends IgniteElement {
                 new img()
                     .src(this.source)
                     .style("object-fit", this.objectFit)
-                    .style("object-position", this.objectPosition),
+                    .style("object-position", this.objectPosition)
+                    .hide(this.source, value => { return value == null; }),
                 new input()
                     .type("file")
                     .style("display", "none", true)