UX: Improve styling for groups page.

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

@@ -1,6 +1,6 @@
 <div class="container group">
   <div class='group-details-container'>
-    <div class='group-details'>
+    <div class='group-info'>
       {{#if model.flair_url}}
         <span class='group-avatar-flair'>
           {{avatar-flair
@@ -12,13 +12,11 @@
       {{/if}}
 
       <span>
-        <h1 class='group-header'>
-          <span class='group-title'>{{groupName}}</span>
-        </h1>
+        <span class='group-info-name'>{{groupName}}</span>
 
-        {{#if model.full_name}}
-          <h3 class='group-name'>@{{model.name}}</h3>
-        {{/if}}
+        <div>
+          {{#if model.full_name}}<span class='group-info-full-name'>{{model.name}}</span>{{/if}}
+        </div>
       </span>
     </div>
 

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

@@ -12,10 +12,10 @@
         <tbody>
           {{#each groups as |group|}}
             <tr class="groups-table-row">
-              <td class="groups-name">
+              <td class="groups-info">
                 {{#link-to "group.members" group.name}}
                   {{#if group.flair_url}}
-                    <span>
+                    <span class='group-avatar-flair'>
                       {{avatar-flair
                         flairURL=group.flair_url
                         flairBgColor=group.flair_bg_color
@@ -24,10 +24,23 @@
                     </span>
                   {{/if}}
 
-                  <span><h4>@{{group.name}}</h4></span>
+                  <span>
+                    <span class='groups-info-name'>{{group.name}}</span>
+
+                    {{#if group.full_name}}
+                      <span class='groups-info-full-name'>{{group.full_name}}</span>
+                    {{/if}}
+
+                    {{#if group.title}}
+                      <div>
+                        <span class='groups-info-title'>{{group.title}}</span>
+                      </div>
+                    {{/if}}
+                  </span>
                 {{/link-to}}
               </td>
-              <td>{{group.user_count}}</td>
+
+              <td class="groups-user-count">{{group.user_count}}</td>
             </tr>
           {{/each}}
         </tbody>

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

@@ -1,20 +1,41 @@
-.group-header {
-  font-size: 2.142em;
-  font-weight: normal;
-}
-
-.group-name {
-  font-weight: normal;
-  margin-top: 5px;
-  color: dark-light-diff($primary, $secondary, 50%, -50%);
-}
-
 .group-details-container {
   background: rgba(230, 230, 230, 0.3);
   padding: 20px;
   margin-bottom: 30px;
 }
 
+.group-info {
+  width: 100%;
+
+  .group-info-name {
+    font-size: 1.4em;
+    font-weight: bold;
+    color: $primary;
+  }
+
+  .group-info-full-name {
+    font-size: 1.2em;
+    color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%));
+  }
+
+  span {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .avatar-flair {
+    $size: 50px;
+
+    background-size: $size;
+    height: $size;
+    width: $size;
+
+    i {
+      font-size: $size !important;
+    }
+  }
+}
+
 .group-logs-filter {
   margin-right: 10px;
 
@@ -109,27 +130,6 @@ table.group-members {
   color: $primary;
 }
 
-.group-details {
-  width: 100%;
-
-  span {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .avatar-flair {
-    $size: 50px;
-
-    background-size: $size;
-    height: $size;
-    width: $size;
-
-    i {
-      font-size: $size !important;
-    }
-  }
-}
-
 .form-horizontal {
   .group-flair-inputs {
     display: inline-block;

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

@@ -7,28 +7,9 @@
 .groups-table {
   width: 100%;
 
-  .groups-name {
-    span {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    .avatar-flair {
-      $size: 30px;
-
-      background-size: $size;
-      height: $size;
-      width: $size;
-
-      i {
-        font-size: $size !important;
-      }
-    }
-  }
-
   th {
     border-bottom: 3px solid dark-light-diff($primary, $secondary, 90%, -60%);
-    padding: 5px 0px 5px 5px;
+    padding: 5px 0px;
     color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
     font-weight: normal;
     text-align: left;
@@ -41,5 +22,42 @@
       color: dark-light-diff($primary, $secondary, 50%, -50%);
       padding: 0.8em 0;
     }
+
+    td.groups-user-count {
+      font-size: 1.2em;
+    }
+  }
+
+  .groups-info {
+    .groups-info-name {
+      font-weight: bold;
+      color: $primary;
+    }
+
+    .groups-info-full-name {
+      color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%));
+    }
+
+    .groups-info-title {
+      font-size: 0.9em;
+      color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
+    }
+
+    span {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .avatar-flair {
+      $size: 40px;
+
+      background-size: $size;
+      height: $size;
+      width: $size;
+
+      i {
+        font-size: $size !important;
+      }
+    }
   }
 }

app/assets/stylesheets/common/components/group-members-input.scss

@@ -11,5 +11,3 @@
     }
   }
 }
-
-

app/assets/stylesheets/desktop/group.scss

@@ -7,6 +7,6 @@
   margin-right: 30px;
 }
 
-.group-details {
+.group-info {
   margin-bottom: 20px;
 }

app/jobs/regular/user_email.rb

@@ -37,6 +37,7 @@ module Jobs
                                                args[:email_token],
                                                args[:to_address])
 
+      byebug
       if message
         Email::Sender.new(message, type, user).send
       else