fix empty state and night mode sans fitViewport (#9315)

* fix empty state and night mode sans fitViewport

* min-height > height

frontend/src/metabase/css/dashboard.css

@@ -26,6 +26,10 @@
 }
 
 /* Fullscreen mode */
+.Dashboard.Dashboard--fullscreen {
+  min-height: 100vh;
+}
+
 .Dashboard.Dashboard--fullscreen .Header-button {
   color: var(--color-text-light);
 }

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

@@ -4,12 +4,14 @@
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import { Box } from "grid-styled";
 
 import DashboardHeader from "../components/DashboardHeader.jsx";
 import DashboardGrid from "../components/DashboardGrid.jsx";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
 import { t } from "c-3po";
 import Parameters from "metabase/parameters/components/Parameters.jsx";
+import EmptyState from "metabase/components/EmptyState";
 
 import DashboardControls from "../hoc/DashboardControls";
 
@@ -280,15 +282,15 @@ export default class Dashboard extends Component {
               )}
             <div className="wrapper">
               {dashboard.ordered_cards.length === 0 ? (
-                <div className="absolute z1 top bottom left right flex flex-column layout-centered">
-                  <span className="QuestionCircle">?</span>
-                  <div className="text-normal mt3 mb1">
-                    {t`This dashboard is looking empty.`}
-                  </div>
-                  <div className="text-normal text-light">
-                    {t`Add a question to start making it useful!`}
-                  </div>
-                </div>
+                <Box mt={[2, 4]} color={isNightMode ? "white" : "inherit"}>
+                  <EmptyState
+                    illustrationElement={
+                      <span className="QuestionCircle">?</span>
+                    }
+                    title={t`This dashboard is looking empty.`}
+                    message={t`Add a question to start making it useful!`}
+                  />
+                </Box>
               ) : (
                 <DashboardGrid
                   {...this.props}

frontend/src/metabase/dashboard/containers/DashboardApp.jsx

@@ -4,7 +4,6 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import { push } from "react-router-redux";
 import title from "metabase/hoc/Title";
-import fitViewport from "metabase/hoc/FitViewPort";
 
 import Dashboard from "metabase/dashboard/components/Dashboard.jsx";
 
@@ -67,7 +66,6 @@ type DashboardAppState = {
 
 @connect(mapStateToProps, mapDispatchToProps)
 @title(({ dashboard }) => dashboard && dashboard.name)
-@fitViewport
 export default class DashboardApp extends Component {
   state: DashboardAppState = {
     addCardOnLoad: null,
@@ -82,7 +80,7 @@ export default class DashboardApp extends Component {
 
   render() {
     return (
-      <div className={this.props.fitClassNames}>
+      <div>
         <Dashboard addCardOnLoad={this.state.addCardOnLoad} {...this.props} />
         {/* For rendering modal urls */}
         {this.props.children}