Unify styles between comments and activity.

app/styles/layout/us-detail.scss

@@ -114,34 +114,6 @@
     }
 }
 
-.us-activity-tabs {
-    @extend %title;
-    border-bottom: 3px solid $gray-light;
-    padding: .5rem 0;
-    li {
-        @extend %large;
-        display: inline-block;
-        &:first-child {
-            border-right: 1px solid $gray-light;
-        }
-    }
-    a {
-        @include transition(color .2s ease-in);
-        color: $gray-light;
-        padding: 0 2rem;
-        &.active {
-            color: $grayer;
-        }
-        &:hover {
-            @include transition(color .2s ease-in);
-            color: $green-taiga;
-        }
-    }
-    .icon {
-        margin-right: .5rem;
-    }
-}
-
 .comment-list {
     padding: 1rem;
 }

app/styles/main.scss

@@ -60,10 +60,8 @@ $prefix-for-spec:      true;
 @import 'modules/common/colors-table';
 @import 'modules/common/category-config';
 @import 'modules/common/attachments';
-@import 'modules/common/comments';
-@import 'modules/common/comment-activity';
-@import 'modules/common/activity';
 @import 'modules/common/related-tasks';
+@import 'modules/common/history';
 
 //Project modules
 @import 'modules/home-projects-list';

app/styles/modules/common/activity.scss

@@ -1,51 +0,0 @@
-.activity-single {
-    @include table-flex;
-    border-bottom: 2px solid $gray-light;
-    padding: 2rem 0;
-    position: relative;
-    &:first-child {
-        margin-top: 0;
-    }
-    .username {
-        color: $green-taiga;
-        margin-bottom: 1rem;
-    }
-    .activity-user {
-        @include table-flex-child(1, 50px, 0);
-        img {
-            max-width: 70px;
-            width: 100%;
-        }
-    }
-    .activity-username {
-        border-bottom: 1px dotted $gray-light;
-        color: $green-taiga;
-        margin-bottom: 1rem;
-    }
-    .activity-content {
-        @include table-flex-child(20, 150px, 0);
-    }
-    .us-activity {
-        background: $whitish;
-        .activity-inner {
-            display: none;
-        }
-    }
-    .date {
-        @extend %small;
-        color: $gray-light;
-        margin-left: 1rem;
-    }
-}
-
-.more-activity {
-    @extend %small;
-    border-bottom: 1px solid $gray-light;
-    color: $gray-light;
-    display: block;
-    padding: 1rem;
-    .prev-activity-num {
-        color: $green-taiga;
-        margin-left: .5rem;
-    }
-}

app/styles/modules/common/comment-activity.scss

@@ -1,41 +0,0 @@
-.us-activity {
-    margin-bottom: 1rem;
-    padding: 0 1rem;
-}
-
-.activity-title {
-    display: block;
-    padding: .5rem;
-    &:hover {
-        .icon {
-            @include transform(rotate(180deg));
-            @include transition(all.2s linear);
-            color: $green-taiga;
-        }
-    }
-    .icon {
-        @include transform(rotate(0));
-        @include transition(all.2s linear);
-        color: $grayer;
-        float: right;
-    }
-}
-
-.activity-inner {
-    @include table-flex;
-    border-bottom: 1px solid $gray-light;
-    padding: 1rem 0;
-    &:last-child {
-        border-bottom: 0;
-    }
-    .activity-changed,
-    .activity-fromto {
-        @include table-flex-child(1, 50px, 0);
-    }
-    .activity-changed {
-        @extend %bold;
-    }
-    .activity-fromto {
-        @extend %small;
-    }
-}

app/styles/modules/common/history.scss

