More work on metric adding screen

frontend/src/metabase/query_builder/components/AddMetricModal.jsx

 import React, { Component } from "react";
+import cx from "classnames";
 
 import type {TableMetadata} from "metabase/meta/types/Metadata";
 import ModalContent from "metabase/components/ModalContent";
 import EmptyState from "metabase/components/EmptyState";
 
-const AddMetricButton = ({ image, title, description }) =>
-    <div className="bg-white p2 flex align-center rounded" style={{height: "500px", border: "1px solid #DCE1E4", boxShadow: "0 1px 3px 0 #DCE1E4"}}>
-        <EmptyState
-            message={
-                <div className="mt4">
-                    <h2 className="text-grey-5">{title}</h2>
-                    <p className="text-grey-4">{description}</p>
-                </div>
-            }
-            image={image}
-            smallDescription
-        />
-    </div>;
+class AddMetricButton extends Component {
+   props: {
+       image: string,
+       title: string,
+       description: string,
+       onClick: () => void
+   };
+
+   state = {
+       hover: false
+   };
+
+   render() {
+       const { image, title, description, onClick } = this.props;
+       const { hover } = this.state;
+
+       return (
+           <div className="bg-white p2 flex align-center rounded cursor-pointer transition-all"
+                style={{
+                    border: "1px solid rgba(220,225,228,0.50)",
+                    boxShadow: hover ? "0 3px 8px 0 rgba(220,220,220,0.50)" : "0 1px 3px 0 rgba(220,220,220,0.50)",
+                    height: "500px"
+                }}
+                onMouseOver={() => this.setState({hover: true})}
+                onMouseLeave={() => this.setState({hover: false})}
+                onClick={onClick}
+           >
+               <EmptyState
+                   message={
+                       <div className="mt4">
+                           <h2 className={cx("transition-all", {"text-grey-5": !hover}, {"text-brand": hover})}>{title}</h2>
+                           <p className={"text-grey-4"}>{description}</p>
+                       </div>
+                   }
+                   image={image}
+                   smallDescription
+               />
+           </div>
+       );
+   }
+}
 
 export default class AddMetricModal extends Component {
     props: {
@@ -24,8 +53,40 @@ export default class AddMetricModal extends Component {
         onClose: () => void
     };
 
+    state = {
+        addingSavedMetric: false
+    }
+
     render() {
         const { onClose } = this.props;
+        const { addingSavedMetric } = this.state;
+
+        const MetricTypeSelector = () =>
+            <div className="flex-full full ml-auto mr-auto pl1 pr1 mt2 mb2 flex align-center"
+                 style={{maxWidth: "1000px"}}>
+                <ol className="flex-full Grid Grid--guttersXXl Grid--full small-Grid--1of2">
+                    <li className="Grid-cell">
+                        {/*TODO: Move illustrations to the new location in file hierarchy. At the same time put an end to the equal-size-@2x ridicule. */}
+                        <AddMetricButton
+                            image="/app/img/questions_illustration"
+                            title="Add a metric"
+                            description="We’ll show you saved metrics that are compatible with the metric you’re currently looking at."
+                            onClick={() => this.setState({addingSavedMetric: true})}
+                        />
+                    </li>
+                    <li className="Grid-cell">
+                        <AddMetricButton
+                            image="/app/img/new_metric"
+                            title="Create a new metric"
+                            description="Couldn’t find the thing you were looking for? If you want something done right, do it yourself, that’s your motto."
+                            onClick={() => alert("Not implemented yet.")}
+                        />
+                    </li>
+                </ol>
+            </div>;
+
+        const SavedMetricSelector = () =>
+            <div>Saved metrics chosen here</div>;
 
         return (
             <ModalContent
@@ -33,25 +94,7 @@ export default class AddMetricModal extends Component {
                 onClose={onClose}
                 className="bg-grey-0"
             >
-                <div className="flex-full full ml-auto mr-auto pl1 pr1 mt2 mb2 flex align-center"
-                     style={{maxWidth: "1000px"}}>
-                    <ol className="flex-full Grid Grid--guttersXXl Grid--full small-Grid--1of2">
-                        <li className="Grid-cell">
-                            <AddMetricButton
-                                image="/app/img/empty_dashboard"
-                                title="Add a metric"
-                                description="We’ll show you saved metrics that are compatible with the metric you’re currently looking at."
-                            />
-                        </li>
-                        <li className="Grid-cell">
-                            <AddMetricButton
-                                image="/app/img/empty_dashboard"
-                                title="Create a new metric"
-                                description="Couldn’t find the thing you were looking for? If you want something done right, do it yourself, that’s your motto."
-                            />
-                        </li>
-                    </ol>
-                </div>
+                { addingSavedMetric ? <SavedMetricSelector /> : <MetricTypeSelector />}
             </ModalContent>
         )
     }

frontend/src/metabase/query_builder/containers/CardBuilder.jsx

@@ -194,7 +194,7 @@ export default class CardBuilder extends Component {
     };
 
     render() {
-        const { card, isDirty, databases, uiControls, mode } = this.props;
+        const { card, databases, uiControls, mode } = this.props;
         const showDrawer = uiControls.isShowingDataReference || uiControls.isShowingTemplateTagsEditor;
         const ModeFooter = mode && mode.ModeFooter;