Colors setting title

frontend/src/metabase/lib/visualization_settings.js

@@ -10,6 +10,7 @@ import {
 
 import { isNumeric, isDate, isMetric, isDimension, hasLatitudeAndLongitudeColumns } from "metabase/lib/schema_metadata";
 import Query from "metabase/lib/query";
+import { capitalize } from "metabase/lib/formatting";
 
 import { getCardColors, getFriendlyName } from "metabase/visualizations/lib/utils";
 
@@ -298,6 +299,8 @@ const SETTINGS = {
     },
     "graph.colors": {
         section: "Display",
+        getTitle: ([{ card: { display } }]) =>
+            capitalize(display === "scatter" ? "bubble" : display) + " Colors",
         widget: ChartSettingColorsPicker,
         readDependencies: ["graph.dimensions", "graph.metrics"],
         getDefault: ([{ card, data }], vizSettings) => {
@@ -694,6 +697,7 @@ function getSettingWidget(id, vizSettings, series, onChangeSettings) {
         ...settingDef,
         id: id,
         value: value,
+        title: settingDef.getTitle ? settingDef.getTitle(series, vizSettings) : settingDef.title,
         hidden: settingDef.getHidden ? settingDef.getHidden(series, vizSettings) : false,
         disabled: settingDef.getDisabled ? settingDef.getDisabled(series, vizSettings) : false,
         props: {

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

@@ -27,7 +27,7 @@ const ChartSettingsTabs = ({ tabs, selectTab, activeTab}) =>
 const Widget = ({ title, hidden, disabled, widget, value, onChange, props }) => {
     const W = widget;
     return (
-        <div className={cx("mb3", { hide: hidden, disable: disabled })}>
+        <div className={cx("mb2", { hide: hidden, disable: disabled })}>
             { title && <h4 className="mb1">{title}</h4> }
             { W && <W value={value} onChange={onChange} {...props}/> }
         </div>