Add arrow to object detail

resources/frontend_client/app/css/core/arrow.css

+
+/* TODO: based on popover.css, combine them? */
+/* TODO: other arrow directions */
+
+.arrow-right {
+    position: relative; /* TODO: should it be up to the consumer to set a non-static positioning? */
+}
+
+/* shared arrow styles */
+.arrow-right:before,
+.arrow-right:after {
+	position: absolute;
+	content: '';
+	display: block;
+	border-left: 10px solid transparent;
+	border-right: 10px solid transparent;
+	border-top: 10px solid transparent;
+	border-bottom: 10px solid transparent;
+}
+
+/* create a slightly larger arrow on the right for border purposes */
+.arrow-right:before {
+  right: -20px;
+  border-left-color: #ddd;
+}
+
+/* create a smaller inset arrow on the right */
+.arrow-right:after {
+  right: -18px;
+  border-left-color: #fff;
+}
+
+/* move our arrows to the center */
+.arrow-right:before, .arrow-right:after {
+  top: 50%;
+  margin-top: -10px;
+}

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

@@ -187,7 +187,7 @@ export default React.createClass({
         return (
             <div className="ObjectDetail rounded">
                 <div className="Grid ObjectDetail-headingGroup">
-                    <div className="Grid-cell ObjectDetail-infoMain px4 py3 ml2 ">
+                    <div className="Grid-cell ObjectDetail-infoMain px4 py3 ml2 arrow-right">
                         <div className="text-brand text-bold">
                             <span>{tableName}</span>
                             <h1>{idValue}</h1>