6 files changed, 37 insertions, 11 deletions
diff --git a/web-ui/app/js/mail_view/ui/feedback_box.js b/web-ui/app/js/mail_view/ui/feedback_box.js
index 4656a235..5a04e291 100644
--- a/web-ui/app/js/mail_view/ui/feedback_box.js
+++ b/web-ui/app/js/mail_view/ui/feedback_box.js
@@ -21,7 +21,8 @@ define(['flight/lib/component', 'views/templates', 'page/events', 'features'],
 
   return defineComponent(function () {
      this.defaultAttrs({
-       'closeButton': '.close-mail-button'
+       'closeButton': '.close-mail-button',
+       'submitButton': '#send-button',
      });
 
     this.render = function () {
@@ -39,11 +40,17 @@ define(['flight/lib/component', 'views/templates', 'page/events', 'features'],
       this.trigger(document, events.dispatchers.rightPane.openNoMessageSelected);
     };
 
+    this.showFeedbackSubmittedMessage = function() {
+      this.trigger(document, events.ui.userAlerts.displayMessage, { message: 'Thanks for your feedback!' });
+    };
+
     this.after('initialize', function () {
       if (features.isEnabled('feedback')) {
           this.render();
           this.on(document, events.dispatchers.rightPane.openFeedbackBox, this.openFeedbackBox);
           this.on(this.select('closeButton'), 'click', this.showNoMessageSelected);
+          this.on(this.select('submitButton'), 'click', this.showNoMessageSelected);
+          this.on(this.select('submitButton'), 'click', this.showFeedbackSubmittedMessage);
       }
     });
 
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index c54cc6d6..4d90fff9 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -99,6 +99,9 @@ define(function () {
       highlightResults: 'search:highlightResults',
       resetHighlight: 'search:resetHighlight'
     },
+    feedback: {
+      submitted: 'feedback:submitted'
+    },
     mail: {
       here: 'mail:here',
       want: 'mail:want',
diff --git a/web-ui/app/locales/en/translation.json b/web-ui/app/locales/en/translation.json
index a360cc02..5992216a 100644
--- a/web-ui/app/locales/en/translation.json
+++ b/web-ui/app/locales/en/translation.json
@@ -60,6 +60,8 @@
     "Search results for:": "Search results for:",
     "Tags": "Tags",
     "Forward": "Forward",
+    "Submit Feedback": "Submit Feedback",
+    "feedback-placeholder": "Tell us what you like, didn't like, what is missing and generally what you think about Pixelated.",
 
     "tags": {
         "inbox": "Inbox",
diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss
index 55073b3d..6f3ae29e 100644
--- a/web-ui/app/scss/_compose.scss
+++ b/web-ui/app/scss/_compose.scss
@@ -33,7 +33,7 @@
     border-bottom: 1px solid #DDD;
     padding: 1px;
   }
-  label {
+  label, span {
     color: #AAA;
     padding: 0.5rem;
     cursor: text;
@@ -61,11 +61,12 @@
   input.showfloatlabel, textarea.showfloatlabel {
     padding-top: 1rem !important;
   }
-  input {
-    &#subject {
-      font-size: 1.6875rem;
-      line-height: 1.4;
-    }
+  input#subject, #feedback-subject {
+    font-size: 1.6875rem;
+    line-height: 1.4;
+  }
+  #feedback-subject {
+    color: #333;
   }
   textarea {
     border-bottom: 2px solid #DDD;
diff --git a/web-ui/app/templates/compose/feedback_box.hbs b/web-ui/app/templates/compose/feedback_box.hbs
index b10d0da3..ab5b3018 100644
--- a/web-ui/app/templates/compose/feedback_box.hbs
+++ b/web-ui/app/templates/compose/feedback_box.hbs
@@ -2,15 +2,14 @@
   <i class="fa fa-times"></i>
 </button>
 <div class="floatlabel">
-  <label class="floatlabel" for="subject">Subject</label>
-  <input class="floatlabel" name="subject" type="text" id="subject" value="{{subject}}" placeholder="{{t 'Subject'}}" tabindex="1"/>
+  <span id="feedback-subject">Feedback</span>
 </div>
 <div class="floatlabel">
   <label class="floatlabel" for="text-box">Body</label>
-  <textarea class="floatlabel" name="body" id="text-box" placeholder="{{t 'Body'}}" tabindex="2">{{body}}</textarea>
+  <textarea class="floatlabel" name="body" id="text-box" placeholder="{{t 'feedback-placeholder'}}" tabindex="2">{{body}}</textarea>
 </div>
 
 
 <div class="buttons-group columns">
-  <button id="send-button" tabindex="6"><i class="fa fa-send"></i></button>
+  <button id="send-button" tabindex="6">{{t 'Submit Feedback'}} </button>
 </div>
diff --git a/web-ui/test/spec/mail_view/ui/feedback_box.spec.js b/web-ui/test/spec/mail_view/ui/feedback_box.spec.js
index cbe9b0bb..ab41c7d1 100644
--- a/web-ui/test/spec/mail_view/ui/feedback_box.spec.js
+++ b/web-ui/test/spec/mail_view/ui/feedback_box.spec.js
@@ -16,4 +16,18 @@ describeComponent('mail_view/ui/feedback_box', function () {
 
   });
 
+  describe('when submit feedback', function () {
+    it('should display submitted message', function() {
+      var spy = spyOnEvent(document, Pixelated.events.ui.userAlerts.displayMessage);
+      this.component.select('submitButton').click();
+      expect(spy).toHaveBeenTriggeredOnAndWith(document, { message: 'Thanks for your feedback!' });
+    });
+
+    it('should close feedback box after submit', function() {
+      var spy = spyOnEvent(document, Pixelated.events.dispatchers.rightPane.openNoMessageSelected);
+      this.component.select('submitButton').click();
+      expect(spy).toHaveBeenTriggeredOn(document);
+    });
+  });
+
 });