UX: Refactor avatar upload modal for better mobile spacing

app/assets/javascripts/discourse/components/avatar-uploader.js.es6

@@ -6,13 +6,6 @@ export default Ember.Component.extend(UploadMixin, {
   tagName: "span",
   imageIsNotASquare: false,
 
-  @computed("uploading")
-  uploadButtonText(uploading) {
-    return uploading
-      ? I18n.t("uploading")
-      : I18n.t("user.change_avatar.upload_picture");
-  },
-
   validateUploadedFilesOptions() {
     return { imagesOnly: true };
   },

app/assets/javascripts/discourse/components/images-uploader.js.es6

@@ -7,9 +7,7 @@ export default Ember.Component.extend(UploadMixin, {
 
   @computed("uploading")
   uploadButtonText(uploading) {
-    return uploading
-      ? I18n.t("uploading")
-      : I18n.t("user.change_avatar.upload_picture");
+    return uploading ? I18n.t("uploading") : I18n.t("upload");
   },
 
   validateUploadedFilesOptions() {

app/assets/javascripts/discourse/templates/components/avatar-uploader.hbs

@@ -1,10 +1,14 @@
-<label class="btn" disabled={{uploading}} title="{{i18n 'user.change_avatar.upload_title'}}">
-  {{d-icon "far-image"}}&nbsp;{{uploadButtonText}}
+<label class="btn btn-default btn-icon-text" disabled={{uploading}} title="{{i18n 'user.change_avatar.upload_title'}}">
+  {{d-icon "far-image"}}
+  {{#if uploading}}
+  {{i18n 'uploading'}} {{uploadProgress}}%
+  {{else}}
+  {{i18n 'upload'}}
+  {{/if}}
+
   <input class="hidden-upload-field" disabled={{uploading}} type="file" accept="image/*" />
 </label>
-{{#if uploading}}
-  <span>{{i18n 'upload_selector.uploading'}} {{uploadProgress}}%</span>
-{{/if}}
+
 {{#if imageIsNotASquare}}
   <div class="warning">{{i18n 'user.change_avatar.image_is_not_a_square'}}</div>
 {{/if}}

app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs

@@ -14,7 +14,7 @@
     </div>
     <div class="avatar-choice">
       {{radio-button id="gravatar" name="avatar" value="gravatar" selection=selected}}
-      <label class="radio" for="gravatar">{{bound-avatar-template user.gravatar_avatar_template "large"}} {{{i18n 'user.change_avatar.gravatar'}}} {{user.email}}</label>
+      <label class="radio" for="gravatar">{{bound-avatar-template user.gravatar_avatar_template "large"}} <span>{{{i18n 'user.change_avatar.gravatar'}}} {{user.email}}</span></label>
 
       {{d-button action=(action "refreshGravatar")
                  title="user.change_avatar.refresh_gravatar_title"

app/assets/stylesheets/common/base/user.scss

@@ -392,26 +392,65 @@
 }
 
 .avatar-selector {
-  label.radio {
-    padding-left: 10px;
-  }
   .avatar-choice {
-    min-height: 40px;
+    display: grid;
+    grid-template-columns: 2em 1fr auto;
+    grid-template-rows: auto auto;
+    align-items: center;
+    &:not(:last-of-type) {
+      margin-bottom: 0.75em;
+    }
+    span {
+      word-break: break-word; // Prevents long emails from breaking the modal width
+    }
+    input[type="radio"] {
+      margin-top: 0;
+    }
+    button {
+      margin-left: auto;
+    }
   }
-  label {
-    display: inline-block;
-    margin-right: 10px;
+  $label-max-width: 300px;
+  label.radio {
+    display: flex;
+    align-items: center;
+    max-width: $label-max-width;
+    margin: 0 0.5em 0 0;
+    padding: 0;
+    .avatar {
+      flex: 0 0 auto;
+      margin: 0 0.75em 0 0;
+    }
   }
-  #avatar-input {
-    width: 0;
-    height: 0;
-    overflow: hidden;
-  }
-  .avatar {
-    margin: 5px 10px 5px 0;
-  }
-  p.error {
+  .error {
     color: $danger;
+    margin: 0;
+    max-width: calc(#{$label-max-width} - 20px);
+    grid-column-start: 2;
+    grid-column-end: 3;
+  }
+
+  // IE11 Support
+  .avatar-choice {
+    display: -ms-grid;
+    -ms-grid-columns: 2em 1fr auto;
+    -ms-grid-rows: auto auto;
+    input[type="radio"] {
+      -ms-grid-row: 1;
+      -ms-grid-column: 1;
+    }
+    label.radio {
+      -ms-grid-row: 1;
+      -ms-grid-column: 2;
+    }
+    button {
+      -ms-grid-row: 1;
+      -ms-grid-column: 3;
+    }
+    .error {
+      -ms-grid-row: 2;
+      -ms-grid-column-span: 3;
+    }
   }
 }
 

config/locales/client.en.yml

@@ -991,7 +991,6 @@ en:
         uploaded_avatar: "Custom picture"
         uploaded_avatar_empty: "Add a custom picture"
         upload_title: "Upload your picture"
-        upload_picture: "Upload Picture"
         image_is_not_a_square: "Warning: we've cropped your image; width and height were not equal."
 
       change_profile_background: