From bd0a8bed56092383d6c5005dd55564d0f1722c1f Mon Sep 17 00:00:00 2001
From: Rehan Dalal <rehandalal@gmail.com>
Date: Mon, 23 Mar 2015 15:36:51 -0400
Subject: [PATCH] [bug 1137188] Stylize question field

---
 app/css/buddyup.css           | 20 --------------------
 app/css/question.css          | 34 ++++++++++++++++++++++++++++++----
 app/js/question_controller.js |  5 +++++
 app/question.html             |  6 +++---
 4 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/app/css/buddyup.css b/app/css/buddyup.css
index 817fad4..998e267 100644
--- a/app/css/buddyup.css
+++ b/app/css/buddyup.css
@@ -10,26 +10,6 @@ html {
   font-size: 10px;
 }
 
-/* footer */
-footer button:hover {
-    cursor: pointer;
-}
-footer button {
-    background-color: #edecec;
-    border: none;
-    width: 13%;
-    font-size: 2rem;
-}
-[aria-hidden="true"] {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
 /* overrides */
 form[role="dialog"][data-type="confirm"] p {
     font-size: 1rem;
diff --git a/app/css/question.css b/app/css/question.css
index 2035311..887197a 100644
--- a/app/css/question.css
+++ b/app/css/question.css
@@ -1,12 +1,38 @@
-#question_field {
+.QuestionFooter {
+    border-top: 1px solid #e7e7e7;
+}
+.QuestionField {
+    background: none;
     border: 0;
-    max-height: 100px;
+    color: #000;
+    font-size: 17px;
+    max-height: 142px; /* 20px (padding top/bottom) + 122px (5 rows of text) */
+    min-height: 44px; /* 20px (padding top/bottom) + 24px (1 row of text) */
     overflow: auto;
-    padding: 0.5em 1em;
+    padding: 10px 15px;
     outline: none;
     resize: none;
     width: 100%;
 }
+.QuestionField::-moz-placeholder {
+    color: #858585;
+    font-style: italic;
+}
+.QuestionSubmitButton {
+    background: #fff;
+    border-left: 1px solid #e7e7e7;
+    cursor: pointer;
+    font-size: 28px;
+    height: auto;
+    justify-content: flex-end;
+    margin: 5px 0;
+    position: relative;
+    text-align: center;
+    width: 64px;
+}
+.QuestionSubmitButton::before {
+    line-height: 36px;
+}
 .StartAskingMessage {
     align-items: center;
     color: #4d4d4d;
@@ -32,7 +58,7 @@
     padding: 2px 0;
 }
 .SignInLink {
-  margin: 15px 15px 5px;
+    margin: 15px 15px 5px;
 }
 
 .QuestionThread {
diff --git a/app/js/question_controller.js b/app/js/question_controller.js
index 2d5acea..eca7312 100644
--- a/app/js/question_controller.js
+++ b/app/js/question_controller.js
@@ -30,6 +30,7 @@
 
   var question_thread;
   var question_form;
+  var question_submit_button;
   var suggestions;
   var thread_introduction;
   var question_id;
@@ -435,6 +436,10 @@
       question_form = document.getElementById('question_form');
       question_form.addEventListener('submit', submit_comment);
 
+      question_submit_button =
+        document.getElementById('question_submit_button');
+      question_submit_button.addEventListener('click', submit_comment);
+
       question_thread = document.getElementById('question-thread');
       question_thread.addEventListener('click', handle_event);
       suggestions = document.getElementById('suggestions');
diff --git a/app/question.html b/app/question.html
index be370ea..b1c6789 100644
--- a/app/question.html
+++ b/app/question.html
@@ -50,10 +50,10 @@ <h1>My Question</h1>
           <ul id="comment-list" class="vbox"></ul>
         </section>
       </main>
-      <footer>
+      <footer class="QuestionFooter">
         <form id="question_form" class="hbox">
-          <textarea id="question_field" rows="1" placeholder="Type your question"></textarea>
-          <button type="submit" data-icon-after="send"></button>
+          <textarea id="question_field" class="QuestionField" rows="1" placeholder="Write your message&hellip;"></textarea>
+          <a id="question_submit_button" class="QuestionSubmitButton vbox" data-icon="send"></a>
         </form>
         <div id="sign-in-link" class="SignInLink hide">
           <a href="authentication.html" class="bb-button recommend">Sign in to reply</a>