UX: mobile categories page is more like desktop categories page

app/assets/javascripts/discourse/templates/mobile/discovery/categories.hbs

@@ -1,9 +1,9 @@
 {{#each c in categories}}
-  <div class='category-list-item'>
+  <div class='category-list-item category' style="border-color: #{{unbound c.color}}">
     <table class='topic-list'>
       <tr>
         <th class="main-link">
-          {{category-link c allowUncategorized=true}}
+          {{category-title-link category=c}}
         </th>
       </tr>
 

app/assets/stylesheets/mobile/topic-list.scss

@@ -97,9 +97,6 @@ tr.category-topic-link:nth-of-type(odd) {
     display: inline-block;
     margin-top: 1px;
   }
-  .category-description {
-    margin-top: 8px;
-  }
   .featured-users {
     @include mobile-portrait  {
       margin-bottom: 10px;
@@ -129,6 +126,26 @@ tr.category-topic-link:nth-of-type(odd) {
 
 .category-list-item {
 
+  border-left: 6px solid;
+
+  h3 {
+    display: inline-block;
+    font-size: 1.286em;
+    margin: 10px 0 0 5px;
+    i {
+      margin-right: 5px;
+    }
+    a[href] {
+      color: $primary;
+    }
+  }
+
+  .category-description {
+    td {
+      padding: 0 5px 15px 10px;
+    }
+  }
+
   .topic-list > tbody > tr {
     &:nth-child(odd) {
       background-color: $secondary;
@@ -138,7 +155,9 @@ tr.category-topic-link:nth-of-type(odd) {
     }
   }
 
-  margin-bottom: 10px;
+  .category-topic-link .main-link {
+    padding-left: 10px;
+  }
 
   th .badge-category {
     margin: 0;