Make variables sidebar look nicer (#11553)

* max variables sidebar look nicer

* tweak variable name styling

frontend/src/metabase/query_builder/components/template_tags/TagEditorParam.jsx

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { Link } from "react-router";
 
 import Toggle from "metabase/components/Toggle";
+import Card from "metabase/components/Card";
 import InputBlurChange from "metabase/components/InputBlurChange";
 import Select, { Option } from "metabase/components/Select";
 import ParameterValueWidget from "metabase/parameters/components/ParameterValueWidget";
@@ -126,23 +127,23 @@ export default class TagEditorParam extends Component {
       isDimension && Array.isArray(tag.dimension);
     const hasWidgetOptions = widgetOptions && widgetOptions.length > 0;
     return (
-      <div className="pb2 mb2 border-bottom border-dark">
-        <h3 className="pb2">{tag.name}</h3>
+      <Card className="p2 mb2">
+        <h3 className="pb2 text-brand">{tag.name}</h3>
 
-        <div className="pb1">
-          <h5 className="pb1 text-normal">{t`Filter label`}</h5>
+        <div className="pb3">
+          <h4 className="pb1">{t`Filter label`}</h4>
           <InputBlurChange
             type="text"
             value={tag["display-name"]}
-            className="AdminSelect p1 text-bold text-medium bordered border-medium rounded full"
+            className="AdminSelect p1 text-bold text-dark bordered border-medium rounded full"
             onBlurChange={e =>
               this.setParameterAttribute("display-name", e.target.value)
             }
           />
         </div>
 
-        <div className="pb1">
-          <h5 className="pb1 text-normal">{t`Variable type`}</h5>
+        <div className="pb3">
+          <h4 className="pb1">{t`Variable type`}</h4>
           <Select
             className="border-medium bg-white block"
             value={tag.type}
@@ -159,13 +160,13 @@ export default class TagEditorParam extends Component {
         </div>
 
         {tag.type === "dimension" && (
-          <div className="pb1">
-            <h5 className="pb1 text-normal">
+          <div className="pb3">
+            <h4 className="pb1">
               {t`Field to map to`}
               {tag.dimension == null && (
                 <span className="text-error mx1">(required)</span>
               )}
-            </h5>
+            </h4>
 
             {(!hasSelectedDimensionField ||
               (hasSelectedDimensionField && fieldMetadataLoaded)) && (
@@ -185,8 +186,8 @@ export default class TagEditorParam extends Component {
         )}
 
         {hasSelectedDimensionField && (
-          <div className="pb1">
-            <h5 className="pb1 text-normal">{t`Filter widget type`}</h5>
+          <div className="pb3">
+            <h4 className="pb1">{t`Filter widget type`}</h4>
             <Select
               className="border-med bg-white block"
               value={tag["widget-type"]}
@@ -222,8 +223,8 @@ export default class TagEditorParam extends Component {
           </div>
         )}
 
-        <div className="flex align-center pb1">
-          <h5 className="text-normal mr1">{t`Required?`}</h5>
+        <div className="pb2">
+          <h4 className="pb1">{t`Required?`}</h4>
           <Toggle
             value={tag.required}
             onChange={value => this.setRequired(value)}
@@ -232,8 +233,8 @@ export default class TagEditorParam extends Component {
 
         {((tag.type !== "dimension" && tag.required) ||
           (tag.type === "dimension" || tag["widget-type"])) && (
-          <div className="pb1">
-            <h5 className="pb1 text-normal">{t`Default filter widget value`}</h5>
+          <div className="pb2">
+            <h4 className="pb1">{t`Default filter widget value`}</h4>
             <ParameterValueWidget
               parameter={{
                 type:
@@ -248,7 +249,7 @@ export default class TagEditorParam extends Component {
             />
           </div>
         )}
-      </div>
+      </Card>
     );
   }
 }