small setup fixes (#8017)

frontend/src/metabase/setup/components/CollapsedStep.jsx

@@ -27,6 +27,7 @@ export default class CollapsedStep extends Component {
       rounded: true,
       full: true,
       relative: true,
+      "bg-white": true,
       "SetupStep--completed shadowed": isCompleted,
       "SetupStep--todo": !isCompleted,
     });

frontend/src/metabase/setup/components/DatabaseConnectionStep.jsx

@@ -158,7 +158,7 @@ export default class DatabaseConnectionStep extends Component {
       );
     } else {
       return (
-        <section className="SetupStep rounded full relative SetupStep--active">
+        <section className="SetupStep bg-white rounded full relative SetupStep--active">
           <StepTitle title={stepText} circleText={"2"} />
           <div className="mb4">
             <div style={{ maxWidth: 600 }} className="Form-field Form-offset">

frontend/src/metabase/setup/components/DatabaseSchedulingStep.jsx

@@ -62,7 +62,7 @@ export default class DatabaseSchedulingStep extends Component {
       );
     } else {
       return (
-        <section className="SetupStep rounded full relative SetupStep--active">
+        <section className="SetupStep bg-white rounded full relative SetupStep--active">
           <StepTitle title={stepText} circleText={schedulingIcon} />
           <div className="mb4">
             <div className="text-default">

frontend/src/metabase/setup/components/PreferencesStep.jsx

@@ -69,7 +69,7 @@ export default class PreferencesStep extends Component {
       );
     } else {
       return (
-        <section className="SetupStep rounded full relative SetupStep--active">
+        <section className="SetupStep bg-white rounded full relative SetupStep--active">
           <StepTitle title={stepText} circleText={"3"} />
           <form onSubmit={this.formSubmitted.bind(this)} noValidate>
             <div className="Form-field Form-offset">

frontend/src/metabase/setup/components/Setup.jsx

@@ -138,7 +138,7 @@ export default class Setup extends Component {
               />
 
               {setupComplete ? (
-                <section className="SetupStep rounded SetupStep--active flex flex-column layout-centered p4">
+                <section className="SetupStep bg-white rounded SetupStep--active flex flex-column layout-centered p4">
                   <h1
                     style={{ fontSize: "xx-large" }}
                     className="text-light pt2 pb2"

frontend/src/metabase/setup/components/UserStep.jsx

 /* eslint "react/prop-types": "warn" */
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import { Box, Flex } from "grid-styled";
 import { t } from "c-3po";
 import FormField from "metabase/components/form/FormField.jsx";
 import FormLabel from "metabase/components/form/FormLabel.jsx";
@@ -166,7 +167,7 @@ export default class UserStep extends Component {
       );
     } else {
       return (
-        <section className="SetupStep SetupStep--active rounded full relative">
+        <section className="SetupStep SetupStep--active rounded bg-white full relative">
           <StepTitle title={stepText} circleText={"1"} />
           <form
             name="userForm"
@@ -175,43 +176,45 @@ export default class UserStep extends Component {
             className="mt2"
           >
             <FormField
-              className="Grid mb3"
+              className="mb3"
               fieldName="first_name"
               formError={formError}
             >
-              <div>
-                <FormLabel
-                  title={t`First name`}
-                  fieldName="first_name"
-                  formError={formError}
-                />
-                <input
-                  className="Form-input Form-offset full"
-                  name="first_name"
-                  defaultValue={userDetails ? userDetails.first_name : ""}
-                  placeholder="Johnny"
-                  required
-                  autoFocus={true}
-                  onChange={this.onFirstNameChange}
-                />
-                <span className="Form-charm" />
-              </div>
-              <div>
-                <FormLabel
-                  title={t`Last name`}
-                  fieldName="last_name"
-                  formError={formError}
-                />
-                <input
-                  className="Form-input Form-offset"
-                  name="last_name"
-                  defaultValue={userDetails ? userDetails.last_name : ""}
-                  placeholder="Appleseed"
-                  required
-                  onChange={this.onLastNameChange}
-                />
-                <span className="Form-charm" />
-              </div>
+              <Flex align="center">
+                <Box>
+                  <FormLabel
+                    title={t`First name`}
+                    fieldName="first_name"
+                    formError={formError}
+                  />
+                  <input
+                    className="Form-input Form-offset"
+                    name="first_name"
+                    defaultValue={userDetails ? userDetails.first_name : ""}
+                    placeholder="Johnny"
+                    required
+                    autoFocus={true}
+                    onChange={this.onFirstNameChange}
+                  />
+                  <span className="Form-charm" />
+                </Box>
+                <Box>
+                  <FormLabel
+                    title={t`Last name`}
+                    fieldName="last_name"
+                    formError={formError}
+                  />
+                  <input
+                    className="Form-input Form-offset"
+                    name="last_name"
+                    defaultValue={userDetails ? userDetails.last_name : ""}
+                    placeholder="Appleseed"
+                    required
+                    onChange={this.onLastNameChange}
+                  />
+                  <span className="Form-charm" />
+                </Box>
+              </Flex>
             </FormField>
 
             <FormField fieldName="email" formError={formError}>