engine selection

resources/frontend_client/app/css/setup.css

@@ -153,20 +153,25 @@
 }
 
 .Connection-enginePicker {
-    padding: 1em 0;
-    margin-bottom: 1em;
+    margin-bottom: 1.5em;
+    padding-bottom: 1em;
     border-bottom: 1px solid var(--border-color);
 }
 
 .Connection-enginePicker .Connection-engine {
     display: inline-block;
-    padding: 1em;
+    padding: 1em 1em    1em 0;
+    margin-right: 1em;
 }
 
 .Connection-enginePicker .Connection-engine:hover {
     cursor: pointer;
 }
 
+.Connection-engineSelected {
+    color: var(--brand-color);
+}
+
 .Connection-label {
     font-size: 0.85em;
     margin-bottom: 1em;

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

@@ -59,6 +59,7 @@ SetupControllers.controller('SetupConnection', ['$scope', '$routeParams', '$loca
             $scope.connection = {
                 host: "localhost",
                 port: defaultPorts[connectionType],
+                engine: 'Postgres'
             }
         }
 

resources/frontend_client/app/setup/setup_connection.html

@@ -18,7 +18,7 @@
         </div>
         <div>
             <ul class="Connection-enginePicker">
-                <li class="Connection-engine" ng-repeat="engine in engines" ng-click="setConnectionEngine(engine)" ng-class="{'Connection-engineSelected'}">
+                <li class="Connection-engine" ng-repeat="engine in engines" ng-click="setConnectionEngine(engine)" ng-class="{'Connection-engineSelected': connection.engine == engine }">
                     {{engine}}
                 </li>
             </ul>