Merge branch 'automagic-dashboards-improvments1' of...

Merge branch 'automagic-dashboards-improvments1' of github.com:metabase/metabase into automagic-dashboards-improvments1

frontend/src/metabase/css/core/spacing.css

@@ -22,6 +22,10 @@
   margin-top: auto;
 }
 
+.mb-auto {
+  margin-bottom: auto;
+}
+
 /* padding */
 
 /* 0 */

frontend/src/metabase/setup/containers/PostSetupApp.jsx

@@ -6,6 +6,7 @@ import { Link } from "react-router";
 import ExplorePane from "metabase/components/ExplorePane";
 import MetabotLogo from "metabase/components/MetabotLogo";
 import Quotes from "metabase/components/Quotes";
+import { withBackground } from "metabase/hoc/Background";
 
 import { MetabaseApi, AutoApi } from "metabase/services";
 import _ from "underscore";
@@ -40,6 +41,7 @@ type State = {
   sampleCandidates: ?(Candidate[]),
 };
 
+@withBackground("bg-slate-extra-light")
 export default class PostSetupApp extends Component {
   props: Props;
   state: State = {
@@ -124,52 +126,57 @@ export default class PostSetupApp extends Component {
     let { candidates, sampleCandidates, isSample } = this.state;
 
     return (
-      <div className="bg-slate-extra-light full-height flex layout-centered">
-        <div style={{ maxWidth: 587 }}>
-          {!candidates ? (
-            <div>
-              <h2 className="text-centered mx4 px4">
-                {t`We’ll show you some interesting explorations of your data in
-                just a few minutes.`}
-              </h2>
-              <BorderedPanel className="my4 flex">
-                <MetabotLogo />
-                <div className="flex-full ml3 mt1">
-                  <div className="mb1">
-                    <Quotes quotes={QUOTES} period={2000} />
+      <div className="full-height">
+        <div className="flex full-height">
+          <div
+            style={{ maxWidth: 587 }}
+            className="ml-auto mr-auto mt-auto mb-auto py2"
+          >
+            {!candidates ? (
+              <div>
+                <h2 className="text-centered mx4 px4">
+                  {t`We’ll show you some interesting explorations of your data in
+                  just a few minutes.`}
+                </h2>
+                <BorderedPanel className="my4 flex">
+                  <MetabotLogo />
+                  <div className="flex-full ml3 mt1">
+                    <div className="mb1">
+                      <Quotes quotes={QUOTES} period={2000} />
+                    </div>
+                    <ThinProgressBar />
                   </div>
-                  <ThinProgressBar />
-                </div>
-              </BorderedPanel>
-              {sampleCandidates && (
-                <BorderedPanel>
-                  <ExplorePane
-                    options={sampleCandidates}
-                    title={null}
-                    description={t`This seems to be taking a while. In the meantime, you can check out one of these example explorations to see what Metabase can do for you.`}
-                  />
                 </BorderedPanel>
-              )}
+                {sampleCandidates && (
+                  <BorderedPanel>
+                    <ExplorePane
+                      options={sampleCandidates}
+                      title={null}
+                      description={t`This seems to be taking a while. In the meantime, you can check out one of these example explorations to see what Metabase can do for you.`}
+                    />
+                  </BorderedPanel>
+                )}
+              </div>
+            ) : (
+              <BorderedPanel>
+                <ExplorePane
+                  options={candidates}
+                  description={
+                    isSample
+                      ? t`Once you connect your own data, I can show you some automatic explorations called x-rays. Here are some examples with sample data.`
+                      : t`I took a look at the data you just connected, and I put together some explorations of interesting metrics I found. Hope you like them!`
+                  }
+                />
+              </BorderedPanel>
+            )}
+            <div className="m4 text-centered">
+              <Link
+                to="/"
+                className="no-decoration text-bold text-grey-3 text-grey-4-hover"
+              >
+                {t`No thanks, I’ll set things up on my own`}
+              </Link>
             </div>
-          ) : (
-            <BorderedPanel>
-              <ExplorePane
-                options={candidates}
-                description={
-                  isSample
-                    ? t`Once you connect your own data, I can show you some automatic explorations called x-rays. Here are some examples with sample data.`
-                    : t`I took a look at the data you just connected, and I put together some explorations of interesting metrics I found. Hope you like them!`
-                }
-              />
-            </BorderedPanel>
-          )}
-          <div className="m4 text-centered">
-            <Link
-              to="/"
-              className="no-decoration text-bold text-grey-3 text-grey-4-hover"
-            >
-              {t`No thanks, I’ll set things up on my own`}
-            </Link>
           </div>
         </div>
       </div>