Merge pull request #1863 from metabase/0.14.1-flex-cleanup

0.14.1 flex cleanup

frontend/src/admin/datamodel/components/database/MetadataHeader.jsx

@@ -58,11 +58,11 @@ export default class MetadataHeader extends Component {
 
     render() {
         return (
-            <div className="MetadataEditor-header flex align-center">
-                <div className="MetadataEditor-headerSection h2 mb2">
+            <div className="MetadataEditor-header clearfix">
+                <div className="MetadataEditor-headerSection h2 mb2 float-left">
                     <span className="text-grey-4">Current database:</span> {this.renderDbSelector()}
                 </div>
-                <div className="MetadataEditor-headerSection flex-align-right flex align-center">
+                <div className="MetadataEditor-headerSection float-right flex align-center">
                     <SaveStatus ref="status" />
                     <span className="mr1">Show original schema</span>
                     <Toggle value={this.props.isShowingSchema} onChange={this.props.toggleShowSchema} />

frontend/src/admin/settings/components/SettingsHeader.jsx

@@ -5,11 +5,11 @@ import SaveStatus from "metabase/components/SaveStatus.jsx";
 export default class SettingsHeader extends Component {
     render() {
         return (
-            <div className="MetadataEditor-header flex align-center relative">
-                <div className="MetadataEditor-headerSection h2 text-grey-4">
+            <div className="MetadataEditor-header clearfix relative">
+                <div className="MetadataEditor-headerSection float-left h2 text-grey-4">
                     Settings
                 </div>
-                <div className="MetadataEditor-headerSection absolute right top bottom flex layout-centered">
+                <div className="MetadataEditor-headerSection absolute right float-right top bottom flex layout-centered">
                     <SaveStatus ref="status" />
                 </div>
             </div>

frontend/src/css/core/base.css

@@ -55,3 +55,7 @@ textarea {
   pointer-events: none;
   opacity: 0.4;
 }
+
+.MB-lightBG {
+  background-color: #f9fbfc;
+}

frontend/src/dashboard/components/Dashboard.jsx

@@ -21,6 +21,9 @@ export default class Dashboard extends Component {
     };
 
     async componentDidMount() {
+        // HACK: apply a css class to the page body so that we can ensure the bg-color is maintained
+        document.body.classList.add("MB-lightBG");
+
         try {
             await this.props.dispatch(fetchDashboard(this.props.selectedDashboard));
         } catch (error) {
@@ -32,17 +35,22 @@ export default class Dashboard extends Component {
         }
     }
 
+    componentWillUnmount() {
+        // HACK: remove our bg-color css applied when component mounts
+        document.body.classList.remove("MB-lightBG");
+    }
+
     render() {
         let { dashboard } = this.props;
         let { error } = this.state;
         return (
-            <LoadingAndErrorWrapper className="Dashboard flex flex-full" loading={!dashboard} error={error}>
+            <LoadingAndErrorWrapper className="Dashboard full-height" loading={!dashboard} error={error}>
             {() =>
-                <div className="full flex flex-column">
+                <div className="full">
                     <header className="bg-white border-bottom">
                         <DashboardHeader {...this.props} />
                     </header>
-                    <div className="Dash-wrapper wrapper flex-full">
+                    <div className="Dash-wrapper wrapper">
                         { dashboard.ordered_cards.length === 0 ?
                             <div className="absolute top bottom left right flex flex-column layout-centered">
                                 <span className="QuestionCircle">?</span>