Add .border-row-divider and use it in data reference

resources/frontend_client/app/css/core/bordered.css

@@ -26,6 +26,22 @@
   border-top: none;
 }
 
+.border-column-divider {
+  border-right: var(--border-size) var(--border-style) var(--border-color);
+}
+
+.border-column-divider:last-child {
+  border-right: none;
+}
+
+.border-row-divider {
+  border-bottom: var(--border-size) var(--border-style) var(--border-color);
+}
+
+.border-row-divider:last-child {
+  border-bottom: none;
+}
+
 .border-right {
   border-right: var(--border-size) var(--border-style) var(--border-color);
 }

resources/frontend_client/app/css/query_builder.css

@@ -410,7 +410,3 @@
 .DataRefererenceQueryButton-text {
     max-width: 160px;
 }
-
-.DataReference-usefulQuestions li:not(:last-child) {
-  border-bottom: var(--border-size) var(--border-style) var(--border-color);
-}

resources/frontend_client/app/query_builder/data_reference_field.react.js

@@ -130,12 +130,12 @@ export default React.createClass({
 
         var usefulQuestions = [];
         if (this.props.field.special_type === "number") {
-            usefulQuestions.push(<li key="sum"><DataReferenceQueryButton icon="illustration-icon-scalar" text={"Sum of all values of " + fieldName} onClick={this.setQuerySum} /></li>);
+            usefulQuestions.push(<li className="border-row-divider" key="sum"><DataReferenceQueryButton icon="illustration-icon-scalar" text={"Sum of all values of " + fieldName} onClick={this.setQuerySum} /></li>);
         }
-        usefulQuestions.push(<li key="distinct-values"><DataReferenceQueryButton icon="illustration-icon-table" text={"All distinct values of " + fieldName} onClick={this.setQueryDistinct} /></li>);
+        usefulQuestions.push(<li className="border-row-divider" key="distinct-values"><DataReferenceQueryButton icon="illustration-icon-table" text={"All distinct values of " + fieldName} onClick={this.setQueryDistinct} /></li>);
         var queryCountGroupedByText = "Number of " + inflection.pluralize(tableName) + " grouped by " + fieldName;
-        usefulQuestions.push(<li key="count-bar"><DataReferenceQueryButton icon="illustration-icon-bars" text={queryCountGroupedByText} onClick={this.setQueryCountGroupedBy.bind(null, "bar")} /></li>);
-        usefulQuestions.push(<li key="count-pie"><DataReferenceQueryButton icon="illustration-icon-pie" text={queryCountGroupedByText} onClick={this.setQueryCountGroupedBy.bind(null, "pie")} /></li>);
+        usefulQuestions.push(<li className="border-row-divider" key="count-bar"><DataReferenceQueryButton icon="illustration-icon-bars" text={queryCountGroupedByText} onClick={this.setQueryCountGroupedBy.bind(null, "bar")} /></li>);
+        usefulQuestions.push(<li className="border-row-divider" key="count-pie"><DataReferenceQueryButton icon="illustration-icon-pie" text={queryCountGroupedByText} onClick={this.setQueryCountGroupedBy.bind(null, "pie")} /></li>);
 
         return (
             <div>
@@ -143,7 +143,7 @@ export default React.createClass({
                 <p>{this.props.field.description}</p>
                 {useForCurrentQuestion}
                 <p className="text-bold">Potentially useful questions</p>
-                <ul className="DataReference-usefulQuestions">{usefulQuestions}</ul>
+                <ul>{usefulQuestions}</ul>
             </div>
         );
     },

resources/frontend_client/app/query_builder/data_reference_table.react.js

@@ -81,10 +81,9 @@ export default React.createClass({
             var pane;
             if (this.state.pane === "fields") {
                 var fields = table.fields.map((field, index) => {
-                    var classes = cx({ 'p1' : true, 'border-bottom': index !== table.fields.length - 1 })
                     var name =  inflection.humanize(field.name);
                     return (
-                        <li key={field.id} className={classes}>
+                        <li key={field.id} className="p1 border-row-divider">
                             <a className="text-brand no-decoration" href="#" onClick={this.props.showField.bind(null, field)}>{name}</a>
                         </li>
                     );