basic layout structure

resources/frontend_client/app/css/core/colors.css

@@ -2,13 +2,13 @@
   --brand-color: #509EE3;
 
   --base-grey: #f8f8f8;
-  --alt-bg-color: #F4F6F8;
+  --alt-color: #F5F7F9;
 
   --success-color: #9CC177;
   --headsup-color: #F5A623;
 
   --gold-color: #F9D45C;
-
+  --dark-color: #4C545B;
   --error-color: #EF8C8C;
 }
 
@@ -59,9 +59,10 @@
     color: var(--gold-color);
 }
 
-.bg-gold {
-    background-color: var(--gold-color);
-}
+.bg-gold { background-color: var(--gold-color); }
+
+/* alt */
+.bg-alt { background-color: var(--alt-color); }
 
 /* grey */
 

resources/frontend_client/app/icon_paths.js

@@ -25,6 +25,7 @@ export default {
     clone: 'M8,6 L8,0 L32,0 L32,24 L26,24 L26,6 L8,6 Z M24,28 L24,32 L0,32 L0,8 L7,8 L24,8 L24,28 Z',
     close: 'M4 8 L8 4 L16 12 L24 4 L28 8 L20 16 L28 24 L24 28 L16 20 L8 28 L4 24 L12 16 z ',
     countrymap: 'M19.4375,6.97396734 L27,8.34417492 L27,25.5316749 L18.7837192,23.3765689 L11.875,25.3366259 L11.875,25.3366259 L11.875,11.0941749 L11.1875,11.0941749 L11.1875,25.5316749 L5,24.1566749 L5,7.65667492 L11.1875,9.03167492 L18.75,6.90135976 L18.75,22.0941749 L19.4375,22.0941749 L19.4375,6.97396734 Z',
+    connections: 'M5.37815706,11.5570815 C5.55061975,11.1918363 5.64705882,10.783651 5.64705882,10.3529412 C5.64705882,9.93118218 5.55458641,9.53102128 5.38881053,9.1716274 L11.1846365,4.82475792 C11.6952189,5.33295842 12.3991637,5.64705882 13.1764706,5.64705882 C14.7358628,5.64705882 16,4.38292165 16,2.82352941 C16,1.26413718 14.7358628,0 13.1764706,0 C11.6170784,0 10.3529412,1.26413718 10.3529412,2.82352941 C10.3529412,3.2452884 10.4454136,3.64544931 10.6111895,4.00484319 L10.6111895,4.00484319 L4.81536351,8.35171266 C4.3047811,7.84351217 3.60083629,7.52941176 2.82352941,7.52941176 C1.26413718,7.52941176 0,8.79354894 0,10.3529412 C0,11.9123334 1.26413718,13.1764706 2.82352941,13.1764706 C3.59147157,13.1764706 4.28780867,12.8698929 4.79682555,12.3724528 L10.510616,16.0085013 C10.408473,16.3004758 10.3529412,16.6143411 10.3529412,16.9411765 C10.3529412,18.5005687 11.6170784,19.7647059 13.1764706,19.7647059 C14.7358628,19.7647059 16,18.5005687 16,16.9411765 C16,15.3817842 14.7358628,14.1176471 13.1764706,14.1176471 C12.3029783,14.1176471 11.5221273,14.5142917 11.0042049,15.1372938 L5.37815706,11.5570815 Z',
     dashboards: 'M17,5.49100518 L17,10.5089948 C17,10.7801695 17.2276528,11 17.5096495,11 L26.4903505,11 C26.7718221,11 27,10.7721195 27,10.5089948 L27,5.49100518 C27,5.21983051 26.7723472,5 26.4903505,5 L17.5096495,5 C17.2281779,5 17,5.22788048 17,5.49100518 Z M18.5017326,14 C18.225722,14 18,13.77328 18,13.4982674 L18,26.5017326 C18,26.225722 18.22672,26 18.5017326,26 L5.49826741,26 C5.77427798,26 6,26.22672 6,26.5017326 L6,13.4982674 C6,13.774278 5.77327997,14 5.49826741,14 L18.5017326,14 Z M14.4903505,6 C14.2278953,6 14,5.78028538 14,5.49100518 L14,10.5089948 C14,10.2167107 14.2224208,10 14.4903505,10 L5.50964952,10 C5.77210473,10 6,10.2197146 6,10.5089948 L6,5.49100518 C6,5.78328929 5.77757924,6 5.50964952,6 L14.4903505,6 Z M26.5089948,22 C26.2251201,22 26,21.7774008 26,21.4910052 L26,26.5089948 C26,26.2251201 26.2225992,26 26.5089948,26 L21.4910052,26 C21.7748799,26 22,26.2225992 22,26.5089948 L22,21.4910052 C22,21.7748799 21.7774008,22 21.4910052,22 L26.5089948,22 Z M26.5089948,14 C26.2251201,14 26,13.7774008 26,13.4910052 L26,18.5089948 C26,18.2251201 26.2225992,18 26.5089948,18 L21.4910052,18 C21.7748799,18 22,18.2225992 22,18.5089948 L22,13.4910052 C22,13.7748799 21.7774008,14 21.4910052,14 L26.5089948,14 Z M26.4903505,6 C26.2278953,6 26,5.78028538 26,5.49100518 L26,10.5089948 C26,10.2167107 26.2224208,10 26.4903505,10 L17.5096495,10 C17.7721047,10 18,10.2197146 18,10.5089948 L18,5.49100518 C18,5.78328929 17.7775792,6 17.5096495,6 L26.4903505,6 Z M5,13.4982674 L5,26.5017326 C5,26.7769181 5.21990657,27 5.49826741,27 L18.5017326,27 C18.7769181,27 19,26.7800934 19,26.5017326 L19,13.4982674 C19,13.2230819 18.7800934,13 18.5017326,13 L5.49826741,13 C5.22308192,13 5,13.2199066 5,13.4982674 Z M5,5.49100518 L5,10.5089948 C5,10.7801695 5.22765279,11 5.50964952,11 L14.4903505,11 C14.7718221,11 15,10.7721195 15,10.5089948 L15,5.49100518 C15,5.21983051 14.7723472,5 14.4903505,5 L5.50964952,5 C5.22817786,5 5,5.22788048 5,5.49100518 Z M21,21.4910052 L21,26.5089948 C21,26.7801695 21.2278805,27 21.4910052,27 L26.5089948,27 C26.7801695,27 27,26.7721195 27,26.5089948 L27,21.4910052 C27,21.2198305 26.7721195,21 26.5089948,21 L21.4910052,21 C21.2198305,21 21,21.2278805 21,21.4910052 Z M21,13.4910052 L21,18.5089948 C21,18.7801695 21.2278805,19 21.4910052,19 L26.5089948,19 C26.7801695,19 27,18.7721195 27,18.5089948 L27,13.4910052 C27,13.2198305 26.7721195,13 26.5089948,13 L21.4910052,13 C21.2198305,13 21,13.2278805 21,13.4910052 Z',
     download: 'M17,16.5 L17,8 L15,8 L15,16.5 L11,16.5 L9.93247919,16.5 L10.6158894,17.3200922 L15.6158894,23.3200922 L16,23.781025 L16.3841106,23.3200922 L21.3841106,17.3200922 L22.0675208,16.5 L21,16.5 L17,16.5 L17,16.5 Z',
     expand: 'M16 4 L28 4 L28 16 L24 12 L20 16 L16 12 L20 8z M4 16 L8 20 L12 16 L16 20 L12 24 L16 28 L4 28z ',

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

@@ -8,14 +8,15 @@ export default React.createClass({
        return {
           width: '32px',
           height: '32px',
-          fill: 'currentcolor'
+          fill: 'currentcolor',
+          bordered: false,
+          rounded: false,
        };
     },
-    render: function () {
-        var iconPath = ICON_PATHS[this.props.name],
-            path;
+    renderIcon: function () {
+        var path;
+        var iconPath = ICON_PATHS[this.props.name];
 
-        // handle multi path icons which appear as non strings
         if(typeof(iconPath) != 'string') {
             // create a path for each path present
             path = iconPath.map(function (path) {
@@ -24,11 +25,31 @@ export default React.createClass({
         } else {
             path = (<path d={iconPath} />);
         }
-
         return (
             <svg viewBox="0 0 32 32" {... this.props} className={'Icon Icon-' + this.props.name}>
                 {path}
             </svg>
         );
+    },
+    renderBordered: function () {
+        return (
+            <span className="text-error">
+                {this.renderIcon()}
+            </span>
+        );
+    },
+    render: function () {
+        var props = this.props;
+
+        if(this.props.bordered || this.props.rounded) {
+            var iconClasses;
+            return (
+                <span className={iconClasses}>
+                    {this.renderIcon()}
+                </span>
+            );
+        } else {
+            return this.renderIcon();
+        }
     }
 });

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

@@ -88,7 +88,7 @@ export default React.createClass({
         }
 
         return (
-            <table className="wrapper">
+            <table className="p4">
                 <tbody>
                     {rows}
                 </tbody>
@@ -122,9 +122,15 @@ export default React.createClass({
                 referenceCount = component.renderFkCountOrSpinner(fk.origin.id);
 
             return (
-                <li className="block mb1 lg-mb2 border-bottom">
-                    <div key={fk.id} onClick={component.clickedForeignKey.bind(null, fk)}>
-                        {referenceCount} {relationName} <span className="UserNick"><Icon name='chevronright' width="12px" height="12px" /></span>
+                <li className="block mb1 py2 border-bottom text-dark cursor-pointer text-brand-hover">
+                    <div className="flex align-center" key={fk.id} onClick={component.clickedForeignKey.bind(null, fk)}>
+                        <div>
+                            <h2>{referenceCount}</h2>
+                            <h3>{relationName}</h3>
+                        </div>
+                        <span className="UserNick flex-align-right">
+                            <Icon name='chevronright' width="12px" height="12px" />
+                        </span>
                     </div>
                 </li>
             )
@@ -147,24 +153,24 @@ export default React.createClass({
             idValue = this.getIdValue();
 
         return (
-            <div className="wrapper">
+            <div className="wrapper wrapper--trim">
                 <div className="bordered">
                     <div className="Grid border-bottom">
-                        <div className="Grid-cell border-right">
-                            <div className="wrapper">
+                        <div className="Grid-cell p4 border-right">
+                            <div className="text-brand">
                                 <span>{tableName}</span>
-                                <h2>{idValue}</h2>
+                                <h1>{idValue}</h1>
                             </div>
                         </div>
-                        <div className="Grid-cell Cell--1of3">
-                            <div className="wrapper">
-                                <Icon name='cards' width="12px" height="12px" /> This {tableName} is connected to.
+                        <div className="Grid-cell flex align-center Cell--1of3 bg-alt">
+                            <div className="p4">
+                                <Icon name="connections" width="12px" height="12px" /> This {tableName} is connected to.
                             </div>
                         </div>
                     </div>
                     <div className="Grid">
                         <div className="Grid-cell border-right">{this.renderDetailsTable()}</div>
-                        <div className="Grid-cell Cell--1of3">{this.renderRelationships()}</div>
+                        <div className="Grid-cell Cell--1of3 bg-alt">{this.renderRelationships()}</div>
                     </div>
                 </div>
             </div>