Merge pull request #3138 from stevenh512/bootstrap-sass

bootstrap-sass (w00t)

Gemfile

@@ -109,6 +109,7 @@ gem 'client_side_validations'
 
 group :assets do
   gem 'sass-rails', '3.1.4'
+  gem 'bootstrap-sass', '~> 2.0.2'
 
   # Windows and OSX have an execjs compatible runtime built-in, Linux users should
   # install Node.js or use 'therubyracer'.

Gemfile.lock

@@ -94,6 +94,7 @@ GEM
       activemodel
       fog
     bcrypt-ruby (3.0.1)
+    bootstrap-sass (2.0.2)
     builder (3.0.0)
     capistrano (2.9.0)
       highline
@@ -473,6 +474,7 @@ DEPENDENCIES
   addressable (= 2.2.4)
   airbrake
   asset_sync
+  bootstrap-sass (~> 2.0.2)
   bundler (~> 1.1.0)
   capistrano
   capistrano-ext

app/assets/javascripts/app/views.js

@@ -61,11 +61,11 @@ app.views.Base = Backbone.View.extend({
   },
 
   renderPluginWidgets : function() {
-    this.$(this.tooltipSelector).twipsy();
+    this.$(this.tooltipSelector).tooltip();
     this.$("time").timeago();
   },
 
   removeTooltips : function() {
-    $(".twipsy").remove();
+    $(".tooltip").remove();
   }
 });

app/assets/javascripts/main.js

@@ -38,6 +38,6 @@
 //= require contact-list
 //= require aspect-sorting
 //= require mentions
-//= require bootstrap/bootstrap-twipsy
-//= require bootstrap/bootstrap-popover
-//= require bootstrap/bootstrap-dropdown
+//= require bootstrap-tooltip
+//= require bootstrap-popover
+//= require bootstrap-dropdown

app/assets/javascripts/pages/contacts-index.js

@@ -3,7 +3,7 @@ Diaspora.Pages.ContactsIndex = function() {
 
   this.subscribe("page/ready", function(evt, document) {
     self.infiniteScroll = self.instantiate("InfiniteScroll");
-    $('.conversation_button').twipsy({position: 'below'});
+    $('.conversation_button').twipsy({position: 'bottom'});
   });
 
 };

app/assets/javascripts/publisher.js

