Add new icons to the mobile version

app/assets/stylesheets/mobile.css.scss

@@ -22,7 +22,7 @@ body {
 }
 
 #main.container {
-  padding-top: 55px;
+  margin: 55px 10px 0px 10px;
 }
 
 h3 {
@@ -33,17 +33,6 @@ h3 {
   clear: both;
 }
 
-#menu_badge {
-  float: right;
-  display: inline-block;
-  padding: 0px 10px 0px 12px;
-  margin-top: 3px;
-
-  img.menu {
-    height: 40px;
-  }
-}
-
 #app {
   position: relative;
   left: 0;
@@ -162,10 +151,6 @@ h3 {
   }
 }
 
-.row {
-  margin-left: 20px !important;
-}
-
 .message {
   padding-left: 2px;
 }
@@ -312,8 +297,6 @@ h3 {
 
 
 #main_stream {
-  margin-left: 10px;
-  margin-right: 10px;
   .from {
     white-space: nowrap;
     overflow: hidden;
@@ -471,7 +454,12 @@ header {
   @include box-shadow(0, 1px, 2px, #333);
   border-bottom: 1px solid #222;
 
-  #header_title { display: inline-block; }
+  #header_title {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    padding: 7px;
+  }
 
   #nav_badges {
     float: right;
@@ -480,49 +468,32 @@ header {
 
     .badge {
       display: inline;
-      margin-left: 3px;
-      padding: 8px 3px;
-      padding-bottom: 9px;
+      margin: 0px 4px;
+      padding: 10px 6px;
       font-weight: bold;
       font-size: smaller;
-      width: 28px;
+      background-color: #333333;
+      
+      img {
+        height: 30px;
+        width: 30px;
+      }
     }
 
-    .badge:hover .badge_count {
-        background-color: #bd0902;
+    .badge_count {
+      @include border-radius(2px);
+      z-index: 3;
+      position: absolute;
+      top: 3px;
+      padding: 1px 3px;
+      background-color: $red;
+      margin-left: -8px;
     }
     
-    a {
-      padding: 5px 0px;
+    #conversation_icon {
+      height: 18px;
     }
   }
-
-  .badge_count {
-    -moz-border-radius: 2px 2px 2px 2px;
-    -webkit-border-radius: 2px 2px 2px 2px;
-    border-radius: 2px 2px 2px 2px;
-    z-index: 3;
-    position: absolute;
-    top: 1px;
-    padding: 0 2px;
-      padding-bottom: 1px;
-    background-color: $red;
-    line-height: 12px;
-    color: white;
-    font-size: smaller;
-  }
-
-  #notification {
-    right: 140px;
-  }
-
-  #conversation {
-    right: 110px;
-  }
-
-  .badge-inverse {
-    background-color: #333333 !important;
-  }
 }
 
 footer {
@@ -687,12 +658,7 @@ footer {
 }
 
 #new_status_message {
-  text-align: left;
-  position: absolute;
-  left: 0;
-  top: 40px;
-  width: 100%;
-  min-height: 250px;
+  margin: 0px;
 
   fieldset {
     padding: 10px;
@@ -799,12 +765,6 @@ select {
   }
 }
 
-.compose_icon {
-  height: 28px;
-  width: 28px;
-  margin-left: 10px;
-}
-
 .navbar-inner .right {
   position: absolute;
   right: 12px;
@@ -835,28 +795,6 @@ select {
   margin-bottom: 5px;
 }
 
-#header-nav {
-    font-weight: bold;
-    height: 100%;
-    margin-right: 5px;
-    margin-top: 3px;
-display: inline-block;
-}
-
-#header-nav a {
-    padding: 0 10px;
-    width: 100%;
-    color: $text-grey;
-}
-
-#header-nav > div {
-  display: inline;
-    font-weight: bold;
-    margin: 0 2px;
-    position: relative;
-    width: 28px;
-}
-
 .message_count {
   border-radius: 2px 2px 2px 2px;
   float: right;

app/views/layouts/application.mobile.haml

@@ -48,23 +48,30 @@
   %body
     #app
       %header#main_nav
-        = link_to(image_tag('branding/header-logo2x.png', height: 40, width: 40), stream_path, id: 'header_title')
+        = link_to(image_tag('icons/asterisk_white_mobile.png'), stream_path, id: 'header_title')
         - if user_signed_in?
-          = link_to(image_tag('icons/menu.png', :class => 'menu'),"#", id: "menu_badge")
-
           #nav_badges
-            = link_to(image_tag('icons/notifications_grey.png', height: 16, width: 16, id: 'notification-flag'), notifications_path, class: "badge badge-inverse", id: "notification_badge")
-            - if current_user.unread_notifications.count > 0
-              .badge_count{id: "notification"}
-                = current_user.unread_notifications.count
-            = link_to(image_tag('icons/mail_grey.png', height: 11, width: 17), conversations_path, class: "badge badge-inverse", id: "conversations_badge")
-            - if current_user.unread_message_count > 0
-              .badge_count{id: "conversation"}
-                = current_user.unread_message_count
+            -# Notifications
+            = link_to notifications_path, class: "badge", id: "notification_badge" do
+              = image_tag('icons/notifications_white.png')
+              - if current_user.unread_notifications.count > 0
+                %span.badge_count{id: "notification"}
+                  = current_user.unread_notifications.count
+            -# Conversations
+            = link_to conversations_path, class: "badge", id: "conversations_badge" do
+              = image_tag('icons/mail_white.png', id: 'conversation_icon')
+              - if current_user.unread_message_count > 0
+                %span.badge_count{id: "conversation"}
+                  = current_user.unread_message_count
+            -# Composition
             - if yield(:header_action).present?
               = yield(:header_action)
             - else
-              = link_to(image_tag('icons/compose_mobile2.png', class: 'compose_icon'), new_status_message_path)
+              = link_to(image_tag('icons/compose_mobile.png'), new_status_message_path, class: "badge")
+            -# Menu
+            = link_to(image_tag('icons/menu.png'), "#", id: "menu_badge", class: "badge")
+
+
 
       #main.container{:role => "main"}
         - if current_page?(:activity_stream)

app/views/shared/_publisher.mobile.haml

@@ -9,9 +9,8 @@
   = include_gon
 
 = form_for StatusMessage.new, {:data => {:ajax => false}} do |status|
-  #message_container
-    = status.hidden_field :provider_display_name, :value => 'mobile'
-    = status.text_area :text, :placeholder => t('.whats_on_your_mind'), :rows => 4, :autofocus => "autofocus"
+  = status.hidden_field :provider_display_name, :value => 'mobile'
+  = status.text_area :text, :placeholder => t('.whats_on_your_mind'), :rows => 4, :autofocus => "autofocus"
 
   %fieldset
     %span#publisher_service_icons