modified html for discussion home to use tables instead of lists, cleaned up styling as well

lms/static/sass/_discussion.scss

@@ -68,7 +68,7 @@
   font-family: 'Monaco', monospace;
   font-size: 13px;
   line-height: 1.6;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
+  box-shadow: 0 1px 3px $black-t0 inset;
 }
 
 @mixin discussion-wmd-preview {
@@ -1365,35 +1365,27 @@ body.discussion {
     }
   }
 
-  .helpgrid-list {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-
-
-    .helpgrid-row {
+  .helpgrid-row {
       border-bottom: 1px solid #b2b2b2;
 
       .row-title {
         padding: 30px $baseline;
-        display: inline-block;
-        width: 15%;
+        //width: 15%;
         background-color: $gray-l4;
         font-size: 12px;
       }
 
       .row-item-full, .row-item {
-        display: inline-block;
         font-size: 12px;
         padding-left: $baseline/2;
-        width: 23%;
+        width: 30%;
         vertical-align: middle;
 
         .icon {
           padding: 0 $baseline/2;
           font-size: 24px;
-          display: inline-block;
           vertical-align: middle;
+          display: table-cell;
         }
 
         .icon-stack i {
@@ -1401,22 +1393,23 @@ body.discussion {
         }
 
         .row-description {
-          display: inline-block;
-          width: 70%;
           vertical-align: middle;
+          display: table-cell;
         }
       }
 
       .row-item-full {
-        width: 77%;
+
+        .row-setting {
+          display: table-cell;
+          vertical-align: middle;
+        }
 
         .row-description {
-          width: 80%;
           padding-left: 15px;
         }
       }
     }
-  }
 
   .helpgrid-row-navigation {
     .icon-reorder {color: $light-gray;}

lms/templates/discussion/index.html

@@ -51,49 +51,46 @@
 		        	</div>
 	        	</section>
 	        	<span class="label label-settings">HOW TO USE EDX DISCUSSIONS</span>
-	        	<section class="home-helpgrid">
-		        	<ul class="helpgrid-list">
-		        		<li class="helpgrid-row helpgrid-row-navigation">
-		        			<span class="row-title">Find discussions</span>
-		        			<div class="row-item">
+	        	<table class="home-helpgrid">
+		        		<tr class="helpgrid-row helpgrid-row-navigation">
+		        			<td class="row-title">Find discussions</td>
+		        			<td class="row-item">
 		        				<i class="icon icon-reorder"></i>
 		        				<span class="row-description">Focus in on specific topics</span>
-	        				</div>
-		        			<div class="row-item">
+	        				</td>
+		        			<td class="row-item">
 		        				<i class="icon icon-search"></i>
 		        				<span class="row-description">Search for specific posts </span>
-		        			</div>
-		        			<div class="row-item">
+		        			</td>
+		        			<td class="row-item">
 		        				<i class="icon icon-sort"></i>
 		        				<span class="row-description">Sort by date, vote, or comments </span>
-		        			</div>
-		        		</li>
-		        		<li class="helpgrid-row helpgrid-row-participation">
-		        			<span class="row-title">Engage with posts</span>
-		        			<div class="row-item">
+		        			</td>
+		        		</tr>
+		        		<tr class="helpgrid-row helpgrid-row-participation">
+		        			<td class="row-title">Engage with posts</td>
+		        			<td class="row-item">
 		        				<i class="icon icon-plus"></i>
 		        				<span class="row-description">Upvote posts and good responses</span>
-		        			</div>
-		        			<div class="row-item">
+		        			</td>
+		        			<td class="row-item">
 		        				<i class="icon icon-flag"></i>
 		        				<span class="row-description">Report Forum Misuse</span>
-		        			</div>
-		        			<div class="row-item">
+		        			</td>
+		        			<td class="row-item">
 		        				<i class="icon icon-star"></i>
 		        				<span class="row-description">Follow posts for updates</span>
-		        			</div>
-		        		</li>
-		        		<li class="helpgrid-row helpgrid-row-notification">
-		        			<span class="row-title">Receive updates</span>
-		        			<div class="row-item-full">
+		        			</td>
+		        		</tr>
+		        		<tr class="helpgrid-row helpgrid-row-notification">
+		        			<td class="row-title">Receive updates</td>
+		        			<td class="row-item-full" colspan="3">
 		        				<i class="icon icon-envelope"></i>
 								<span class="row-setting"><input type="checkbox" name="email-notification"></input></span>
 								<span class="row-description"> If enabled, you will receive an email digest once a day notifying you about new, unread activity from posts you are following. </span>
-							</div>
-		        		</li>
-		        	</ul>
-	        	</section>
-
+							</td>
+		        		</tr>
+	        	</table>
         	</div>
         </div>
     </div>