converted to sass, cleaned up some avatar extra markup

Gemfile

@@ -2,7 +2,7 @@ source 'https://rubygems.org'
 
 # Core gems
 gem 'rails', '3.2.2'
-gem 'sqlite3'
+gem 'pg'
 
 # Auth/Bushido gems
 gem 'devise'
@@ -31,7 +31,7 @@ group :assets do
   gem 'uglifier', '>= 1.0.3'
 end
 
-# gem 'tane', :path => "../tane", :group => :development
+gem 'tane', :path => "/remote/tane", :group => :development
 
 # Test gems, obviously
 group :test do

Gemfile.lock

@@ -1,3 +1,14 @@
+PATH
+  remote: /remote/tane
+  specs:
+    tane (0.0.3)
+      awesome_print
+      erubis
+      highline
+      launchy
+      rake
+      rest-client
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -30,6 +41,7 @@ GEM
       multi_json (~> 1.0)
     addressable (2.2.7)
     arel (3.0.2)
+    awesome_print (1.0.2)
     aws-sdk (1.3.8)
       httparty (~> 0.7)
       json (~> 1.4)
@@ -105,6 +117,8 @@ GEM
       actionpack (>= 3.0.0)
       activesupport (>= 3.0.0)
       railties (>= 3.0.0)
+    launchy (2.1.0)
+      addressable (~> 2.2.6)
     mail (2.4.3)
       i18n (>= 0.4.0)
       mime-types (~> 1.16)
@@ -119,6 +133,7 @@ GEM
       activesupport (>= 2.3.2)
       cocaine (>= 0.0.2)
       mime-types
+    pg (0.13.2)
     polyglot (0.3.3)
     rack (1.4.1)
     rack-cache (1.2)
@@ -173,7 +188,6 @@ GEM
       hike (~> 1.2)
       rack (~> 1.0)
       tilt (~> 1.1, != 1.3.0)
-    sqlite3 (1.3.5)
     thin (1.3.1)
       daemons (>= 1.0.9)
       eventmachine (>= 0.12.6)
@@ -209,11 +223,12 @@ DEPENDENCIES
   jquery-rails
   kaminari
   paperclip
+  pg
   rails (= 3.2.2)
   remotipart
   rspec-rails
   sass-rails (~> 3.2.3)
   shoulda-matchers
-  sqlite3
+  tane!
   thin
   uglifier (>= 1.0.3)

app/assets/stylesheets/_activity.sass

@@ -0,0 +1,51 @@
+.activity
+  float: left
+  width: 100%
+  padding-top: 10px
+  padding-bottom: 10px
+  border-bottom: 1px solid #DEE6E8
+  background: #FFF
+  .avatar
+    margin-right: 10px
+    display: block
+    float: left
+    width: 5%
+    width: 30px
+    height: 30px
+  .readable
+    float: left
+    width: 95%
+    .user
+      color: #AEB9BD
+      font-weight: bold
+      float: left
+      width: 100%
+      margin-bottom: 4px
+      font-size: 14px
+    .content
+      float: left
+      width: 80%
+      color: #797D7F
+      font-size: 14px
+      .image-preview, .youtube-preview
+        a
+          width: 100%
+        +border-radius(4px)
+        +box-shadow(0px 1px 5px 0px #cccccc)
+        padding: 10px
+        background: #F3F8F9
+        float: left
+        .name
+          color: #878D8F
+          font-weight: bold
+          margin-top: 5px
+    .posted_at
+      float: left
+      width: 20%
+      text-align: right
+      font-size: 11px
+      span
+        +border-radius(4px)
+        padding: 4px
+        background: #F3F8F9
+        color: #BDC6CA

app/assets/stylesheets/_base.sass

@@ -0,0 +1,29 @@
+=full-height
+  min-height: 100%
+  height: 100%
+
+*
+  +box-sizing(border-box)
+
+.logo
+  position: fixed
+  top: 0px
+  left: 0px
+  z-index: 1
+  margin: 5px
+
+html
+  +full-height
+
+body
+  background: $page-bg
+  background-image: url("/assets/page_bg.png")
+  height: 100%
+  min-height: 100%
+  font-size: 13px
+  font-family: 'PT Sans', sans-serif
+
+.main-area
+  +full-height
+  width: $main-area-width
+  float: left

app/assets/stylesheets/_chat_area.sass

@@ -0,0 +1,100 @@
+#channels
+  margin-top: 0px
+
+.ui-widget-header
+  +background-image(linear-gradient($header-bg-1, $header-bg-2))
+  +border-radius(0px)
+  border: none
+  .ui-state-active
+    background: $active-tab-bg
+    border: none
+    a
+      color: $active-tab-color
+
+.ui-tabs
+  +border-radius(0px)
+  padding: 0px
+  margin-top: 0px
+  border: none
+  .ui-tabs-nav
+    border-right: 1px solid #404A4D
+    position: fixed
+    width: 100%
+    padding-top: 6px
+    top: 0px
+    li:first-child
+      margin-left: 90px
+    li a
+      font-size: 14px
+    .ui-tab-selected
+      background: $active-tab-bg
+      border: none
+      a
+        color: $active-tab-color
+    li a
+      padding: 3px
+  .ui-tabs-panel
+    padding-right: 20px
+    padding-left: 20px
+    border-right: 1px solid #CDD1D4
+  .ui-widget-content
+    height: 95%
+
+.ui-corner-all .ui-corner-bottom, .ui-corner-bottom, .ui-corner-left, .ui-corner-right, .ui-corner-bl, .ui-corner-br
+  +border-radius(none)
+
+.ui-state-default
+  font-size: 14px
+
+.ui-widget-content
+  +full-height
+  background: $panel-bg
+  font-size: 13px
+
+.paginated-activities
+  +box-shadow(5px 0px 5px -3px #cccccc, -5px 0px 5px -3px #cccccc, 5px 10px 5px -3px #cccccc, -5px 10px 5px -3px #cccccc)
+  +border-top-radius(4px)
+  overflow-y: scroll
+  float: left
+  width: 100%
+  min-height: 88%
+  height: 88%
+  background: #FFF
+  padding: 10px
+  margin-top: 37px
+  .pagination
+    text-decoration: underline
+    cursor: pointer
+  .channel-activities
+    width: 100%
+
+.chatbox
+  +border-bottom-radius(4px)
+  +background-image(linear-gradient($chatbox-bg-1, $chatbox-bg-2))
+  +box-shadow(5px 0px 5px -3px #cccccc, -5px 0px 5px -3px #cccccc, 0px 5px 5px 0px #cccccc)
+  float: left
+  border-top: 1px solid #EBEFF1
+  padding: 10px 0px 10px 10px
+  width: 100%
+  textarea
+    +border-top-left-radius(4px)
+    +border-bottom-left-radius(4px)
+    border: 1px solid #AEB9BD
+    width: 92%
+    padding: 0px
+    margin: 0px
+    height: 40px
+    resize: none
+  button
+    +background-image(linear-gradient(#c8ecf6, #9fdff4))
+    +border-top-right-radius(4px)
+    +border-bottom-right-radius(4px)
+    position: relative
+    left: -5px
+    border: 1px solid #AEB9BD
+    color: #59808B
+    width: 7%
+    padding: 0px
+    margin: 0px
+    height: 40px
+    font-size: 16px