From ea586ac581bd3463ec5f9fb662255bba2e7a4f6c Mon Sep 17 00:00:00 2001
From: Waseem Daher <wdaher@humbughq.com>
Date: Fri, 14 Sep 2012 12:19:16 -0400
Subject: [PATCH] Restyle compose window slightly, add close button.

I still don't love it visually, but it's getting there.
Some obvious issues:
 Personals window is totally unstyled
 Clicking 'new message' should perhaps give you a fresh new window
  not something prepopulated with old stuff. Think about this.

(imported from commit 8b28fd084d550db404eabbe63c056fa6866c0697)
---
 templates/zephyr/index.html     | 15 ++++++++-------
 zephyr/static/styles/zephyr.css |  8 +++++++-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/templates/zephyr/index.html b/templates/zephyr/index.html
index 191e3753a3..5a33ad9f16 100644
--- a/templates/zephyr/index.html
+++ b/templates/zephyr/index.html
@@ -75,9 +75,10 @@ var people_list = {{ people }};
           </div>
     <div class="tabbable container zephyr_compose">
         <ul class="nav nav-tabs" id="zephyr-type-tabs">
-            <li class="active"><a href="#class-message" data-toggle="tab">Class message</a></li>
-            <li><a href="#personal-message" data-toggle="tab">Personal message</a></li>
-            <li class="alert pull-right" id="send-status"></li>
+            <li class="active"><a href="#class-message" data-toggle="tab">Stream</a></li>
+            <li><a href="#personal-message" data-toggle="tab">Huddle</a></li>
+            <li class="alert" id="send-status"></li>
+            <li class="pull-right"><button type="button" class="close" onclick="hide_compose()">×</button></li>
         </ul>
 
         <div class="tab-content">
@@ -97,20 +98,20 @@ var people_list = {{ people }};
                   <td class="zephyr_recipient">
                     <p>
                       <span class="zephyr_label_clickable zephyr_class">
-                            <input type="text" class="zephyr_recipient_box" name="class" id="class" value="" />
+                            <input type="text" class="zephyr_recipient_box" name="class" id="class" value="" placeholder="Stream"/>
                       </span>
                       <br/>
                       <span class="zephyr_label_clickable zephyr_instance">
 
-                            <input type="text" class="zephyr_recipient_box" name="instance" id="instance" value="" />
+                            <input type="text" class="zephyr_recipient_box" name="instance" id="instance" value="" placeholder="Topic"/>
                       </span>
                     </p>
                   </td>
                   <td class="messagebox compose">
                     <img class="profile_picture" src="http://www.gravatar.com/avatar/a?d=identicon"/>
                     <p class="zephyr_text">
-                            <textarea class="zephyr_message" name="new_zephyr" id="new_zephyr" value="" /></textarea>
-                        <input type="submit" value="Zephyr" class="btn send_zephyr" />
+                            <textarea class="zephyr_message" name="new_zephyr" id="new_zephyr" value="" placeholder="Compose your message here..."/></textarea>
+                        <input type="submit" value="Send" class="btn send_zephyr"/>
                     </p>
                   </td>
                 </tr>
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index 7ebf6f1dc1..374261ddb4 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -41,7 +41,8 @@ ul.nav-zephyr {
 }
 
 .zephyr_comp {
-    background-color: #EEE;
+    border: 1px solid #EEE;
+    border-top: 0px;
 }
 
 td.pointer {
@@ -231,3 +232,8 @@ input.send_zephyr {
     background-color: blue;
     width: 2px;
 }
+
+#zephyr-type-tabs {
+    margin-top: 10px;
+    margin-bottom: 0px;
+}