layout fixes

resources/frontend_client/app/components/form/form.css

 :root {
     --form-padding: 1em;
     --form-input-placeholder-color: #C0C0C0;
+    --form-input-size: 1.571rem;
+
+    --form-label-color: #949494;
 }
 
 /* TODO: deprecate this base object, it shouldn't be this specific */
@@ -16,7 +19,7 @@
 /* TODO: combine this and the scoped version */
 .Form-label {
   display: block;
-  color: #777;
+  color: var(--form-label-color);
   font-size: 1.2rem;
 }
 
@@ -42,10 +45,11 @@
 .Form-input {
     padding-top: 0.8em;
     padding-bottom: 0.8em;
-    font-size: 1.185em;
+    font-size: var(--form-input-size);
     border: none;
     background-color: transparent;
     transition: color .3s linear;
+    font-family: var(--default-font-family);
 }
 
 .Form-input:focus {
@@ -53,7 +57,7 @@
 }
 
 .Form-offset {
-    padding-left: 2.25rem;
+    padding-left: 2.4rem;
 }
 
 .Form-charm {

resources/frontend_client/app/css/core/base.css

 :root {
   --default-font-family: "Lato";
-  --default-font-size: 0.875em;
-  --large-font-size: 1em;
+  --default-font-size: 1em;
 }
 
 html {
@@ -17,13 +16,7 @@ body {
     display: flex;
     flex-direction: column;
     text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: subpixel-antialiased;
-}
-
-@media screen and (--breakpoint-min-xl) {
-    body {
-        font-size: var(--large-font-size);
-    }
+    -webkit-font-smoothing: antialiased;
 }
 
 /*

resources/frontend_client/app/css/core/layout.css

 :root {
-    --sm-width: 640px;
+    --sm-width: 752px;
     --md-width: 940px;
     --lg-width: 1140px;
     --xl-width: 1540px;

resources/frontend_client/app/css/core/rounded.css

 :root {
-  --default-border-radius: 3px;
+  --default-border-radius: 4px;
 }
 .rounded {
   border-radius: var(--default-border-radius);

resources/frontend_client/app/css/setup.css

@@ -21,9 +21,12 @@
 .SetupSteps {
 }
 
+.SetupNav {
+    border-bottom: 1px solid #f5f5f5;
+}
+
 .SetupStep {
-    margin-top: 3em;
-    margin-bottom: 3em;
+    margin-bottom: 1.714em;
     background-color: var(--alt-bg-color);
 }
 
@@ -40,8 +43,7 @@
     width: var(--indicator-size);
     height: var(--indicator-size);
     border-radius: var(--indicator-border-radius);
-    /* need to set font size to */
-    font-size: 1em;
+    font-weight: bold;
     line-height: 1;
     background-color: #fff;
 }

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

-<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="SetupSteps flex flex-column layout-centered wrapper wrapper-max-sm">
+    <section class="SetupStep bordered rounded full relative" ng-class="{ 'SetupStep--active shadowed' : activeStep == 'user', 'SetupStep--completed shadowed' : completedSteps.user }">
             <div class="flex align-center py2">
                 <span class="SetupStep-indicator flex layout-centered absolute bordered">
                     <span class="SetupStep-number">1</span>
@@ -9,14 +9,8 @@
             </div>
             <form class="Form-new" name="form" ng-submit="createOrgAndUser()" novalidate ng-if="activeStep == 'user'" novalidate>
                 <div class="Form-field" mb-form-field="first_name">
-                    <mb-form-label display-name="First name" field-name="first_name"></mb-form-label>
-                    <input class="Form-input Form-offset full" name="first_name" placeholder="John" ng-model="newUser.first_name" required autofocus />
-                    <span class="Form-charm"></span>
-                </div>
-
-                <div class="Form-field" mb-form-field="last_name">
-                    <mb-form-label display-name="Last name" field-name="last_name"></mb-form-label>
-                    <input class="Form-input Form-offset full" name="last_name" placeholder="Doe" ng-model="newUser.last_name" required />
+                    <mb-form-label display-name="Your name" field-name="name"></mb-form-label>
+                    <input class="Form-input Form-offset full" name="name" placeholder="Johnny Appleseed" ng-model="newUser.name" required autofocus />
                     <span class="Form-charm"></span>
                 </div>
 
@@ -39,14 +33,14 @@
                 </div>
 
                 <div class="Form-field" mb-form-field="organization">
-                    <mb-form-label display-name="Organization name" field-name="password"></mb-form-label>
-                    <input class="Form-input Form-offset full" name="organization" type="text" placeholder="Organization name" ng-model="userOrgName" autofocus required>
+                    <mb-form-label display-name="Your company or team name" field-name="password"></mb-form-label>
+                    <input class="Form-input Form-offset full" name="organization" type="text" placeholder="Department of awesome" ng-model="userOrgName" autofocus required>
                     <span class="Form-charm"></span>
                 </div>
 
                 <div class="Form-actions">
                     <button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(newUser)" ng-disabled="!form.$valid">
-                        Create
+                        Next
                     </button>
                 </div>
             </form>
@@ -55,7 +49,7 @@
           </div>
     </section>
 
-    <section class="SetupStep bordered border-dashed rounded relative" ng-class="{ 'SetupStep--active' : activeStep == 'database', 'SetupStep--completed' : completedSteps.database }">
+    <section class="SetupStep bordered border-dashed rounded full relative" ng-class="{ 'SetupStep--active shadowed' : activeStep == 'database', 'SetupStep--completed shadowed' : completedSteps.database }">
         <div class="flex align-center py2">
             <span class="SetupStep-indicator flex layout-centered absolute bordered">
                 <span class="SetupStep-number">2</span>

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

@@ -4,6 +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.completedSteps = {
             user: false,
@@ -18,15 +19,17 @@ SetupControllers.controller('SetupInfo', ['$scope', '$routeParams', '$location',
         });
 
         $scope.createOrgAndUser = function() {
-            console.log("$scope.newUser.email", $scope.newUser.email)
-
+            var name = $scope.newUser.name.split(' ')
+            var firstName = name[0];
+            var lastName = name[1];
+            debugger;
             // start off by creating the first user of the system
             // NOTE: this should both create the user AND log us in and return a session id
             Setup.create_user({
                 'token': AppState.model.setupToken,
                 'email': $scope.newUser.email,
-                'first_name': $scope.newUser.firstName,
-                'last_name': $scope.newUser.lastName,
+                'first_name': firstName,
+                'last_name': lastName,
                 'password': $scope.newUser.password
             }, function(result) {
                 // result should have a single :id value which is our new session id

resources/frontend_client/index.html

@@ -151,7 +151,7 @@
             </nav>
 
             <!-- SETUP NAV -->
-            <nav class="SetupNav text-brand border-bottom py4 flex layout-centered" ng-show="nav === 'setup'">
+            <nav class="SetupNav text-brand py4 flex layout-centered" ng-show="nav === 'setup'">
                 <cv-logo-icon class="mr2" width="41" height="51"></cv-logo-icon>
                 metabase
             </nav>