UX: shorten text to "Solution"

UX: styles Solved in green
UX: hide by XYZ by default

assets/javascripts/discourse/initializers/extend-for-solved-button.js.es6

@@ -81,7 +81,7 @@ export default {
             'unacceptAnswer',
             locale,
             'check-square',
-            {className: 'accepted fade-out', prefixHTML: '<span class="accepted-text">' + I18n.t('solved.accepted_answer') + '</span>'})
+            {className: 'accepted fade-out', prefixHTML: '<span class="accepted-text">' + I18n.t('solved.solution') + '</span>'})
           );
       }
 

assets/stylesheets/solutions.scss

@@ -1,4 +1,4 @@
-.post-controls .accepted, .fa.accepted, .accepted-text {
+.solved-panel, .post-controls .accepted, .fa.accepted, .accepted-text {
   color: green;
 }
 
@@ -20,15 +20,18 @@
   float: left;
 }
 
-.mobile-view .cooked .solved {
+.mobile-view .solved-panel {
   margin-bottom: 15px;
 }
 
-.cooked .solved {
+.solved-panel {
+
+  .by {
+    display: none;
+  }
 
   margin-top: 20px;
   margin-bottom: 0px;
-  color: scale-color($primary, $lightness: 15%);
   font-size: 13px;
   // margin-bottom: 0px;
   // padding: 4px 0px;

config/locales/client.en.yml

@@ -6,5 +6,6 @@ en:
       has_accepted_answer: "This topic has an accepted answer"
       unaccept_answer: "Unaccept answer"
       accepted_answer: "Accepted answer"
-      accepted_html: "<i class='fa-check-square fa accepted'></i> Solved by <a href data-user-card='{{username_lower}}'>{{username}}</a> in <a href='{{post_path}}'>post #{{post_number}}</a>"
+      solution: "Solution"
+      accepted_html: "<i class='fa-check-square fa accepted'></i> Solved <span class='by'>by <a href data-user-card='{{username_lower}}'>{{username}}</a></span> in <a href='{{post_path}}'>post #{{post_number}}</a>"
       accepted_notification: "<i title='accepted' class='fa fa-check-square'></i><p><span>{{username}}</span> {{description}}</p>"