collection card sizes

frontend/src/metabase/questions/components/CollectionButtons.jsx

 import React, { Component, PropTypes } from "react";
 import { Link } from "react-router";
+import cx from "classnames";
 
 import Icon from "metabase/components/Icon";
 import CollectionActions from "./CollectionActions";
@@ -7,28 +8,80 @@ import ArchiveCollectionWidget from "../containers/ArchiveCollectionWidget";
 
 const COLLECTION_ICON_SIZE = 64;
 
+const COLLECTION_BOX_CLASSES = "relative block p4 hover-parent hover--visibility cursor-pointer text-centered transition-background";
+
 const CollectionButtons = ({ collections, isAdmin, push }) =>
-    <ol className="">
+    <ol className="flex">
         { collections
             .map(collection => <CollectionButton {...collection} push={push} isAdmin={isAdmin} />)
             .concat(isAdmin ? [<NewCollectionButton push={push} />] : [])
             .map((element, index) =>
-                <li key={index} className="inline-block pr2 pb2" style={{ width: "25%" }}>
+                <li key={index} className="mr4">
                     {element}
                 </li>
             )
         }
     </ol>
 
+class CollectionButton extends Component {
+    constructor() {
+        super();
+        this.state = { hovered: false };
+    }
+
+    render () {
+        const { id, name, color, slug, isAdmin, push } = this.props;
+        return (
+            <div
+                onMouseEnter={() => this.setState({ hovered: true })}
+                onMouseLeave={() => this.setState({ hovered: false })}
+            >
+                <div
+                    className={cx(COLLECTION_BOX_CLASSES, 'text-white-hover')}
+                    style={{
+                        width: 290,
+                        height: 180,
+                        borderRadius: 10,
+                        backgroundColor: this.state.hovered ? color : '#fafafa'
+                    }}
+                    onClick={() => push(`/questions/collections/${slug}`)}
+                >
+                    { isAdmin &&
+                        <div className="absolute top right mt2 mr2 hover-child">
+                            <CollectionActions>
+                                <Link to={"/collections/permissions?collectionId=" + id}>
+                                    <Icon name="lockoutline" tooltip="Set collection permissions" />
+                                </Link>
+                                <ArchiveCollectionWidget collectionId={id} />
+                            </CollectionActions>
+                        </div>
+                    }
+                    <Icon
+                        className="mb2 mt2"
+                        name="collection"
+                        size={COLLECTION_ICON_SIZE}
+                        style={{ color: this.state.hovered ? '#fff' : color }}
+                    />
+                    <h3>{ name }</h3>
+                </div>
+            </div>
+        )
+    }
+}
+
 const NewCollectionButton = ({ push }) =>
     <div
-        className="relative block p4 hover-parent cursor-pointer text-centered text-brand-hover bg-grey-0 bg-light-blue-hover no-decoration"
-        style={{ borderRadius: 10 }}
+        className={cx(COLLECTION_BOX_CLASSES, 'bg-brand-hover', 'text-brand', 'text-white-hover', 'bg-grey-0')}
+        style={{
+            width: 290,
+            height: 180,
+            borderRadius: 10
+        }}
         onClick={() => push(`/collections/create`)}
     >
         <div>
             <div
-                className="flex align-center justify-center text-brand ml-auto mr-auto mb4 mt2"
+                className="flex align-center justify-center ml-auto mr-auto mb2 mt2"
                 style={{
                     border: '2px solid #D8E8F5',
                     borderRadius: COLLECTION_ICON_SIZE,
@@ -43,32 +96,7 @@ const NewCollectionButton = ({ push }) =>
                 />
             </div>
         </div>
-        <h3 className="text-brand">New collection</h3>
-    </div>
-
-const CollectionButton = ({ id, name, color, slug, isAdmin, push }) =>
-    <div
-        className="relative block p4 hover-parent cursor-pointer hover--visibility text-centered text-brand-hover bg-grey-0 bg-light-blue-hover no-decoration"
-        style={{ borderRadius: 10 }}
-        onClick={() => push(`/questions/collections/${slug}`)}
-    >
-        { isAdmin &&
-            <div className="absolute top right mt2 mr2 hover-child">
-                <CollectionActions>
-                    <Link to={"/collections/permissions?collectionId=" + id}>
-                        <Icon name="lockoutline" tooltip="Set collection permissions" />
-                    </Link>
-                    <ArchiveCollectionWidget collectionId={id} />
-                </CollectionActions>
-            </div>
-        }
-        <Icon
-            className="mb4 mt2"
-            name="collection"
-            size={COLLECTION_ICON_SIZE}
-            style={{ color }}
-        />
-        <h3>{ name }</h3>
+        <h3>New collection</h3>
     </div>
 
 export default CollectionButtons;