image-upload-widget: Render image_disabled div if text to display.

If there is no `disabled_text` provided for the image upload widget,
then there is no need to have the `image_disabled` div rendered in
the template. This allows the hover CSS rules to be more general for
the image upload widget in general.

Adds a check for `disabled_text` around the `image_disabled` div
element in `image_upload_widget.hbs`.

Also, changes `image_upload_background` class to
`image_hover_background` so that it more accurately describes what
the CSS rule is for and why it's used in both the `image_disabled`
div and the `image_upload_button` div.

static/styles/image_upload_widget.css

@@ -12,7 +12,7 @@
         height: 100%;
     }
 
-    .image-upload-background {
+    .image-hover-background {
         content: "";
         background-color: hsla(0, 0%, 0%, 0.6);
         height: 100%;
@@ -130,7 +130,11 @@
             opacity: 1;
         }
 
-        .image-upload-background {
+        .image-disabled-text {
+            visibility: visible;
+        }
+
+        .image-hover-background {
             display: block;
         }
     }
@@ -148,12 +152,6 @@
         width: 200px;
         height: 200px;
     }
-
-    &:hover {
-        .image-disabled-text {
-            visibility: visible;
-        }
-    }
 }
 
 #user-avatar-source {

static/templates/settings/image_upload_widget.hbs

@@ -1,12 +1,14 @@
 <div id="{{widget}}-upload-widget" class="inline-block image_upload_widget">
+    {{#if disabled_text}}
     <div class="image-disabled {{#if is_editable_by_current_user}}hide{{/if}}">
-        <div class="image-upload-background"></div>
+        <div class="image-hover-background"></div>
         <span class="image-disabled-text flex" aria-label="{{ disabled_text }}" role="button" tabindex="0">
             {{ disabled_text }}
         </span>
     </div>
+    {{/if}}
     <div class="image_upload_button {{#unless is_editable_by_current_user}}hide{{/unless}}">
-        <div class="image-upload-background"></div>
+        <div class="image-hover-background"></div>
         <button class="image-delete-button" aria-label="{{ delete_text }}" role="button" tabindex="0">
             &times;
         </button>