fix positioning of help on welcome step + markup & copy refactor

frontend/src/css/setup.css

@@ -4,22 +4,6 @@
     --setup-border-color: #D7D7D7;
 }
 
-.WelcomeMessage {
-    margin-top: 4em;
-    margin-bottom: 4em;
-}
-
-.WelcomeMessage-title {
-    font-weight: 100;
-    font-size: 2.286rem;
-    line-height: 2.786rem;
-}
-
-.WelcomeMessage-subTitle {
-    font-size: 1.2rem;
-    line-height: 1.4rem;
-}
-
 .SetupSteps {
     margin-top: 4.000rem;
 }

frontend/src/setup/components/Setup.react.js

@@ -41,22 +41,22 @@ export default class Setup extends Component {
 
         if (activeStep === WELCOME_STEP_NUMBER) {
             return (
-                <div className="flex flex-column flex-full">
-                    <div className="wrapper flex flex-column layout-centered wrapper wrapper--trim">
-                        <section className="wrapper wrapper--trim flex layout-centered full-height flex-column">
-                            <LogoIcon className="text-brand" width={109} height={138}></LogoIcon>
-                            <div className="WelcomeMessage text-centered">
-                                <h1 className="WelcomeMessage-title text-brand">Welcome to Metabase</h1>
-                                <p className="WelcomeMessage-subTitle text-body">Looks like everything is installed and working great. We’ll quickly get to know you, connect you to your data, and we’ll have you on your way  to your data.</p>
+                <div className="relative flex flex-full layout-centered">
+                    <div className="wrapper wrapper--trim text-centered">
+                        <LogoIcon className="text-brand mb4" width={89} height={118}></LogoIcon>
+                        <div className="relative z2 text-centered ml-auto mr-auto" style={{maxWidth: 550}}>
+                            <h1 style={{fontSize: '2.2rem'}} className="text-brand">Welcome to Metabase</h1>
+                            <p className="text-body">Looks like everything is working. Now let’s get to know you, connect to your data, and start finding you some answers!</p>
+                            <button className="Button Button--primary mt4" onClick={() => (this.completeWelcome())}>Lets get started</button>
+                        </div>
+                        <div className="absolute z1 bottom left right">
+                            <div className="inline-block">
+                                {this.renderFooter()}
                             </div>
-                            <button className="Button Button--primary" onClick={() => (this.completeWelcome())}>Lets get started</button>
-                        </section>
-
-                        {this.renderFooter()}
+                        </div>
                     </div>
                 </div>
             );
-
         } else {
             return (
                 <div className="flex flex-column flex-full">