mobile header gradient reflects the desktop gradient; added background texture to mobile

app/views/layouts/application.mobile.haml

@@ -50,7 +50,8 @@
       = yield
 
     %header
-      = link_to(image_tag('white@2x.png', :height => 20, :width => 127, :id => 'header_title'), multi_stream_path)
+      = link_to(image_tag('header-logo2x.png', :height => 40, :width => 40, :id => 'header_title'), multi_stream_path)
+
       - if user_signed_in?
         - if yield(:header_action).present?
           = yield(:header_action)

public/stylesheets/sass/mobile.scss

@@ -225,7 +225,12 @@ a {
 }
 
 body {
-  background: #555555;
+  background: {
+    image: url('/images/hatched-bg.jpg');
+    position: fixed;
+    /* scale background image down for iOS retina display */
+    size: 50%;
+  }
   max-width: 100%;
   margin-top: 55px;
 }
@@ -253,6 +258,8 @@ body {
     max-width: 100%; }
   min-height: 34px;
   .avatar {
+    @include border-radius(4px);
+
     float: left;
     height: 35px;
     width: 35px;
@@ -318,13 +325,8 @@ body {
 }
 
 #login_form {
-  @include border-radius(3px);
-  @include box-shadow(0, 1px, 5px, rgba(0, 0, 0, 1));
   padding: 0;
   padding-bottom: 10px;
-  background: {
-    color: #fff;
-  }
 
   margin: auto 20px;
 
@@ -358,13 +360,15 @@ body {
   }
 }
 
-.stream_element {
-  @include border-radius(3px);
-  @include box-shadow(0, 1px, 5px, rgba(0, 0, 0, 1));
-  background: {
-    color: #fff; };
-  border: {
-    bottom: 1px solid black; };
+.stream_element, #login_form {
+  @include border-radius(5px);
+  @include box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.2));
+
+  background-color: #fff;
+
+  border: 1px solid #bbb;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #aaa;
 }
 
 .photo_attachments {
@@ -388,18 +392,21 @@ body {
     size: larger; }; }
 
 .more-link {
-  -webkit-box-shadow: inset 0 1px 5px #111, 0 1px 1px #999;
+  -webkit-box-shadow: inset 0 1px 5px #777, 0 1px 1px rgba(0,0,0,0.4);
   display: block;
   text-align: center;
   padding: 0 10px;
   margin: 0 10px;
-  border-radius: 3px;
+  border-radius: 5px;
+
   background: {
-    color: #333333; };
+    color: rgba(220,220,220,0.8);
+  }
+
   h1 {
-    color: #cccccc;
+    color: #999;
     padding: 20px;
-    text-shadow: 0 -2px 0 black; } }
+    text-shadow: 0 2px 0 #fff; } }
 
 .info {
   color: #ccc;
@@ -507,8 +514,12 @@ body {
   float: right; }
 
 header {
-  @include linear-gradient(#444444, black);
-  @include box-shadow(0,1px,1px,rgba(0,0,0,0.7));
+  @include box-shadow(0,1px,2px,#333);
+
+  background: {
+    image: url("/images/header-bg-long.jpg");
+  }
+
   width: 100%;
   position: fixed;
   z-index: 10;
@@ -521,7 +532,7 @@ header {
   border: {
     bottom: 1px solid #222;
   }
-  padding: 12px 5px;
+  padding: 2px 5px;
   .right {
     float: right; } }
 
@@ -545,15 +556,21 @@ footer {
 }
 
 .bottom_bar {
-  @include border-radius(0, 0, 3px, 3px);
+  @include border-radius(0, 0, 5px, 5px);
+  box-shadow: inset 0 2px 5px -3px #999;
+
   display: block;
   position: relative;
   padding: 10px;
-  background: #eeeeee;
+  background: #eee;
+
   margin: {
     top: 10px; };
+
   border: {
-    top: 1px solid #dddddd; };
+    top: 1px solid #ccc;
+  };
+
   min-height: 24px;
 
   > a,