From 42e2da8653b821bb59c126cb3ae475741ed6b464 Mon Sep 17 00:00:00 2001
From: Dan Rice <dan@zoombody.com>
Date: Sat, 29 Mar 2014 16:52:16 -0400
Subject: [PATCH] First-pass conversion of layouts and icons to BS3/FA

Rough around the edges.
---
 app/assets/stylesheets/tracks.css.scss        |  39 +----
 app/helpers/todos_helper.rb                   |   6 +-
 app/views/layouts/application.html.erb        |  12 +-
 app/views/layouts/login.html.erb              |  18 +--
 app/views/login/login.html.erb                |  38 ++---
 .../_project_settings_container.html.erb      |   6 +-
 app/views/shared/_add_new_action.html.erb     |  46 +++---
 app/views/shared/_flash.html.erb              |  13 +-
 app/views/shared/_goto.html.erb               |  62 ++++----
 app/views/shared/_navbar.html.erb             | 148 ++++++++----------
 app/views/todos/_new_todo_form.html.erb       | 111 +++++++------
 app/views/todos/_todo.html.erb                |  10 +-
 app/views/todos/_todo_sub_menu.html.erb       |  10 +-
 13 files changed, 238 insertions(+), 281 deletions(-)

diff --git a/app/assets/stylesheets/tracks.css.scss b/app/assets/stylesheets/tracks.css.scss
index c37bcfe4..d7992541 100644
--- a/app/assets/stylesheets/tracks.css.scss
+++ b/app/assets/stylesheets/tracks.css.scss
@@ -6,29 +6,16 @@ body {
 	background-color: #DDD;
 }
 
-div.tracks-middle {
+div.tracks-main {
 	background-color: #FFF;
-	padding: 15px;
 	border-radius: 10px;
 }
 
 /* Header */
 
-.navbar-inner {
-	border-radius: none;
-	div.btn-toolbar {
-		margin: 0px 15px 0px 0px;
-	}
-	input {
-		width: 100px;
-	}
-}
-
-div#tracks-login-navbar {
-	.navbar-inner {
-		background-color: #000;
-		background-image: none;
-	}
+div#tracks-login-header {
+	background-color: #000;
+	padding: 0;
 }
 
 div#tracks-login-form {
