Using user page layout/styles for groups where possible

app/assets/javascripts/discourse/templates/components/group-post.hbs

@@ -1,13 +1,15 @@
-<div class='group-post-header'>
+<div class='clearfix info'>
-  <div class='group-post-avatar'>
     <a href="{{unbound post.user.userUrl}}" data-user-card="{{unbound post.user.username}}" class='avatar-link'>
       {{avatar post.user imageSize="large" extraClasses="actor" ignoreTitle="true"}}
     </a>
-  </div>
+    <span class='time'>{{format-date post.created_at leaveAgo="true"}}</span>
-  <div class='group-post-info'>
+    {{expand-post item=post}}
-    <div class="group-post-topic">
+
-      <div class='group-post-title'>
+  <div class='stream-topic-details'>
-        <a href={{postUrl}}>{{{post.topic.fancyTitle}}}</a>
+      <div class='stream-topic-title'>
+        <span class='title'>
+          <a href={{postUrl}}>{{{post.topic.fancyTitle}}}</a>
+        </span>
       </div>
       <div class="group-post-category">{{category-link post.category}}</div>
       {{#if post.user.name}}
@@ -16,14 +18,11 @@
           {{#if post.user.title}}<span class="title">, {{post.user.title}}</span>{{/if}}
         </div>
       {{/if}}
-    </div>
-    <div class='group-post-controls'>
-      {{expand-post item=post}}
-      <span class='time'>{{format-date post.created_at leaveAgo="true"}}</span>
-    </div>
   </div>
+  
 </div>
-<div class='group-post-excerpt'>
+
+<div class='excerpt'>
   {{#if post.expandedExcerpt}}
     {{{post.expandedExcerpt}}}
   {{else}}

app/assets/javascripts/discourse/templates/group-activity-posts.hbs

@@ -1,11 +1,11 @@
 {{#load-more selector=".group-post" action=(action "loadMore")}}
-  <div class='group-posts'>
+<div class="user-stream">
     {{#each model as |post|}}
-      {{group-post post=post class="group-post"}}
+      {{group-post post=post class="user-stream-item item"}}
     {{else}}
       <div>{{i18n emptyText}}</div>
     {{/each}}
-  </div>
+</div>
 {{/load-more}}
 
 {{conditional-loading-spinner condition=loading}}

app/assets/javascripts/discourse/templates/group.hbs

@@ -60,7 +60,9 @@
     </div>
   </div>
 
-  <div class='group-outlet'>
+    <div class='user-table'>
-    {{outlet}}
+      <div class='wrapper'>
-  </div>
+        {{outlet}}
+      </div>
+    </div>
 </div>

app/assets/javascripts/discourse/templates/group/activity.hbs

@@ -1,16 +1,14 @@
-<div class='group-activity container'>
+<section class="user-navigation">
-  {{#mobile-nav class='group-activity-nav group-navigation' desktopClass="pull-left nav nav-stacked" currentPath=application.currentPath}}
+  {{#mobile-nav class='activity-nav' desktopClass='action-list activity-list nav-stacked' currentPath=application.currentPath}}
     {{group-activity-filter filter="posts" categoryId=category_id}}
     {{group-activity-filter filter="topics" categoryId=category_id}}
     {{#if siteSettings.enable_mentions}}
       {{group-activity-filter filter="mentions" categoryId=category_id}}
     {{/if}}
-    {{plugin-outlet name="below-group-activity-nav" tagName='' connectorTagName='li'}}
+    {{plugin-outlet name="group-activity-bottom" tagName='' connectorTagName='li'}}
   {{/mobile-nav}}
+</section>
 
-  <div class="{{if site.mobileView "" "pull-left"}} group-activity-outlet">
+<section class='user-right'>
-    <div class='user-main'>
+  {{outlet}}
-      {{outlet}}
+</section>
-    </div>
-  </div>
-</div>

app/assets/javascripts/discourse/templates/group/manage.hbs

@@ -1,5 +1,5 @@
-<div class='group-manage container'>
+<section class='user-navigation'>
-  {{#mobile-nav class='group-navigation' desktopClass='pull-left nav nav-stacked' currentPath=application.currentPath}}
+  {{#mobile-nav class='activity-nav' desktopClass='action-list activity-list nav-stacked' currentPath=application.currentPath}}
     {{#each tabs as |tab|}}
       <li>
         {{#link-to tab.route model.name}}
@@ -8,8 +8,8 @@
       </li>
     {{/each}}
   {{/mobile-nav}}
+</section>
 
-  <div class="{{if site.mobileView "" "pull-left"}} group-manage-outlet">
+<section class='user-right'>
-    {{outlet}}
+  {{outlet}}
-  </div>
+</section>
-</div>

app/assets/javascripts/discourse/templates/group/messages.hbs

@@ -1,5 +1,5 @@
-<div class='group-activity container'>
+<section class="user-navigation">
-  {{#mobile-nav class='group-navigation' desktopClass='pull-left nav nav-stacked' currentPath=application.currentPath}}
+  {{#mobile-nav class='messages-nav' desktopClass='nav-stacked action-list' currentPath=application.currentPath}}
 
     <li>
       {{#link-to 'group.messages.inbox' model.name}}
@@ -12,10 +12,7 @@
       {{/link-to}}
     </li>
   {{/mobile-nav}}
-
+</section>
-  <div class="{{if site.mobileView "" "pull-left"}} group-messages-outlet">
+<section class='user-right messages'>
-    <div class='user-main'>
+    {{outlet}}
-      {{outlet}}
+</section>
-    </div>
-  </div>
-</div>

app/assets/stylesheets/common/base/group.scss

@@ -1,5 +1,9 @@
+// We should try to reuse the user page HTML for groups when possible
+// To style group content differently, use the existing classes with a .group parent class.
+// For example: .group .user-navigation 
+
 .group-details-container {
-  background: rgba(230, 230, 230, 0.3);
+  background: $primary-very-low;
   padding: 20px;
   margin-bottom: 15px;
   position: relative;
@@ -24,45 +28,6 @@
   }
 }
 
-.group-post {
-  .group-post-header {
-    display: flex;
-
-    .group-post-avatar {
-      margin-right: 0.5em;
-    }
-
-    .time,
-    .delete-info {
-      color: lighten($primary, 40%);
-      font-size: $font-down-1;
-    }
-
-    .group-member-info {
-      display: flex;
-      color: lighten($primary, 40%);
-    }
-  }
-
-  .group-post-info {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    .group-post-title {
-      font-size: $font-up-1;
-    }
-  }
-
-  .group-post-excerpt {
-    margin: 1em 0;
-    word-wrap: break-word;
-    color: $primary;
-  }
-
-  padding: 1em 0;
-  border-bottom: 1px solid $primary-low;
-}
-
 .group-info {
   width: 100%;
 
@@ -173,7 +138,7 @@ table.group-members {
 
     td {
       text-align: center;
-      color: blend-primary-secondary(50%);
+      color: $primary-medium;
       padding: 0.8em 0;
     }
   }

app/assets/stylesheets/common/base/user.scss

@@ -1,4 +1,5 @@
 // Common styles for "/user" section
+// These styles are also used for "/groups" — test those pages if making significant changes
 .user-right {
   .list-actions {
     margin-bottom: 10px;