Fix style, merge classNames in Icon

frontend/src/metabase/components/Icon.jsx

 /*eslint-disable react/no-danger */
 
 import React, { Component } from "react";
-import PropTypes from "prop-types";
 import RetinaImage from "react-retina-image";
+import cx from "classnames";
 
 import { loadIcon } from 'metabase/icon_paths';
 
@@ -10,16 +10,14 @@ import Tooltipify from "metabase/hoc/Tooltipify";
 
 @Tooltipify
 export default class Icon extends Component {
-    static propTypes = {
-      name: PropTypes.string.isRequired,
-      width: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number,
-      ]),
-      height: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number,
-      ]),
+    static props: {
+        name: string,
+        size?: string | number,
+        width?: string | number,
+        height?: string | number,
+        scale?: string | number,
+        tooltip?: string, // using Tooltipify
+        className?: string
     }
 
     render() {
@@ -28,7 +26,8 @@ export default class Icon extends Component {
             return null;
         }
 
-        const props = { ...icon.attrs, ...this.props };
+        const className = cx(icon.attrs.className, this.props.className)
+        const props = { ...icon.attrs, ...this.props, className };
         for (const prop of ["width", "height", "size", "scale"]) {
             if (typeof props[prop] === "string") {
                 props[prop] = parseInt(props[prop], 10);

frontend/src/metabase/dashboards/components/DashboardList.jsx

@@ -41,6 +41,8 @@ class DashboardListItem extends Component {
                     size={21}
                     onClick={(e) => {
                         e.preventDefault();
+
+                        // Let the 0.2s transition finish before the archival API call (`setArchived` action)
                         this.setState({fadingOut: true})
                         setTimeout(() => setArchived(id, !archived, true), 300);
                     } }
@@ -66,16 +68,14 @@ class DashboardListItem extends Component {
 
         const dashboardIcon =
             <Icon name="dashboard"
-                  className={cx("ml2", "text-grey-1")}
+                  className={"ml2 text-grey-1"}
                   size={25}/>
 
         return (
             <li className="Grid-cell shrink-below-content-size" style={{maxWidth: "550px"}}>
                 <Link to={Urls.dashboard(id)}
                       data-metabase-event={"Navbar;Dashboards;Open Dashboard;" + id}
-                      className={cx(
-                          "flex align-center border-box p2 rounded no-decoration transition-background bg-white transition-all relative"
-                      )}
+                      className={"flex align-center border-box p2 rounded no-decoration transition-background bg-white transition-all relative"}
                       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)",
@@ -85,9 +85,9 @@ class DashboardListItem extends Component {
                       }}
                       onMouseOver={() => this.setState({hover: true})}
                       onMouseLeave={() => this.setState({hover: false})}>
-                    <div className={cx("flex-full shrink-below-content-size")}>
+                    <div className={"flex-full shrink-below-content-size"}>
                         <div className="flex align-center">
-                            <div className={cx("flex-full shrink-below-content-size")}>
+                            <div className={"flex-full shrink-below-content-size"}>
                                 <h3
                                     className={cx(
                                         "text-ellipsis text-nowrap overflow-hidden text-bold transition-all",
@@ -99,7 +99,7 @@ class DashboardListItem extends Component {
                                     <Ellipsified>{name}</Ellipsified>
                                 </h3>
                                 <div
-                                    className={cx("text-smaller text-uppercase text-bold text-grey-3")}>
+                                    className={"text-smaller text-uppercase text-bold text-grey-3"}>
                                     {/* NOTE: Could these time formats be centrally stored somewhere? */}
                                     {moment(created_at).format('MMM D, YYYY')}
                                 </div>

frontend/src/metabase/dashboards/containers/Dashboards.jsx

@@ -154,14 +154,14 @@ export class Dashboards extends Component {
                     <div className="flex-align-right cursor-pointer text-grey-5">
                         <Link to="/dashboards/archive">
                             <Icon name="viewArchive"
-                                  className="mr2 text-brand-hover Icon Icon-viewArchive"
+                                  className="mr2 text-brand-hover"
                                   tooltip="View the archive"
                                   size={20}/>
                         </Link>
 
                         {!noDashboardsCreated &&
                         <Icon name="add"
-                              className="text-brand-hover Icon Icon-add"
+                              className="text-brand-hover"
                               tooltip="Add new dashboard"
                               size={20}
                               onClick={this.showCreateDashboard}/>