@@ -66,10 +53,10 @@ div.todo-item {
 	div.row {
 		margin-left: 0px;
 	}
-	i.icon-check-empty {
+	i.fa-square-o {
 		margin-right: 10px;
 	}
-	i.icon-check-sign {
+	i.fa-check-square-o {
 		margin-right: 10px;
 		color: #666;	
 	}
@@ -80,10 +67,10 @@ div.todo-item {
 	span.todo-item-icons {
 		color: #BBB;	  /* light gray */
 		cursor: pointer;
-		i.icon-check-empty {
+		i.fa-square-o {
 			color: #333;
 		}
-		i.icon-star {
+		i.fa-star {
 			color: #F89406; /* orange */
 		}
 	}
@@ -186,16 +173,6 @@ div#project-next-prev {
 
 /* Dialogs */
 
-.modal-body {
-	overflow-y: visible;
-}
-
-div#tracks-go-item-dialog {
-	input.input-medium {
-		width : 95%;
-	}
-}
-
 div.paginate_header {
 	text-align: center;
 }
diff --git a/app/helpers/todos_helper.rb b/app/helpers/todos_helper.rb
index ee943188..9f7ea0da 100644
--- a/app/helpers/todos_helper.rb
+++ b/app/helpers/todos_helper.rb
@@ -124,9 +124,9 @@ module TodosHelper
   end
 
   def todo_form_control_group (label_for, label)
-    content_tag(:div, class: "control-group") do
-      content_tag(:label, class: "control-label", for: label_for){label} +
-      content_tag(:div, class:"controls") { yield }
+    content_tag(:div, class: "form-group") do
+      content_tag(:label, class: "col-sm-3 control-label", for: label_for){label} +
+      content_tag(:div, class:"col-sm-9") { yield }
     end
   end
 
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 2d50f9e0..07bb4647 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -33,13 +33,9 @@
       <%= render partial: "shared/navbar" %>
     <% end -%>
 
-    <div class="container-fluid">
-      <div class="row-fluid">
-        <div class="span8 offset2 tracks-middle">
-          <%= bootstrap_flash %>
-          <%= yield %>
-        </div>
-      </div>
+    <div class="container tracks-main">
+      <%= render_flash %>
+      <%= yield %>
     </div> 
 
     <% cache [:footer] do -%>
@@ -59,4 +55,4 @@
     <%= javascript_include_tag "application" %>
 
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/app/views/layouts/login.html.erb b/app/views/layouts/login.html.erb
index db0b0b84..40f75091 100644
--- a/app/views/layouts/login.html.erb
+++ b/app/views/layouts/login.html.erb
@@ -36,21 +36,15 @@
   </head>
   <body>
 
-    <div id="tracks-login-navbar" class="navbar navbar-fluid-top navbar-inverse">
-      <div class="navbar-inner">
-        <div class="container-fluid">
-          <a class="brand" href="#"><%= image_tag "tracks-logo-dark.png"%></a>
-        </div>
+    <div class="jumbotron" id="tracks-login-header">
+      <div class="container">
+        <h1><%= image_tag "tracks-logo-dark.png"%></h1>
       </div>
     </div>
 
-    <div class="container-fluid">
-      <div class="row-fluid">
-        <div class="span6 offset3">
-          <%= bootstrap_flash %>
-          <%= yield %>
-        </div>
-      </div>
+    <div class="container">
+      <%= render_flash %>
+      <%= yield %>
     </div>
 
     <%= render partial: "shared/footer" %>
diff --git a/app/views/login/login.html.erb b/app/views/login/login.html.erb
index 73802d33..b79dd168 100644
--- a/app/views/login/login.html.erb
+++ b/app/views/login/login.html.erb
@@ -1,29 +1,31 @@
 <div id="tracks-login-form">
-  <%= form_tag(login_path, class: "form-horizontal") do %>
-    <div class="control-group">
-      <div class="controls">
-        <h3><%= t('login.please_login') %></h3>
+  <h2><%= t('login.please_login') %></h2>
+  <%= form_tag(login_path, class: "form-horizontal", role: "form") do %>
+    <div class="form-group">
+      <label class="col-sm-2 control-label" for="user_login"><%= User.human_attribute_name('login') %></label>
+      <div class="col-sm-10">
+        <input class="form-control" type="text" id="user_login" name="user_login" placeholder="<%= User.human_attribute_name('login') %>">
       </div>
     </div>
-    <div class="control-group">
-      <label class="control-label" for="user_login"><%= User.human_attribute_name('login') %></label>
-      <div class="controls">
-        <input type="text" id="user_login" name="user_login" placeholder="<%= User.human_attribute_name('login') %>">
+    <div class="form-group">
+      <label class="col-sm-2 control-label" for="user_password"><%= User.human_attribute_name('password') %></label>
+      <div class="col-sm-10">
+        <input class="form-control" type="password" id="user_password" name="user_password" placeholder="<%= User.human_attribute_name('password') %>">
       </div>
     </div>
-    <div class="control-group">
-      <label class="control-label" for="user_password"><%= User.human_attribute_name('password') %></label>
-      <div class="controls">
-        <input type="password" id="user_password" name="user_password" placeholder="<%= User.human_attribute_name('password') %>">
+    <div class="form-group">
+      <div class="col-sm-offset-2 col-sm-10">
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" name="user_noexpiry" id="user_noexpiry" checked > <%= t('login.user_no_expiry') %>
+          </label>
+        </div>
       </div>
     </div>
-    <div class="control-group">
-      <div class="controls">
-        <label class="checkbox">
-          <input type="checkbox" name="user_noexpiry" id="user_noexpiry" checked > <%= t('login.user_no_expiry') %>
-        </label>
+    <div class="form-group">
+      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-primary"><%= t('login.sign_in') %></button>
       </div>
     </div>
   <% end %>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/projects/_project_settings_container.html.erb b/app/views/projects/_project_settings_container.html.erb
index d7770ab0..5d7c9356 100644
--- a/app/views/projects/_project_settings_container.html.erb
+++ b/app/views/projects/_project_settings_container.html.erb
@@ -4,10 +4,10 @@
     data-placement="bottom" rel="tracks-popover" href="#" 
     data-original-title="<%= project.name %>" data-html="true"
     data-content="<div class='project-details'><%= project_details(project) %></div>">
-      <i class="icon-info-sign"></i> Details 
+      <i class="fa fa-info-circle"></i> Details
   </a>
   <a class="badge hide tracks-badge-description" title="Show project description" href="#">
-    <i class="icon-book"></i> Description
+    <i class="fa fa-book"></i> Description
   </a>
 </div>
 <% unless project.description.blank? %>
@@ -15,4 +15,4 @@
     <button type="button" class="close">&times;</button>
     <small><%= Tracks::Utils.render_text(project.description) %></small>
   </div>
-<% end %>
\ No newline at end of file
+<% end %>
diff --git a/app/views/shared/_add_new_action.html.erb b/app/views/shared/_add_new_action.html.erb
index ff17ab26..60540e87 100644
--- a/app/views/shared/_add_new_action.html.erb
+++ b/app/views/shared/_add_new_action.html.erb
@@ -1,22 +1,26 @@
-<div id="tracks-add-action-dialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-    <h3 id="myModalLabel">Add new action</h3>
+<div id="tracks-add-action-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="tracks-add-action-dialog-title" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h3 class="modal-title" id="tracks-add-action-dialog-title">Add new action</h3>
+      </div>
+      <div class="modal-body">
+        <ul class="nav nav-tabs">
+          <li class="active"><a href="#one-action" data-toggle="tab">Action</a></li>
+          <li><a href="#multi-action" data-toggle="tab">Multiple actions</a></li>
+          <li><a href="#repeat-action" data-toggle="tab">Repeating actions</a></li>
+        </ul>
+      </div>
+      <div class="tab-content">
+        <div class="tab-pane active" id="one-action"><%= render partial: "todos/new_todo_form", :object => Todo.new %></div>
+        <div class="tab-pane" id="multi-action"><%= render partial: "todos/new_multi_todo_form", :object => Todo.new %></div>
+        <div class="tab-pane" id="repeat-action"><p>WIP:repeating actions</p></div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn" data-dismiss="modal">Close</button>
+        <button class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
   </div>
-  <div class="modal-body">
-    <ul class="nav nav-tabs">
-      <li class="active"><a href="#one-action" data-toggle="tab">Action</a></li>
-      <li><a href="#multi-action" data-toggle="tab">Multiple actions</a></li>
-      <li><a href="#repeat-action" data-toggle="tab">Repeating actions</a></li>
-    </ul>
-  </div>
-  <div class="tab-content">
-    <div class="tab-pane active" id="one-action"><%= render partial: "todos/new_todo_form", :object => Todo.new %></div>
-    <div class="tab-pane" id="multi-action"><%= render partial: "todos/new_multi_todo_form", :object => Todo.new %></div>
-    <div class="tab-pane" id="repeat-action"><p>WIP:repeating actions</p></div>
-  </div>
-  <div class="modal-footer">
-    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
-    <button class="btn btn-primary">Save changes</button>
-  </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/shared/_flash.html.erb b/app/views/shared/_flash.html.erb
index 86f9fc2c..6eb8e4fb 100644
--- a/app/views/shared/_flash.html.erb
+++ b/app/views/shared/_flash.html.erb
@@ -1,9 +1,6 @@
-<div id="message_holder">
-<% if flash.empty? -%>
-  <h4 id="flash" class="alert" style="display:none"></h4>
-<% else -%>
-  <% flash.each do |key,value| -%>
-    <h4 id="flash" class='alert <%= key %>'><%= value %></h4>
-  <% end -%>
+<% flash.each do |key,value| -%>
+  <div class='alert <%= key.to_s == 'notice' ? 'alert-success' : 'alert-danger' %> alert-dismissable'>
+    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+    <%= value %>
+  </div>
 <% end -%>
-</div>
\ No newline at end of file
diff --git a/app/views/shared/_goto.html.erb b/app/views/shared/_goto.html.erb
index f01e2a7a..989590c2 100644
--- a/app/views/shared/_goto.html.erb
+++ b/app/views/shared/_goto.html.erb
@@ -1,29 +1,33 @@
-<div id="tracks-goto-dialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-	<div class="modal-header">
-		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-		<h3 id="myModalLabel">Go to...</h3>
-	</div>
-	<div class="modal-body">
-		<div>
-			<h4>Go to project...</h4>
-			<ul>
-			  <% current_user.projects.active.each do |project| -%>
-				  <%= content_tag(:li){ link_to project.name, project_path(project)} %>
-			  <% end -%>
-			  <li><%= link_to "All projects", projects_path %></li>
-			</ul>
-		</div>
-		<div>
-			<h4>Go to context...</h4>
-			<ul>
-			  <% current_user.contexts.active.each do |context| -%>
-				  <%= content_tag(:li){ link_to context.name, context_path(context)} %>
-			  <% end -%>
-			  <li><%= link_to "All contexts", contexts_path %></li>
-			</ul>
-		</div>
-	</div>
-	<div class="modal-footer">
-		<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
-	</div>
-</div>
\ No newline at end of file
+<div id="tracks-goto-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="tracks-goto-dialog-title" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h3 class="modal-title" id="tracks-goto-dialog-title">Go to...</h3>
+      </div>
+      <div class="modal-body">
+        <div>
+          <h4>Go to project...</h4>
+          <ul>
+            <% current_user.projects.active.each do |project| -%>
+              <%= content_tag(:li){ link_to project.name, project_path(project)} %>
+            <% end -%>
+            <li><%= link_to "All projects", projects_path %></li>
+          </ul>
+        </div>
+        <div>
+          <h4>Go to context...</h4>
+          <ul>
+            <% current_user.contexts.active.each do |context| -%>
+              <%= content_tag(:li){ link_to context.name, context_path(context)} %>
+            <% end -%>
+            <li><%= link_to "All contexts", contexts_path %></li>
+          </ul>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index b4f04c6b..6b9fc1d2 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -1,81 +1,67 @@
-<div class="navbar navbar-fluid-top navbar-inverse">
-  <div class="navbar-inner">
-    <div class="container-fluid">
-
-      <div class="btn-navbar" data-target=".nav-collapse">
-        <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </a>
-        <a class="btn btn-primary btn-small button-add-todo" title="Add a new action"><i class="icon-plus icon-large"></i></a>
-        <a class="btn btn-primary btn-small button-goto" title="Go to..."><i class="icon-mail-forward icon-large"></i></a>
-      </div>
-
-      <a class="brand" href="#"><span id="badge_count" class="badge_count"><%= @badge_count || @count %></span></a>
-
-      <div class="container-fluid nav-collapse">
-        <ul class="nav">
-          <li><%= menu_item("home",     root_path)           %></li>
-          <li><%= menu_item("starred",  tag_path("starred")) %></li>
-          <li><%= menu_item("projects", projects_path)       %></li>
-          <li><%= menu_item("tickler",  tickler_path)        %></li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><%= t('layouts.navigation.organize') %><b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><%= menu_item("contexts",        contexts_path)        %></li>
-              <li><%= menu_item("notes",           notes_path)           %></li>
-              <li><%= menu_item("review",          review_path)          %></li>
-              <li><%= menu_item("recurring_todos", recurring_todos_path) %></li>
-            </ul>
-          </li>
-          <li class="dropdown" id="menu_view">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="menu_view_link"><%= t('layouts.navigation.view') %><b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><%= menu_item("calendar",        calendar_path)      %></li>
-              <li><%= menu_item("completed_tasks", done_overview_path) %></li>
-              <li><%= menu_item("feeds",           feeds_path)         %></li>
-              <li><%= menu_item("stats",           stats_path)         %></li>
-              <li class="divider"></li>
-              <li><%= menu_item("toggle_contexts", "#", {:id => "toggle-contexts-nav"}) %></li>
-              <li><%= menu_item("toggle_notes",    "#", {:id => "toggle-notes-nav"}) %></li>
-              <li><%= group_view_by_menu_entry %></li>
-            </ul>
-          </li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><%= t('layouts.navigation.admin') %><b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><%= menu_item("preferences",    preferences_path) %></li>
-              <li><%= menu_item("export",         data_path)        %></li>
-              <% if current_user.is_admin? -%>
-                <li><%= menu_item("manage_users", users_path)       %></li>
-              <% end -%>
-            </ul>
-          </li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><%= t('layouts.navigation.help') %><b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><%= menu_item("keyboard_shortcuts", "#",{:id => "menu-keyboard-shotcuts"}) %></li>
-              <li><%= menu_item("integrations",       integrations_path)                     %></li>
-              <li><%= menu_item("api_docs",           rest_api_docs_path)                    %></li>
-            </ul>
-          </li>          
-        </ul>
-        <ul class="nav pull-right">
-          <li>
-            <div class="btn-toolbar">
-              <a class="btn btn-primary btn-small button-add-todo" title="Add a new action" data-keybinding="a"><i class="icon-plus icon-large"></i></a>
-              <a class="btn btn-primary btn-small button-goto" title="Go to..." data-keybinding="G"><i class="icon-mail-forward icon-large"></i></a>
-            </div>
-          </li>
-          <li>
-            <form class="navbar-search pull-right">
-              <input type="text" class="search-query" placeholder="Search">
-            </form>
-          </li>
-          <li><%= link_to("<i class='icon-signout'></i>".html_safe, logout_path, title: "#{t('common.logout')} (#{current_user.display_name})") %></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
+<div class="navbar navbar-static-top navbar-inverse" role="navigation">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#"><span id="badge_count" class="badge_count"><%= @badge_count || @count %></span></a>
+    </div><%# //.navbar-header %>
+    <div class="navbar-collapse collapse">
+      <ul class="nav navbar-nav">
+        <li><%= menu_item("home",     root_path)           %></li>
+        <li><%= menu_item("starred",  tag_path("starred")) %></li>
+        <li><%= menu_item("projects", projects_path)       %></li>
+        <li><%= menu_item("tickler",  tickler_path)        %></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><%= t('layouts.navigation.organize') %><b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><%= menu_item("contexts",        contexts_path)        %></li>
+            <li><%= menu_item("notes",           notes_path)           %></li>
+            <li><%= menu_item("review",          review_path)          %></li>
+            <li><%= menu_item("recurring_todos", recurring_todos_path) %></li>
+          </ul>
+        </li>
+        <li class="dropdown" id="menu_view">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="menu_view_link"><%= t('layouts.navigation.view') %><b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><%= menu_item("calendar",        calendar_path)      %></li>
+            <li><%= menu_item("completed_tasks", done_overview_path) %></li>
+            <li><%= menu_item("feeds",           feeds_path)         %></li>
+            <li><%= menu_item("stats",           stats_path)         %></li>
+            <li class="divider"></li>
+            <li><%= menu_item("toggle_contexts", "#", {:id => "toggle-contexts-nav"}) %></li>
+            <li><%= menu_item("toggle_notes",    "#", {:id => "toggle-notes-nav"}) %></li>
+            <li><%= group_view_by_menu_entry %></li>
+          </ul>
+        </li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><%= t('layouts.navigation.admin') %><b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><%= menu_item("preferences",    preferences_path) %></li>
+            <li><%= menu_item("export",         data_path)        %></li>
+            <% if current_user.is_admin? -%>
+              <li><%= menu_item("manage_users", users_path)       %></li>
+            <% end -%>
+          </ul>
+        </li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><%= t('layouts.navigation.help') %><b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><%= menu_item("keyboard_shortcuts", "#",{:id => "menu-keyboard-shotcuts"}) %></li>
+            <li><%= menu_item("integrations",       integrations_path)                     %></li>
+            <li><%= menu_item("api_docs",           rest_api_docs_path)                    %></li>
+          </ul>
+        </li>
+      </ul>
+      <form class="navbar-form navbar-right" role="form">
+        <a class="btn btn-primary button-add-todo" title="Add a new action"><i class="fa fa-plus fa-lg"></i></a>
+        <a class="btn btn-primary button-goto" title="Go to..."><i class="fa fa-share fa-lg"></i></a>
+        <input type="text" class="form-control search-query" placeholder="Search">
+        <%= link_to("<i class='fa fa-sign-out'></i>".html_safe, logout_path, title: "#{t('common.logout')} (#{current_user.display_name})") %>
+      </form>
+    </div><%# //.navbar-collapse %>
+  </div><%# //.container %>
+</div><%# //.navbar %>
diff --git a/app/views/todos/_new_todo_form.html.erb b/app/views/todos/_new_todo_form.html.erb
index 102f7574..eff4ff5f 100644
--- a/app/views/todos/_new_todo_form.html.erb
+++ b/app/views/todos/_new_todo_form.html.erb
@@ -1,60 +1,57 @@
 <%- todo = new_todo_form -%>
-<%= form_for(todo, :html=> { :id=>'todo-form-new-action', :name=>'todo', :class => 'form-horizontal' }) do |t|%>
-  <fieldset>
-    <input id="default_project_name_id" name="default_project_name" type="hidden" value="<%= h(@initial_project_name)-%>"/>
-    <input id="default_context_name_id" name="default_context_name" type="hidden" value="<%= h(@initial_context_name)-%>"/>
-    <input id="new_todo_starred"        name="new_todo_starred"     type="hidden" value="false"/>
-    <%= hidden_field_tag :_tag_name, @tag_name.underscore.gsub(/\s+/,'_') if source_view_is :tag -%>
-    <%= hidden_field_tag "initial_tag_list", @initial_tags%>
-    <%= source_view_tag( @source_view ) %>
+<%= form_for(todo, :html=> { :id=>'todo-form-new-action', :name=>'todo', :class => 'form-horizontal', :role => 'form' }) do |t|%>
+  <input id="default_project_name_id" name="default_project_name" type="hidden" value="<%= h(@initial_project_name)-%>"/>
+  <input id="default_context_name_id" name="default_context_name" type="hidden" value="<%= h(@initial_context_name)-%>"/>
+  <input id="new_todo_starred"        name="new_todo_starred"     type="hidden" value="false"/>
+  <%= hidden_field_tag :_tag_name, @tag_name.underscore.gsub(/\s+/,'_') if source_view_is :tag -%>
+  <%= hidden_field_tag "initial_tag_list", @initial_tags%>
+  <%= source_view_tag( @source_view ) %>
 
-    <div id="error_status">
-      <%= get_list_of_error_messages_for(todo) %>
+  <div id="error_status">
+    <%= get_list_of_error_messages_for(todo) %>
+  </div>
+
+  <%= todo_form_control_group("todo_starred", "Starred") do -%>
+    <i class="fa fa-star-o"></i>
+  <% end -%>
+
+  <%= todo_form_control_group("todo_description", Todo.human_attribute_name('description')) do -%>
+    <%= t.text_field("description",
+          "size" => 30, "maxlength" => 100, "autocomplete" => "off",
+          placeholder: "Description of action", :autofocus => 1)
+      %>
+  <% end -%>
+
+  <%= todo_form_control_group("todo_notes", Todo.human_attribute_name('notes')) do -%>
+    <%= t.text_area("notes", "cols" => 29, "rows" => 6) %>
+  <% end -%>
+
+  <%= todo_form_control_group("todo_project_name", Todo.human_attribute_name('project')) do -%>
+    <input id="todo_project_name" name="project_name" autocomplete="off" size="30" type="text" value="<%= h(@initial_project_name) %>"/>
+  <% end -%>
+
+  <%= todo_form_control_group("todo_context_name", Todo.human_attribute_name('context')) do -%>
+    <input id="todo_context_name" name="context_name" autocomplete="off" size="30" type="text" value="<%= h(@initial_context_name) %>"/>
+  <% end -%>
+
+  <%= todo_form_control_group("tag_list", Todo.human_attribute_name('tags')) do -%>
+    <%= text_field_tag "tag_list", @initial_tags, :size => 30, placeholder: t('shared.separate_tags_with_commas') %>
+  <% end -%>
+
+  <%= todo_form_control_group("todo_due", Todo.human_attribute_name('due')) do -%>
+    <%= t.text_field("due", "size" => 12, "class" => "Date", "autocomplete" => "off") %>
+  <% end -%>
+
+  <%= todo_form_control_group("todo_show_from", Todo.human_attribute_name('show_from')) do -%>
+    <%= t.text_field("show_from", "size" => 12, "class" => "Date", "autocomplete" => "off") %>
+  <% end -%>
+
+  <%= todo_form_control_group("predecessor_ul", Todo.human_attribute_name('predecessors')) do -%>
+    <div class="selected_predecessors">
+      <ul class="predecessor_list" id="predecessor_ul" style="display:none">
+      </ul>
     </div>
-
-    <%= todo_form_control_group("todo_starred", "Starred") do -%>
-      <i class="icon-star-empty"></i>
-    <% end -%>
-
-    <%= todo_form_control_group("todo_description", Todo.human_attribute_name('description')) do -%>
-      <%= t.text_field("description", 
-            "size" => 30, "maxlength" => 100, "autocomplete" => "off", 
-            placeholder: "Description of action", :autofocus => 1) 
-        %>
-    <% end -%>
-
-    <%= todo_form_control_group("todo_notes", Todo.human_attribute_name('notes')) do -%>
-      <%= t.text_area("notes", "cols" => 29, "rows" => 6) %>
-    <% end -%>
-
-    <%= todo_form_control_group("todo_project_name", Todo.human_attribute_name('project')) do -%>
-      <input id="todo_project_name" name="project_name" autocomplete="off" size="30" type="text" value="<%= h(@initial_project_name) %>"/>
-    <% end -%>
-
-    <%= todo_form_control_group("todo_context_name", Todo.human_attribute_name('context')) do -%>
-      <input id="todo_context_name" name="context_name" autocomplete="off" size="30" type="text" value="<%= h(@initial_context_name) %>"/>
-    <% end -%>
-
-    <%= todo_form_control_group("tag_list", Todo.human_attribute_name('tags')) do -%>
-      <%= text_field_tag "tag_list", @initial_tags, :size => 30, placeholder: t('shared.separate_tags_with_commas') %>
-    <% end -%>
-
-    <%= todo_form_control_group("todo_due", Todo.human_attribute_name('due')) do -%>
-      <%= t.text_field("due", "size" => 12, "class" => "Date", "autocomplete" => "off") %>
-    <% end -%>
-
-    <%= todo_form_control_group("todo_show_from", Todo.human_attribute_name('show_from')) do -%>
-      <%= t.text_field("show_from", "size" => 12, "class" => "Date", "autocomplete" => "off") %>
-    <% end -%>
-
-    <%= todo_form_control_group("predecessor_ul", Todo.human_attribute_name('predecessors')) do -%>
-      <div class="selected_predecessors">
-        <ul class="predecessor_list" id="predecessor_ul" style="display:none">
-        </ul>
-      </div>
-      <label id="label_for_predecessor_input" for="predecessor_input" style="display:none"><%= t('todos.add_another_dependency')%></label>
-      <%= text_field_tag "predecessor_input", nil, :size => 30%>
-    <% end -%>
-
-  </fieldset>
-<% end # form_for -%>
\ No newline at end of file
+    <label id="label_for_predecessor_input" for="predecessor_input" style="display:none"><%= t('todos.add_another_dependency')%></label>
+    <%= text_field_tag "predecessor_input", nil, :size => 30%>
+  <% end -%>
+<% end # form_for -%>
diff --git a/app/views/todos/_todo.html.erb b/app/views/todos/_todo.html.erb
index 91eafcc7..ef191a82 100644
--- a/app/views/todos/_todo.html.erb
+++ b/app/views/todos/_todo.html.erb
@@ -4,16 +4,16 @@
     <div class="row">
       <div class="span8">
         <span class="todo-item-icons">
-          <i class="<%= todo.completed? ? "icon-check-sign" : "icon-check-empty"%>"></i>
-          <i class="<%= todo.starred?   ? "icon-star" : "icon-star-empty"%>"></i>
+          <i class="fa <%= todo.completed? ? "fa-check-square-o" : "fa-square-o" %>"></i>
+          <i class="fa <%= todo.starred?   ? "fa-star" : "fa-star-o"%>"></i>
         </span>
         <span class="todo-item-description-container">
           <span class="todo-description <%= "tracks-todo-overdue" if todo.overdue?%>"><%= todo.description %></span>
           <span class="todo-description-icons">
-            <%= content_tag(:i, {class: "icon-refresh"}){} if todo.from_recurring_todo? -%>
+            <%= content_tag(:i, {class: "fa fa-refresh"}){} if todo.from_recurring_todo? -%>
             <%= deferred_due_date(todo) -%>
-            <%= content_tag(:i, {class: "icon-sitemap"}){} if todo.has_pending_successors -%>
-            <%= content_tag(:i, {class: "icon-book", "data-note-id" => dom_id(todo, 'notes')}){} unless todo.notes.blank? %>
+            <%= content_tag(:i, {class: "fa fa-sitemap"}){} if todo.has_pending_successors -%>
+            <%= content_tag(:i, {class: "fa fa-book", "data-note-id" => dom_id(todo, 'notes')}){} unless todo.notes.blank? %>
           </span>
         </span>
         <span class="todo-item-detail hide"><br/>
diff --git a/app/views/todos/_todo_sub_menu.html.erb b/app/views/todos/_todo_sub_menu.html.erb
index a66fe0d3..c94a390e 100644
--- a/app/views/todos/_todo_sub_menu.html.erb
+++ b/app/views/todos/_todo_sub_menu.html.erb
@@ -1,9 +1,9 @@
 <div class="row todo-sub-menu-template hide">
-  <a class="btn btn-primary btn-mini"><i class="icon-pencil"></i> Edit</a>
+  <a class="btn btn-primary btn-mini"><i class="fa fa-pencil"></i> Edit</a>
 
   <div class="btn-group">
     <a class="btn btn-primary btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
-      <i class="icon-calendar"></i> Defer <span class="caret"></span>
+      <i class="fa fa-calendar"></i> Defer <span class="caret"></span>
     </a>
     <ul class="dropdown-menu">
       <li><a>Tomorrow</a></li>
@@ -18,9 +18,9 @@
     </ul>
   </div>
 
-  <a class="btn btn-primary btn-mini"><i class="icon-magic"></i> Make Project</a>
+  <a class="btn btn-primary btn-mini"><i class="fa fa-magic"></i> Make Project</a>
   <a class="btn btn-primary btn-mini tracks-popover-toggle" rel="tracks-popover" href="#"
      data-placement="bottom" data-original-title="Action details" data-html="true"
-     data-content="template-content"><i class="icon-info-sign"></i> Details</a>
-  <a class="btn btn-danger  btn-mini"><i class="icon-trash"></i> Delete</a>
+     data-content="template-content"><i class="fa fa-info-circle"></i> Details</a>
+  <a class="btn btn-danger  btn-mini"><i class="fa fa-trash-o"></i> Delete</a>
 </div>