@@ -163,7 +163,7 @@ var Publisher = {
   },
 
   triggerGettingStarted: function(){
-    Publisher.setUpPopovers("#publisher .dropdown", {trigger: 'manual', offset: 10, id: "message_visibility_explain", placement:'below', html:true}, 1000);
+    Publisher.setUpPopovers("#publisher .dropdown", {trigger: 'manual', offset: 10, id: "message_visibility_explain", placement:'bottom', html:true}, 1000);
     Publisher.setUpPopovers("#publisher #status_message_fake_text", {trigger: 'manual', placement: 'right', offset: 30, id: "first_message_explain", html:true}, 600);
     Publisher.setUpPopovers("#gs-shim", {trigger: 'manual', placement: 'left', id:"stream_explain", offset: -5, html:true}, 1400);
 

app/assets/stylesheets/bootstrap-complete.css.scss

+// Calling this file bootstrap would cause an infinite recursion during asset compilation.
+@import 'bootstrap';
+@import 'bootstrap-responsive';
\ No newline at end of file

app/assets/stylesheets/bootstrap.css

-/*
-*= require vendor/bootstrap
-*= require vendor/bootstrap-responsive
-*/
\ No newline at end of file

app/assets/stylesheets/mobile.css.scss

-@import 'vendor/bootstrap.css';
-@import 'vendor/bootstrap-responsive.css';
+@import 'bootstrap';
+@import 'bootstrap-responsive';
 @import "_mixins.css.scss";
 
 $blue: #3f8fba;

app/assets/stylesheets/new_styles/_base.scss

 @import "_new_mixins";
 
-/* bootstrap extentions and overrides for asset pipeline */
-.icon-white { background-image: image_url("img/glyphicons-halflings-white.png"); }
-.icon-black { background-image: image_url("img/glyphicons-halflings.png");       }
+/* bootstrap extentions */
 .icon-red   { background-image: image_url("img/glyphicons-halflings-red.png");   }
 .icon-green { background-image: image_url("img/glyphicons-halflings-green.png"); }
 .icon-blue  { background-image: image_url("img/glyphicons-halflings-blue.png");  }

app/assets/stylesheets/vendor/bootstrap-responsive.css

-/*!
- * Bootstrap Responsive v2.0.0
- *
- * Copyright 2012 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world @twitter by @mdo and @fat.
- */
-.hidden {
-  display: none;
-  visibility: hidden;
-}
-@media (max-width: 480px) {
-  .nav-collapse {
-    -webkit-transform: translate3d(0, 0, 0);
-  }
-  .page-header h1 small {
-    display: block;
-    line-height: 18px;
-  }
-  input[class*="span"],
-  select[class*="span"],
-  textarea[class*="span"],
-  .uneditable-input {
-    display: block;
-    width: 100%;
-    height: 28px;
-    /* Make inputs at least the height of their button counterpart */
-  
-    /* Makes inputs behave like true block-level elements */
-  
-    -webkit-box-sizing: border-box;
-    /* Older Webkit */
-  
-    -moz-box-sizing: border-box;
-    /* Older FF */
-  
-    -ms-box-sizing: border-box;
-    /* IE8 */
-  
-    box-sizing: border-box;
-    /* CSS3 spec*/
-  
-  }
-  .input-prepend input[class*="span"], .input-append input[class*="span"] {
-    width: auto;
-  }
-  input[type="checkbox"], input[type="radio"] {
-    border: 1px solid #ccc;
-  }
-  .form-horizontal .control-group > label {
-    float: none;
-    width: auto;
-    padding-top: 0;
-    text-align: left;
-  }
-  .form-horizontal .controls {
-    margin-left: 0;
-  }
-  .form-horizontal .control-list {
-    padding-top: 0;
-  }
-  .form-horizontal .form-actions {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-  .modal {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    right: 10px;
-    width: auto;
-    margin: 0;
-  }
-  .modal.fade.in {
-    top: auto;
-  }
-  .modal-header .close {
-    padding: 10px;
-    margin: -10px;
-  }
-  .carousel-caption {
-    position: static;
-  }
-}
-@media (max-width: 768px) {
-  .container {
-    width: auto;
-    padding: 0 20px;
-  }
-  .row-fluid {
-    width: 100%;
-  }
-  .row {
-    margin-left: 0;
-  }
-  .row > [class*="span"], .row-fluid > [class*="span"] {
-    float: none;
-    display: block;
-    width: auto;
-    margin: 0;
-  }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-  .row {
-    margin-left: -20px;
-    *zoom: 1;
-  }
-  .row:before, .row:after {
-    display: table;
-    content: "";
-  }
-  .row:after {
-    clear: both;
-  }
-  [class*="span"] {
-    float: left;
-    margin-left: 20px;
-  }
-  .span1 {
-    width: 42px;
-  }
-  .span2 {
-    width: 104px;
-  }
-  .span3 {
-    width: 166px;
-  }
-  .span4 {
-    width: 228px;
-  }
-  .span5 {
-    width: 290px;
-  }
-  .span6 {
-    width: 352px;
-  }
-  .span7 {
-    width: 414px;
-  }
-  .span8 {
-    width: 476px;
-  }
-  .span9 {
-    width: 538px;
-  }
-  .span10 {
-    width: 600px;
-  }
-  .span11 {
-    width: 662px;
-  }
-  .span12, .container {
-    width: 724px;
-  }
-  .offset1 {
-    margin-left: 82px;
-  }
-  .offset2 {
-    margin-left: 144px;
-  }
-  .offset3 {
-    margin-left: 206px;
-  }
-  .offset4 {
-    margin-left: 268px;
-  }
-  .offset5 {
-    margin-left: 330px;
-  }
-  .offset6 {
-    margin-left: 392px;
-  }
-  .offset7 {
-    margin-left: 454px;
-  }
-  .offset8 {
-    margin-left: 516px;
-  }
-  .offset9 {
-    margin-left: 578px;
-  }
-  .offset10 {
-    margin-left: 640px;
-  }
-  .offset11 {
-    margin-left: 702px;
-  }
-  .row-fluid {
-    width: 100%;
-    *zoom: 1;
-  }
-  .row-fluid:before, .row-fluid:after {
-    display: table;
-    content: "";
-  }
-  .row-fluid:after {
-    clear: both;
-  }
-  .row-fluid > [class*="span"] {
-    float: left;
-    margin-left: 2.762430939%;
-  }
-  .row-fluid > [class*="span"]:first-child {
-    margin-left: 0;
-  }
-  .row-fluid .span1 {
-    width: 5.801104972%;
-  }
-  .row-fluid .span2 {
-    width: 14.364640883%;
-  }
-  .row-fluid .span3 {
-    width: 22.928176794%;
-  }
-  .row-fluid .span4 {
-    width: 31.491712705%;
-  }
-  .row-fluid .span5 {
-    width: 40.055248616%;
-  }
-  .row-fluid .span6 {
-    width: 48.618784527%;
-  }
-  .row-fluid .span7 {
-    width: 57.182320438000005%;
-  }
-  .row-fluid .span8 {
-    width: 65.74585634900001%;
-  }
-  .row-fluid .span9 {
-    width: 74.30939226%;
-  }
-  .row-fluid .span10 {
-    width: 82.87292817100001%;
-  }
-  .row-fluid .span11 {
-    width: 91.436464082%;
-  }
-  .row-fluid .span12 {
-    width: 99.999999993%;
-  }
-  input.span1, textarea.span1, .uneditable-input.span1 {
-    width: 32px;
-  }
-  input.span2, textarea.span2, .uneditable-input.span2 {
-    width: 94px;
-  }
-  input.span3, textarea.span3, .uneditable-input.span3 {
-    width: 156px;
-  }
-  input.span4, textarea.span4, .uneditable-input.span4 {
-    width: 218px;
-  }
-  input.span5, textarea.span5, .uneditable-input.span5 {
-    width: 280px;
-  }
-  input.span6, textarea.span6, .uneditable-input.span6 {
-    width: 342px;
-  }
-  input.span7, textarea.span7, .uneditable-input.span7 {
-    width: 404px;
-  }
-  input.span8, textarea.span8, .uneditable-input.span8 {
-    width: 466px;
-  }
-  input.span9, textarea.span9, .uneditable-input.span9 {
-    width: 528px;
-  }
-  input.span10, textarea.span10, .uneditable-input.span10 {
-    width: 590px;
-  }
-  input.span11, textarea.span11, .uneditable-input.span11 {
-    width: 652px;
-  }
-  input.span12, textarea.span12, .uneditable-input.span12 {
-    width: 714px;
-  }
-}
-@media (max-width: 980px) {
-  body {
-    padding-top: 0;
-  }
-  .navbar-fixed-top {
-    position: static;
-    margin-bottom: 18px;
-  }
-  .navbar-fixed-top .navbar-inner {
-    padding: 5px;
-  }
-  .navbar .container {
-    width: auto;
-    padding: 0;
-  }
-  .navbar .brand {
-    padding-left: 10px;
-    padding-right: 10px;
-    margin: 0 0 0 -5px;
-  }
-  .navbar .nav-collapse {
-    clear: left;
-  }
-  .navbar .nav {
-    float: none;
-    margin: 0 0 9px;
-  }
-  .navbar .nav > li {
-    float: none;
-  }
-  .navbar .nav > li > a {
-    margin-bottom: 2px;
-  }
-  .navbar .nav > .divider-vertical {
-    display: none;
-  }
-  .navbar .nav > li > a, .navbar .dropdown-menu a {
-    padding: 6px 15px;
-    font-weight: bold;
-    color: #999999;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-  }
-  .navbar .dropdown-menu li + li a {
-    margin-bottom: 2px;
-  }
-  .navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover {
-    background-color: #222222;
-  }
-  .navbar .dropdown-menu {
-    position: static;
-    top: auto;
-    left: auto;
-    float: none;
-    display: block;
-    max-width: none;
-    margin: 0 15px;
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    border-radius: 0;
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-  }
-  .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
-    display: none;
-  }
-  .navbar .dropdown-menu .divider {
-    display: none;
-  }
-  .navbar-form, .navbar-search {
-    float: none;
-    padding: 9px 15px;
-    margin: 9px 0;
-    border-top: 1px solid #222222;
-    border-bottom: 1px solid #222222;
-    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-  }
-  .navbar .nav.pull-right {
-    float: none;
-    margin-left: 0;
-  }
-  .navbar-static .navbar-inner {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-  .btn-navbar {
-    display: block;
-  }
-  .nav-collapse {
-    overflow: hidden;
-    height: 0;
-  }
-}
-@media (min-width: 980px) {
-  .nav-collapse.collapse {
-    height: auto !important;
-  }
-}
-@media (min-width: 1200px) {
-  .row {
-    margin-left: -30px;
-    *zoom: 1;
-  }
-  .row:before, .row:after {
-    display: table;
-    content: "";
-  }
-  .row:after {
-    clear: both;
-  }
-  [class*="span"] {
-    float: left;
-    margin-left: 30px;
-  }
-  .span1 {
-    width: 70px;
-  }
-  .span2 {
-    width: 170px;
-  }
-  .span3 {
-    width: 270px;
-  }
-  .span4 {
-    width: 370px;
-  }
-  .span5 {
-    width: 470px;
-  }
-  .span6 {
-    width: 570px;
-  }
-  .span7 {
-    width: 670px;
-  }
-  .span8 {
-    width: 770px;
-  }
-  .span9 {
-    width: 870px;
-  }
-  .span10 {
-    width: 970px;
-  }
-  .span11 {
-    width: 1070px;
-  }
-  .span12, .container {
-    width: 1170px;
-  }
-  .offset1 {
-    margin-left: 130px;
-  }
-  .offset2 {
-    margin-left: 230px;
-  }
-  .offset3 {
-    margin-left: 330px;
-  }
-  .offset4 {
-    margin-left: 430px;
-  }
-  .offset5 {
-    margin-left: 530px;
-  }
-  .offset6 {
-    margin-left: 630px;
-  }
-  .offset7 {
-    margin-left: 730px;
-  }
-  .offset8 {
-    margin-left: 830px;
-  }
-  .offset9 {
-    margin-left: 930px;
-  }
-  .offset10 {
-    margin-left: 1030px;
-  }
-  .offset11 {
-    margin-left: 1130px;
-  }
-  .row-fluid {
-    width: 100%;
-    *zoom: 1;
-  }
-  .row-fluid:before, .row-fluid:after {
-    display: table;
-    content: "";
-  }
-  .row-fluid:after {
-    clear: both;
-  }
-  .row-fluid > [class*="span"] {
-    float: left;
-    margin-left: 2.564102564%;
-  }
-  .row-fluid > [class*="span"]:first-child {
-    margin-left: 0;
-  }
-  .row-fluid .span1 {
-    width: 5.982905983%;
-  }
-  .row-fluid .span2 {
-    width: 14.529914530000001%;
-  }
-  .row-fluid .span3 {
-    width: 23.076923077%;
-  }
-  .row-fluid .span4 {
-    width: 31.623931624%;
-  }
-  .row-fluid .span5 {
-    width: 40.170940171000005%;
-  }
-  .row-fluid .span6 {
-    width: 48.717948718%;
-  }
-  .row-fluid .span7 {
-    width: 57.264957265%;
-  }
-  .row-fluid .span8 {
-    width: 65.81196581200001%;
-  }
-  .row-fluid .span9 {
-    width: 74.358974359%;
-  }
-  .row-fluid .span10 {
-    width: 82.905982906%;
-  }
-  .row-fluid .span11 {
-    width: 91.45299145300001%;
-  }
-  .row-fluid .span12 {
-    width: 100%;
-  }
-  input.span1, textarea.span1, .uneditable-input.span1 {
-    width: 60px;
-  }
-  input.span2, textarea.span2, .uneditable-input.span2 {
-    width: 160px;
-  }
-  input.span3, textarea.span3, .uneditable-input.span3 {
-    width: 260px;
-  }
-  input.span4, textarea.span4, .uneditable-input.span4 {
-    width: 360px;
-  }
-  input.span5, textarea.span5, .uneditable-input.span5 {
-    width: 460px;
-  }
-  input.span6, textarea.span6, .uneditable-input.span6 {
-    width: 560px;
-  }
-  input.span7, textarea.span7, .uneditable-input.span7 {
-    width: 660px;
-  }
-  input.span8, textarea.span8, .uneditable-input.span8 {
-    width: 760px;
-  }
-  input.span9, textarea.span9, .uneditable-input.span9 {
-    width: 860px;
-  }
-  input.span10, textarea.span10, .uneditable-input.span10 {
-    width: 960px;
-  }
-  input.span11, textarea.span11, .uneditable-input.span11 {
-    width: 1060px;
-  }
-  input.span12, textarea.span12, .uneditable-input.span12 {
-    width: 1160px;
-  }
-  .thumbnails {
-    margin-left: -30px;
-  }
-  .thumbnails > li {
-    margin-left: 30px;
-  }
-}

app/assets/stylesheets/vendor/interim-bootstrap.css

-.twipsy {
-  display: block;
-  position: absolute;
-  visibility: visible;
-  padding: 5px;
-  font-size: 11px;
-  z-index: 1000;
-  filter: alpha(opacity=80);
-  -khtml-opacity: 0.8;
-  -moz-opacity: 0.8;
-  opacity: 0.8;
-}
-.twipsy.fade.in {
-  filter: alpha(opacity=80);
-  -khtml-opacity: 0.8;
-  -moz-opacity: 0.8;
-  opacity: 0.8;
-}
-.twipsy.above .twipsy-arrow {
-  bottom: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid #000000;
-}
-.twipsy.left .twipsy-arrow {
-  top: 50%;
-  right: 0;
-  margin-top: -5px;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 5px solid #000000;
-}
-.twipsy.below .twipsy-arrow {
-  top: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 5px solid #000000;
-}
-.twipsy.right .twipsy-arrow {
-  top: 50%;
-  left: 0;
-  margin-top: -5px;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-right: 5px solid #000000;
-}
-.twipsy-inner {
-  padding: 3px 8px;
-  background-color: #000000;
-  color: white;
-  text-align: center;
-  max-width: 200px;
-  text-decoration: none;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-.twipsy-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-.popover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-  padding: 5px;
-  display: none;
-}
-.popover.above .arrow {
-  bottom: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid #000000;
-}
-.popover.right .arrow {
-  top: 50%;
-  left: 0;
-  margin-top: -5px;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-right: 5px solid #000000;
-}
-.popover.below .arrow {
-  top: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 5px solid #000000;
-}
-.popover.left .arrow {
-  top: 50%;
-  right: 0;
-  margin-top: -5px;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 5px solid #000000;
-}
-.popover .arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-.popover .inner {
-  background-color: #000000;
-  background-color: rgba(0, 0, 0, 0.8);
-  padding: 3px;
-  overflow: hidden;
-  width: 280px;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-}
-.popover .title {
-  background-color: #f5f5f5;
-  padding: 9px 15px;
-  line-height: 1;
-  -webkit-border-radius: 3px 3px 0 0;
-  -moz-border-radius: 3px 3px 0 0;
-  border-radius: 3px 3px 0 0;
-  border-bottom: 1px solid #eee;
-}
-.popover .content {
-  background-color: #ffffff;
-  padding: 14px;
-  -webkit-border-radius: 0 0 3px 3px;
-  -moz-border-radius: 0 0 3px 3px;
-  border-radius: 0 0 3px 3px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding-box;
-  background-clip: padding-box;
-}
-.popover .content p, .popover .content ul, .popover .content ol {
-  margin-bottom: 0;
-}
-.fade {
-  -webkit-transition: opacity 0.15s linear;
-  -moz-transition: opacity 0.15s linear;
-  -ms-transition: opacity 0.15s linear;
-  -o-transition: opacity 0.15s linear;
-  transition: opacity 0.15s linear;
-  opacity: 0;
-}
-.fade.in {
-  opacity: 1;
-}
-
-/* hacks */
-.popover h3 {
-  margin-bottom: 0;
-  font-weight: bold;
-}

app/assets/stylesheets/vendor/interim-bootstrap.css.scss

+// Load the necessary styles from the bootstrap-sass partials to keep this file
+// up to date with the version of Bootstrap we're using.
+@import "bootstrap/mixins";
+@import "bootstrap/variables";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/component-animations";
+
+/* hacks */
+.popover h3 {
+  margin-bottom: 0;
+  font-weight: bold;
+}

app/assets/templates/header.jst.hbs

@@ -19,7 +19,7 @@
   </span>
 
   <div id="nav_badges">
-    <div class="badge" id="notification_badge">
+    <div class="badge badge-inverse" id="notification_badge">
       <a href="/notifications" title="{{t "header.notifications"}}">
         <img alt="{{t "header.notifications"}}" id="notification-flag" src="{{imageUrl "icons/notifications_grey.png"}}" />
         <div class="badge_count {{#unless current_user.notifications_count}} hidden {{/unless}}">
@@ -28,7 +28,7 @@
       </a>
     </div>
 
-    <div class="badge" id="message_inbox_badge">
+    <div class="badge badge-inverse" id="message_inbox_badge">
       <a href="/conversations" title="{{t "header.messages"}}">
         <img alt="{{t "header.messages"}}" src="{{imageUrl "icons/mail_grey.png"}}" />
         <div class="badge_count {{#unless current_user.unread_messages_count}} hidden {{/unless}}">

app/helpers/layout_helper.rb

@@ -62,7 +62,7 @@ module LayoutHelper
 
   def include_base_css_framework(use_bootstrap=false)
     if use_bootstrap || @aspect == :getting_started || @page == :logged_out
-      stylesheet_link_tag 'bootstrap'
+      stylesheet_link_tag 'bootstrap-complete'
     else
       stylesheet_link_tag 'blueprint', :media => 'screen'
     end

app/views/layouts/application.mobile.haml

@@ -56,7 +56,7 @@
                 = link_to(t('streams.activity.title'), activity_stream_path)
             
             #nav_badges
-              .badge{:id => "notification_badge"}            
+              .badge{:class => "badge-inverse", :id => "notification_badge"}            
                 = link_to(image_tag('icons/notifications_grey.png', :height => 16, :width => 16, :id => 'notification-flag'), notifications_path)
                 - if current_user.unread_notifications.count > 0
                   .badge_count

config/application.rb

@@ -84,9 +84,9 @@ module Diaspora
       "profile.js", "publisher.js", "templates.js", "validation.js" ]
 
     # Stylesheets
-    config.assets.precompile += [ "blueprint.css", "bootstrap.css", "default.css",
-      "login.css", "mobile.css", "new-templates.css", "rtl.css", "vendor/bootstrap.css",
-      "vendor/bootstrap-responsive.css" ]
+    config.assets.precompile += [ "blueprint.css", "bootstrap.css", "bootstrap-complete.css",
+      "bootstrap-responsive.css", "default.css", "login.css", "mobile.css", "new-templates.css",
+      "rtl.css" ]
 
     # Version of your assets, change this if you want to expire all your assets
     config.assets.version = '1.0'