Merge pull request #795 from metabase/add_to_dash_sizing

Fix Add to Dashboard font sizing and spacing

resources/frontend_client/app/components/popover/popover.css

@@ -31,6 +31,14 @@
 	border-bottom: 10px solid transparent;
 }
 
+.PopoverBody .Form-input {
+	font-size: 1rem;
+}
+
+.PopoverBody .Form-field {
+	margin-bottom: 0.75rem;
+}
+
 .PopoverHeader {
 	display: flex;
 	border-bottom: 1px solid var(--border-color);

resources/frontend_client/app/css/query_builder.css

@@ -586,3 +586,7 @@
 .QueryBuilder .Entity-attribution {
     margin-left: 0.5rem;
 }
+
+.PopoverBody.AddToDashboard {
+    min-width: 25em;
+}

resources/frontend_client/app/query_builder/add_to_dashboard.react.js

@@ -34,7 +34,7 @@ export default React.createClass({
             return (
                 <Popover
                     tetherOptions={tetherOptions}
-                    className="PopoverBody PopoverBody--withArrow"
+                    className="PopoverBody PopoverBody--withArrow AddToDashboard"
                 >
                     <AddToDashboardPopover
                         card={this.props.card}

resources/frontend_client/app/query_builder/add_to_dashboard_popover.react.js

@@ -190,7 +190,7 @@ export default React.createClass({
 
         return (
             <form className="Form-new" onSubmit={this.createNewDash}>
-                <div className="Form-offset flex align-center mr4">
+                <div className="Form-offset flex align-center mr4 mb2">
                     <h3 className="flex-full">Create a new dashboard</h3>
                     <a className="text-grey-3" onClick={this.toggleCreate}>
                         <Icon name='close' width="12px" height="12px"/>
@@ -219,7 +219,7 @@ export default React.createClass({
                     showCharm={false}
                     errors={this.state.errors}>
                     <label className="Select Form-offset">
-                        <select ref="public_perms">
+                        <select className="mt1" ref="public_perms">
                             {privacyOptions}
                         </select>
                     </label>