Redesigned the sidebar in the question list view

sass/base/_extends.scss

@@ -36,6 +36,8 @@ h1.top-header {
   font: bold $body-font-size $body-font-family;
   cursor: pointer;
   -webkit-font-smoothing: antialiased;
+  text-shadow: none;
+  text-decoration: none;
 
   &:hover, &:focus {
     @include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
@@ -107,6 +109,10 @@ h1.top-header {
       }
     }
   }
+
+  a.button {
+    text-decoration: none;
+  }
 }
 
 .topbar {

sass/discussion/_questions.scss

@@ -72,30 +72,6 @@ div.question-list-header {
 
     div.tags-list {
 
-      ul.tags {
-        display: inline;
-
-        li {
-          span.delete-icon, div.delete-icon {
-            @include border-radius(0 4px 4px 0);
-            background: #555;
-            color: #eee;
-            cursor: pointer;
-            float: none;
-            display: inline;
-            clear: none;
-            left: 10px;
-            padding: 3px 6px;
-            position: relative;
-            top: 1px;
-            opacity: 0.5;
-
-            &:hover {
-              opacity: 1;
-            }
-          }
-        }
-      }
     }
   }
 }

sass/discussion/_sidebar.scss

+
 div.discussion-wrapper aside {
   @extend .sidebar;
   @include box-shadow(inset 1px 0 0 #f6f6f6);
@@ -7,8 +8,13 @@ div.discussion-wrapper aside {
   padding: lh();
   width: flex-grid(3);
 
+
   h2 {
-    font-size: 16px;
+    color: #4D4D4D;
+
+    &.first {
+      margin-top: 0px;
+    }
   }
 
   h3 {
@@ -20,14 +26,60 @@ div.discussion-wrapper aside {
     width: 76%;
   }
 
+  div.box {
+    @include box-shadow(0 1px 0 #eee);
+    border-bottom: 1px solid #d3d3d3;
+    display: block;
+    padding-bottom: 20px;
+    overflow: hidden;
+
+    &:last-child {
+      @include box-shadow(none);
+      border: 0;
+    }
+
+    &.contributors {
+
+      a {
+        @include border-radius(3px);
+        border: 1px solid #888;
+        cursor: pointer;
+        display: inline-block;
+        margin-right: 6px;
+        position: relative;
+
+        &:before {
+          @include border-radius(3px);
+          @include box-shadow(inset 0 0 1px 1px rgba(255,255,255,.4));
+          top: 1px; left: 1px; bottom: 1px; right: 1px;
+          content: '';
+          position: absolute;
+        }
+
+      }
+      img.gravatar {
+        @include border-radius(3px);
+      }
+    }
+
+    &.tag-selector {
+     ul {
+       margin-bottom: 10px;
+       display: block;
+     }
+    }
+  }
+
   #displayTagFilterControl {
     margin-top: 10px;
   }
 
   div.search-box {
     input {
+      @include box-sizing(border-box);
       display: inline;
     }
+
     input[type='submit'] {
       @include box-shadow(none);
       opacity: 0.5;
@@ -49,7 +101,37 @@ div.discussion-wrapper aside {
 
     input#keywords {
       padding-left: 30px;
+      padding-right: 30px;
+      width: 100%;
+    }
+
+    input#clear {
+      @include box-shadow(none);
+      @include border-radius(5px);
+      border: none;
+      background: $mit-red;
+      color: #fff;
+      display: inline;
+      font-size: 10px;
+      margin-left: -25px;
+      padding: 2px 5px;
+    }
+  }
+
+  // Question view sopecific
+
+  div.follow-buttons {
+    margin: 20px 0;
+    display: block;
+
+    a.button {
+      @include box-sizing(border-box);
+      display: block;
+      text-align: center;
+      width: 100%;
     }
   }
 }
 
+
+

sass/discussion/_tags.scss

 ul.tags {
   list-style: none;
+  display: inline;
   li, a {
     position: relative;
   }
@@ -7,21 +8,56 @@ ul.tags {
     @include border-radius(4px);
     background: #eee;
     color: #555;
-    display: inline;
+    display: inline-block;
     font-size: 12px;
     margin-left: 15px;
     padding: 3px 10px 5px 5px;
+    margin-bottom: 5px;
 
     &:before {
+     border-color:transparent #eee transparent transparent;
+     border-style:solid;
+     border-width:12px 12px 12px 0;
      content:"";
+     height:0;
+     left:-11px;
      position:absolute;
      top:0;
-     left:-11px;
      width:0;
-     height:0;
-     border-color:transparent #eee transparent transparent;
-     border-style:solid;
-     border-width:12px 12px 12px 0;
+    }
+
+    span.delete-icon, div.delete-icon {
+      @include border-radius(0 4px 4px 0);
+      background: #555;
+      clear: none;
+      color: #eee;
+      cursor: pointer;
+      display: inline;
+      float: none;
+      left: 10px;
+      opacity: 0.5;
+      padding: 3px 6px;
+      position: relative;
+      top: 1px;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    a {
+      color: #555;
+      text-decoration: none;
     }
   }
 }
+
+span.tag-number {
+  @include border-radius(3px);
+  background: #555;
+  font-size: 10px;
+  margin: 0 3px;
+  padding: 2px 5px;
+  color: #eee;
+  opacity: 0.5;
+}