UX: Change composer's edit reason link to an icon

UX: Change composer’s edit reason link to an icon

diff --git a/app/assets/javascripts/discourse/templates/components/link-to-input.hbs b/app/assets/javascripts/discourse/templates/components/link-to-input.hbs
index 19d1d34..29b892d 100644
--- a/app/assets/javascripts/discourse/templates/components/link-to-input.hbs
+++ b/app/assets/javascripts/discourse/templates/components/link-to-input.hbs
@@ -1,5 +1,12 @@
 {{#if showInput}}
   {{yield}}
 {{else}}
-  <a href>{{i18n key}}</a>
+  <a href>
+    {{#if key}}
+      {{i18n key}}
+    {{/if}}
+    {{#if icon}}
+      {{d-icon icon}}
+    {{/if}}
+  </a>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index 4ae081b..43c3599 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -37,7 +37,7 @@
                   {{/unless}}
 
                   {{#if canEdit}}
-                    {{#link-to-input onClick=(action "displayEditReason") showInput=showEditReason key="composer.show_edit_reason" class="display-edit-reason"}}
+                    {{#link-to-input onClick=(action "displayEditReason") showInput=showEditReason icon="info-circle" class="display-edit-reason"}}
                       {{text-field value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
                     {{/link-to-input}}
                   {{/if}}
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 655290b..2a4cab7 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -169,12 +169,23 @@
     font-style: italic;
   }
 
+  .whisper {
+    margin-right: 0.25em;
+  }
+
   .display-edit-reason {
-    display: inline;
+    display: inline-flex;
+    a {
+      display: inline-flex;
+    }
+    .d-icon {
+      padding: 0.3em 0.5em;
+      color: $tertiary;
+    }
   }
 
   #edit-reason {
-    margin: 4px;
+    margin: 0 4px;
   }
 
   .user-selector,
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index e44cb97..4d73f53 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -385,8 +385,8 @@ en:
         min_score_visibility: "Minimum Score for Visibility"
         score_to_hide: "Score to Hide Post"
         take_action_bonus:
-          name: 'took action'
-          title: 'When a staff member chooses to take action the flag is given a bonus.'
+          name: "took action"
+          title: "When a staff member chooses to take action the flag is given a bonus."
         user_accuracy_bonus:
           name: "user accuracy"
           title: "Users whose flags have been historically agreed with are given a bonus."
@@ -1645,7 +1645,6 @@ en:
       title_placeholder: "What is this discussion about in one brief sentence?"
       title_or_link_placeholder: "Type title, or paste a link here"
       edit_reason_placeholder: "why are you editing?"
-      show_edit_reason: "(add edit reason)"
       topic_featured_link_placeholder: "Enter link shown with title."
       remove_featured_link: "Remove link from topic."
       reply_placeholder: "Type here. Use Markdown, BBCode, or HTML to format. Drag or paste images."

GitHub sha: 5cfbe19e

1 Like

:grin: