update header style for embedded visualization

frontend/src/metabase/dashboard/components/DashCard.jsx

@@ -138,6 +138,7 @@ export default class DashCard extends Component {
       >
         <Visualization
           className="flex-full"
+          classNameWidgets={isEmbed && "text-grey-2 text-grey-4-hover"}
           error={errorMessage}
           errorIcon={errorIcon}
           isSlow={isSlow}
@@ -163,7 +164,7 @@ export default class DashCard extends Component {
               />
             ) : isEmbed ? (
               <QueryDownloadWidget
-                className="m1 text-brand-hover"
+                className="m1 text-brand-hover text-grey-2"
                 classNameClose="hover-child"
                 card={dashcard.card}
                 params={params}

frontend/src/metabase/visualizations/components/LegendHeader.jsx

@@ -28,6 +28,7 @@ export default class LegendHeader extends Component {
     onChangeCardAndRun: PropTypes.func,
     actionButtons: PropTypes.node,
     description: PropTypes.string,
+    classNameWidgets: PropTypes.string,
   };
 
   static defaultProps = {
@@ -59,6 +60,7 @@ export default class LegendHeader extends Component {
       description,
       onVisualizationClick,
       visualizationIsClickable,
+      classNameWidgets,
     } = this.props;
     const showDots = series.length > 1;
     const isNarrow = this.state.width < 150;
@@ -105,7 +107,7 @@ export default class LegendHeader extends Component {
                       })
                   : null
             }
-            infoClassName={"text-grey-2 text-grey-4-hover"}
+            infoClassName={classNameWidgets}
           />,
           onRemoveSeries &&
             index > 0 && (
@@ -119,7 +121,12 @@ export default class LegendHeader extends Component {
             ),
         ])}
         {actionButtons && (
-          <span className="text-grey-2 text-grey-4-hover flex-no-shrink flex-align-right relative">
+          <span
+            className={cx(
+              classNameWidgets,
+              "flex-no-shrink flex-align-right relative",
+            )}
+          >
             {actionButtons}
           </span>
         )}

frontend/src/metabase/visualizations/components/Visualization.jsx

@@ -92,6 +92,8 @@ type Props = {
   gridSize?: { width: number, height: number },
   // if gridSize isn't specified, compute using this gridSize (4x width, 3x height)
   gridUnit?: number,
+
+  classNameWidgets?: string,
 };
 
 type State = {
@@ -402,7 +404,7 @@ export default class Visualization extends Component {
       </span>
     );
 
-    let { gridSize, gridUnit } = this.props;
+    let { gridSize, gridUnit, classNameWidgets } = this.props;
     if (!gridSize && gridUnit) {
       gridSize = {
         width: Math.round(width / (gridUnit * 4)),
@@ -421,6 +423,7 @@ export default class Visualization extends Component {
         replacementContent ? (
           <div className="p1 flex-no-shrink">
             <LegendHeader
+              classNameWidgets={classNameWidgets}
               series={
                 settings["card.title"]
                   ? // if we have a card title set, use it