Merge branch 'new_setup_flow' of github.com:metabase/metabase-init into new_setup_flow

Conflicts:
	resources/frontend_client/app/setup/partials/setup_info.html

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

@@ -8,8 +8,6 @@
   --headsup-color: #F5A623;
 
   --error-color: #EF8C8C;
-
-  --body-text: #8E9BA9;
 }
 
 .text-white {
@@ -61,10 +59,6 @@
   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/layout.css

+:root {
+    --sm-width: 640px;
+    --md-width: 940px;
+    --lg-width: 1140px;
+    --xl-width: 1540px;
+}
 .wrapper {
   width: 100%;
   margin: 0 auto;
@@ -5,28 +11,37 @@
 
 @media screen and (--breakpoint-min-sm) {
   .wrapper {
-    max-width: 640px;
+    max-width: var(--sm-width);
   }
 }
 
 @media screen and (--breakpoint-min-md) {
   .wrapper {
-    max-width: 940px;
+    max-width: var(--md-width);
   }
 }
 
 @media screen and (--breakpoint-min-lg) {
   .wrapper {
-    max-width: 1140px;
+    max-width: var(--lg-width);
   }
 }
 
 @media screen and (--breakpoint-min-xl) {
   .wrapper {
-    max-width: 1540px;
+    max-width: var(--xl-width);
   }
 }
 
+/*
+    max-width utils
+    these classes allow you to keep a wrapper from extending beyond a certain size
+*/
+.wrapper.wrapper-max-sm { max-width: var(--sm-width); }
+.wrapper.wrapper-max-md { max-width: var(--md-width); }
+.wrapper.wrapper-max-lg { max-width: var(--lg-width); }
+.wrapper.wrapper-max-xl { max-width: var(--xl-width); }
+
 .row {
   margin-left: -1em;
   margin-right: -1em;

resources/frontend_client/app/css/core/text.css

+:root {
+  --body-text-color: #8E9BA9;
+}
 /* text alignment */
 .text-centered {
   text-align: center;
@@ -16,6 +19,10 @@
 }
 
 /* text weight */
+.text-light {
+    font-weight: 100;
+}
+
 .text-normal {
   font-weight: 400;
 }
@@ -29,3 +36,10 @@
 .text-italic {
   font-style: italic;
 }
+
+/* larger text size used for descriptions  */
+.text-body {
+  font-size: 1.286em;
+  line-height: 1.857em;
+  color: var(--body-text-color); /* TODO - is this bad? */
+}

resources/frontend_client/app/css/setup.css

+:root {
+    --indicator-size: 3.000em; /* ~ 42 px */
+    --indicator-border-radius: 99px;
+}
 .WelcomeMessage {
     margin-top: 4em;
     margin-bottom: 4em;
@@ -32,23 +36,16 @@
 }
 
 .SetupStep-indicator {
-    left: -1em;
-    width: 2em;
-    height: 2em;
-    border-radius: 99px;
+    left: calc((var(--indicator-size) / 2) * -1);
+    width: var(--indicator-size);
+    height: var(--indicator-size);
+    border-radius: var(--indicator-border-radius);
+    /* need to set font size to */
     font-size: 1em;
     line-height: 1;
     background-color: #fff;
 }
 
-.SetupStep-title {
-
-}
-
-.SetupStep-number {
-
-}
-
 .SetupStep-check {
     color: #fff;
     display: none;

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

-<div class="SetupSteps wrapper">
-    <section class="SetupStep bordered rounded shadowed relative" ng-class="{ 'SetupStep--active' : activeStep == 'user', 'SetupStep--completed' : completedSteps.user }">
-            <div ng-click="setActiveStep('user')">
+<div class="SetupSteps wrapper wrapper-max-sm">
+    <section class="SetupStep bordered rounded relative" ng-class="{ 'SetupStep--active' : activeStep == 'user', 'SetupStep--completed' : completedSteps.user }">
+            <div class="flex align-center py2" ng-click="setActiveStep('user')">
                 <span class="SetupStep-indicator flex layout-centered absolute bordered">
                     <span class="SetupStep-number">1</span>
                     <cv-check-icon class="SetupStep-check" width="16px" height="16px"></cv-check-icon>
@@ -55,8 +55,8 @@
           </div>
     </section>
 
-    <section class="SetupStep bordered rounded shadowed relative" ng-class="{ 'SetupStep--active' : activeStep == 'database', 'SetupStep--completed' : completedSteps.database }">
-        <div ng-click="setActiveStep('database')">
+    <section class="SetupStep bordered border-dashed rounded relative" ng-class="{ 'SetupStep--active' : activeStep == 'database', 'SetupStep--completed' : completedSteps.database }">
+        <div class="flex align-center py2" ng-click="setActiveStep('database')">
             <span class="SetupStep-indicator flex layout-centered absolute bordered">
                 <span class="SetupStep-number">2</span>
                 <cv-check-icon class="SetupStep-check" width="16px" height="16px"></cv-check-icon>

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

-<section class="wrapper flex layout-centered full-height flex-column">
+<section class="wrapper wrapper-max-sm 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>