Merge branch 'mb_the_next_generation' of github.com:metabase/metabase-init...

Merge branch 'mb_the_next_generation' of github.com:metabase/metabase-init into mb_the_next_generation

resources/frontend_client/app/card/partials/_card_favorite.html

@@ -4,8 +4,8 @@
         width="18px"
         height="18px"
         class="text-grey-1"
-        ng-class="{ 'text-grey-1 text-gold-hover' : !favorite,
-                    'text-gold text-grey-1-hover': favorite,
+        ng-class="{ 'text-grey-1 text-grey-3-hover' : !favorite,
+                    'text-gold': favorite,
                     'transition-color': true
                     }"
     >

resources/frontend_client/app/dashboard/partials/dash_view.html

@@ -21,9 +21,7 @@
                 <div class="Entity">
                     <div class="flex align-center">
                         <h4 class="Entity-title">{{dashboard.name}}</h4>
-                        <span class="Badge Badge--permissions ml2" ng-if="dashboard.public_perms === 0">
-                            <mb-icon name="lock" width="12px" height="12px"></mb-icon>
-                        </span>
+                        <mb-icon class="ml1 text-grey-4" name="lock" width="12px" height="12px" ng-if="dashboard.public_perms === 0"></mb-icon>
                         <a class="cursor-pointer link ml1" href="#" mb-dashboard-saver ng-attr-dashboard="dashboard" ng-attr-callback="notifyDashboardSaved">Edit</a>
                     </div>
                     <span class="Entity-attribution">

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

@@ -445,7 +445,7 @@ export default React.createClass({
             return (
                 <a className="QueryOption flex align-center p1 lg-p2 ml2" onClick={this.addFilter}>
                     <Icon name='filter' width={16} height={ 16} viewBox='0 0 16 16' />
-                    Filter {(this.props.options) ? this.props.options.name : ""}
+                    <span className="mr1">Filter</span> <span>{(this.props.options) ? this.props.options.name : ''}</span>
                 </a>
             );
         }

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

@@ -176,12 +176,21 @@ export default React.createClass({
             var component = this;
             var relationships = this.props.tableForeignKeys.map(function(fk) {
                 var relationName = (fk.origin.table.entity_name) ? fk.origin.table.entity_name : fk.origin.table.name;
-                return (<a key={fk.id} href="#" onClick={component.clickedForeignKey.bind(null, fk)}>{relationName}</a>)
+                return (
+                    <li className="block mb1 lg-mb2">
+                        <a className="QueryOption inline-block no-decoration p2 lg-p2" key={fk.id} href="#" onClick={component.clickedForeignKey.bind(null, fk)}>
+                            {relationName}
+                        </a>
+                    </li>
+                )
             });
 
             return (
-                <div className="VisualizationSettings QueryBuilder-section clearfix">
-                    {relationships}
+                <div className="VisualizationSettings wrapper QueryBuilder-section clearfix">
+                    <h3 className="mb1 lg-mb2">Relationships:</h3>
+                    <ul>
+                        {relationships}
+                    </ul>
                 </div>
             );
 

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

@@ -73,7 +73,7 @@ export default React.createClass({
 
             // NOTE: that the values to our function call look off, but that's because we are un-pivoting them
             if (this.props.cellIsClickableFn(0, rowIndex)) {
-                return (<a key={key} href="#" onClick={this.cellClicked.bind(null, 0, rowIndex)}>{cellValue}</a>);
+                return (<a key={key} className="link" href="#" onClick={this.cellClicked.bind(null, 0, rowIndex)}>{cellValue}</a>);
             } else {
                 return (<div key={key}>{cellValue}</div>);
             }

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

@@ -125,7 +125,7 @@ export default React.createClass({
 
         var key = 'cl'+rowIndex+'_'+cellDataKey;
         if (this.props.cellIsClickableFn(rowIndex, cellDataKey)) {
-            return (<a key={key} href="#" onClick={this.cellClicked.bind(null, rowIndex, cellDataKey)}>{cellData}</a>);
+            return (<a key={key} className="link" href="#" onClick={this.cellClicked.bind(null, rowIndex, cellDataKey)}>{cellData}</a>);
         } else {
             return (<div key={key}>{cellData}</div>);
         }

resources/frontend_client/index.html

@@ -30,9 +30,7 @@
                             <li ng-repeat="dash in dashboards">
                                 <a class="Dropdown-item link flex align-center text-normal" href="/dash/{{dash.id}}">
                                     {{dash.name}}
-                                    <span class="Badge Badge--permissions flex flex-align-right align-center" ng-if="dash.public_perms === 0">
-                                        <mb-icon name="lock" width="12px" height="12px">
-                                    </span>
+                                    <mb-icon class="ml1 text-grey-4 flex flex-align-right align-center" name="lock" width="12px" height="12px" ng-if="dash.public_perms === 0"></mb-icon>
                                 </a>
                             </li>
                         </ul>