@@ -1,3 +1,74 @@
+.history {
+    margin-bottom: 1rem;
+    padding: 0 1rem;
+}
+
+
+.changes-title {
+    display: block;
+    padding: .5rem;
+    &:hover {
+        .icon {
+            @include transform(rotate(180deg));
+            @include transition(all.2s linear);
+            color: $green-taiga;
+        }
+    }
+    .icon {
+        @include transform(rotate(0));
+        @include transition(all.2s linear);
+        color: $grayer;
+        float: right;
+    }
+}
+
+.change-entry {
+    @include table-flex;
+    border-bottom: 1px solid $gray-light;
+    padding: .5rem;
+    &:last-child {
+        border-bottom: 0;
+    }
+    .activity-changed,
+    .activity-fromto {
+        @include table-flex-child(1, 50px, 0);
+    }
+    .activity-changed {
+        @extend %bold;
+    }
+    .activity-fromto {
+        @extend %small;
+    }
+}
+
+.history-tabs {
+    @extend %title;
+    border-bottom: 3px solid $gray-light;
+    padding: .5rem 0;
+    li {
+        @extend %large;
+        display: inline-block;
+        &:first-child {
+            border-right: 1px solid $gray-light;
+        }
+    }
+    a {
+        @include transition(color .2s ease-in);
+        color: $gray-light;
+        padding: 0 2rem;
+        &.active {
+            color: $grayer;
+        }
+        &:hover {
+            @include transition(color .2s ease-in);
+            color: $green-taiga;
+        }
+    }
+    .icon {
+        margin-right: .5rem;
+    }
+}
+
 .add-comment {
     @include clearfix;
     textarea {
@@ -37,66 +108,6 @@ a.show-more-comments {
     }
 }
 
-.comment-single {
-    @include table-flex;
-    border-bottom: 2px solid $gray-light;
-    padding: 1rem 0;
-    position: relative;
-    &:hover {
-        .delete-comment {
-            opacity: 1;
-            @include transition(opacity .2s linear);
-        }
-    }
-    &:first-child {
-        margin-top: 0;
-    }
-    &:last-child {
-        border: 0;
-    }
-    .username {
-        color: $green-taiga;
-        display: block;
-        margin-bottom: 1rem;
-    }
-    .comment-user {
-        @include table-flex-child(1, 50px, 0);
-        img {
-            max-width: 70px;
-            width: 100%;
-        }
-    }
-    .comment-content {
-        @include table-flex-child(20, 150px, 0);
-    }
-    .us-activity {
-        background: $whitish;
-        .activity-inner {
-            display: none;
-            &.active {
-                display: flex;
-            }
-        }
-    }
-    .date {
-        @extend %small;
-        color: $gray-light;
-    }
-    .delete-comment {
-        @include transition(all .2s linear);
-        bottom: 2rem;
-        color: $grayer;
-        opacity: 0;
-        position: absolute;
-        right: 1.5rem;
-        &:hover {
-            @include transition(color .2s linear);
-            color: $red;
-
-        }
-    }
-}
-
 .more-comments {
     @extend %small;
     border-bottom: 1px solid $gray-light;
@@ -108,6 +119,7 @@ a.show-more-comments {
         margin-left: .5rem;
     }
 }
+
 .comment-list {
     &.activeanimation {
         .comment-single.ng-enter:last-child,
@@ -124,3 +136,70 @@ a.show-more-comments {
         }
     }
 }
+
+.activity-single {
+    @include table-flex;
+    border-bottom: 2px solid $gray-light;
+    padding: 2rem 0;
+    position: relative;
+    &:first-child {
+        margin-top: 0;
+    }
+    .username {
+        color: $green-taiga;
+        margin-bottom: 0.5rem;
+    }
+    .activity-user {
+        @include table-flex-child(1, 50px, 0);
+        img {
+            max-width: 70px;
+            width: 100%;
+        }
+    }
+    .activity-username {
+        color: $green-taiga;
+        margin-bottom: 1rem;
+    }
+
+    .activity-content {
+        @include table-flex-child(20, 150px, 0);
+    }
+
+    .changes {
+        background: $whitish;
+        .change-entry {
+            display: none;
+
+            &.active {
+                display: flex;
+            }
+        }
+    }
+    .date {
+        @extend %small;
+        color: $gray-light;
+        margin-left: 1rem;
+    }
+
+    .wysiwyg {
+        margin-bottom: 0px;
+    }
+
+    &.activity {
+        .change-entry {
+            display: flex;
+        }
+    }
+}
+
+.more-activity {
+    @extend %small;
+    border-bottom: 1px solid $gray-light;
+    color: $gray-light;
+    display: block;
+    padding: 1rem;
+    .prev-activity-num {
+        color: $green-taiga;
+        margin-left: .5rem;
+    }
+}