Lighten the message controls and show them on hover

(imported from commit 09953116ebef779ea99327ff7c76428e908e2e31)

static/js/message_list_view.js

@@ -19,7 +19,7 @@ function stringify_time(time) {
     if (feature_flags.twenty_four_hour_time) {
         return time.toString('HH:mm');
     }
-    return time.toString('h:mmtt');
+    return time.toString('h:mm TT');
 }
 
 function add_display_time(message, prev) {

static/js/ui.js

@@ -678,7 +678,7 @@ function toggle_star(row_id) {
             return;
         }
         var favorite_image = row.find(".message_star");
-        favorite_image.toggleClass("empty-star");
+        favorite_image.toggleClass("icon-vector-star").toggleClass("icon-vector-star-empty").toggleClass("empty-star");
         var title_state = message.starred ? "Unstar" : "Star";
         favorite_image.attr("title", title_state + " this message");
     });

static/styles/zulip.css

@@ -652,21 +652,24 @@ td.pointer {
 }
 
 .message_time {
-    position: absolute;
-    right: -40px;
-    top: 7px;
     display: inline-block;
     font-weight: normal;
-    font-size: 75%;
-    line-height: 100%;
-    color: #999;
+    font-size: 11px;
+    color: #aaa;
+    vertical-align: middle;
+    padding: 0px 2px 3px 2px;
+    font-weight: 300;
 }
 
 .message_controls {
     display: inline-block;
     position: absolute;
     top: 2px;
-    right: -80px;
+    right: -78px;
+}
+
+.include-sender .message_controls {
+    top: -2px;
 }
 
 .message_data {
@@ -677,10 +680,6 @@ td.pointer {
     position: relative;
 }
 
-.include-sender .message_time {
-    top: 7px;
-}
-
 .ztable_layout_row {
     visibility: collapse;
 }
@@ -1078,7 +1077,7 @@ a.message_label_clickable:hover {
 }
 
 .edit_content {
-    opacity: .5;
+    opacity: .4;
     width: 0px;
     height: 0px;
     display: inline-block;
@@ -1093,7 +1092,7 @@ a.message_label_clickable:hover {
     left: 0.4em;
     border-radius: 1px;
     padding: 1px 2px;
-    border: 1px solid #eee;
+    border: 1px dotted #ccc;
 }
 
 .edit_content:hover {
@@ -1133,7 +1132,8 @@ a.message_label_clickable:hover {
     cursor: pointer;
 }
 
-.message_hovered .info {
+.message_hovered .info,
+.message_hovered .empty-star {
     visibility: visible;
 }
 
@@ -2556,12 +2556,13 @@ li.expanded_subject {
 .star {
     display: inline-block;
     opacity: 1;
-    font-size: 16px;
+    font-size: 14px;
     color: #2c8211;
 }
 
 .empty-star {
-    color: #CCC;
+    color: #bbb;
+    visibility: hidden;
 }
 
 .empty-star:hover {
@@ -2571,8 +2572,9 @@ li.expanded_subject {
 
 .info {
     display: inline-block;
-    font-size: 16px;
-    color: #CCC;
+    font-size: 15px;
+    color: #bbb;
+    visibility: hidden;
 }
 
 .star:hover {

static/templates/message.handlebars

@@ -193,12 +193,12 @@
             </span>
         </span>
         {{/include_sender}}
-        <span class="message_time">{{timestr}}</span>
         <div class="message_controls">
           <div class="star">
-            <span class="message_star {{#if starred}}icon-vector-star{{else}}icon-vector-star empty-star{{/if}}"
+            <span class="message_star {{#if starred}}icon-vector-star{{else}}icon-vector-star-empty empty-star{{/if}}"
                title="{{#if starred}}Unstar{{else}}Star{{/if}} this message"></span>
           </div>
+          <span class="message_time">{{timestr}}</span>
           <div class="info actions_hover">
             <i class="icon-vector-chevron-down"></i>
           </div>