basic setup welcome layout

resources/frontend_client/app/css/core/bordered.css

@@ -40,3 +40,7 @@
 .borderless {
   border: none !important;
 }
+
+.border-dashed {
+  border-style: dashed;
+}

resources/frontend_client/app/css/core/colors.css

@@ -8,6 +8,8 @@
   --headsup-color: #F5A623;
 
   --error-color: #EF8C8C;
+
+  --body-text: #8E9BA9;
 }
 
 .text-white {
@@ -59,6 +61,10 @@
   background-color: var(--headsup-color);
 }
 
+.text-body {
+    color: var(--body-text);
+}
+
 /* grey */
 
 .text-grey-1 { color: color(var(--base-grey) shade(10%)) }

resources/frontend_client/app/css/core/spacing.css

@@ -193,4 +193,3 @@
 .mb4 { margin-bottom: var(--margin-4); }
 .ml4 { margin-left: var(--margin-4); }
 .mr4 { margin-right: var(--margin-4); }
-

resources/frontend_client/app/css/setup.css

+/*
 .Setup {
     background: #FBFCFD;
     height: 100%:
@@ -159,8 +160,10 @@
     color: #777;
     opacity: 0;
 }
+*/
 
 /* only show connection input labels that have focus */
+/*
 .Connection-input:focus + .Connection-label {
     opacity: 1;
 }
@@ -241,3 +244,20 @@
     max-width: 30rem;
     font-size: 1rem;
 }
+*/
+
+.WelcomeMessage {
+    margin-top: 4em;
+    margin-bottom: 4em;
+}
+
+.WelcomeMessage-title {
+    font-weight: 100;
+    font-size: 2.286em;
+    line-height: 2.786em;
+}
+
+.WelcomeMessage-subTitle {
+    font-size: 1.2em;
+    line-height: 1.4em;
+}

resources/frontend_client/app/setup/partials/setup_help.html

-<div>
+<div class="bordered border-dashed p2 rounded text-body">
   If you feel stuck, <a href="metabase.com/help">metabase.com/help</a> is just a click away.
 </div>

resources/frontend_client/app/setup/partials/setup_welcome.html

-<section>
-  <cv-logo-icon></cv-logo-icon>
-  <h1>Welcome to Metabase</h1>
-  <p>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>
+<section class="wrapper flex layout-centered full-height flex-column">
+  <cv-logo-icon width="109px" height="138px"></cv-logo-icon>
+  <div class="WelcomeMessage text-centered">
+      <h1 class="WelcomeMessage-title text-brand">Welcome to Metabase</h1>
+      <p class="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>
   <a class="Button Button--primary" href="/setup/info">Let's get started</a>
   <div ng-include="'/app/setup/partials/setup_help.html'"></div>
 </section>

resources/frontend_client/app/setup/setup.controllers.js

@@ -4,7 +4,7 @@ var SetupControllers = angular.module('corvus.setup.controllers', ['corvus.metab
 
 SetupControllers.controller('SetupInfo', ['$scope', '$routeParams', '$location', '$timeout', 'ipCookie', 'Organization', 'AppState', 'Setup', 'Metabase', 'CorvusCore',
     function($scope, $routeParams, $location, $timeout, ipCookie, Organization, AppState, Setup, Metabase, CorvusCore) {
-        $scope.activeStep = "user";
+        $scope.activeStep = "database";
         $scope.completedSteps = {
             user: false,
             database: false

resources/frontend_client/index.html

@@ -218,7 +218,7 @@
     <script>
         WebFont.load({
           google: {
-            families: ['Lato:n2,n4,n7']
+            families: ['Lato:n1,n2,n4,n7']
           }
         });
       </script>