Minor style updates for wizard

ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.css

@@ -1,3 +1,8 @@
+.connection-selector-container {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .jdbc-selector-container {
   padding-left: 0;
   padding-right: 0;
@@ -6,8 +11,12 @@
 .jdbc-column-title {
   height: 30px;
   border:1px solid white;
-  background-color: #cccccc;
+  background-color: #bbbbbb;
   padding-top: 5px;
   padding-left: 10px;
   padding-right: 0;
 }
+
+.alert-padding {
+  padding-top: 10px;
+}

ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.html

@@ -1,18 +1,19 @@
 <div>
   <div *ngIf="connectionsLoading">
     <span class="spinner spinner-sm spinner-inline"></span>
-  </div>  <div *ngIf="connectionsLoadedInvalid">
+  </div>
+  <div class="alert-padding" *ngIf="connectionsLoadedInvalid">
     <div class="alert alert-info">
       <span class="pficon pficon-info"></span>
       <strong>Problem Loading Connections!</strong>
     </div>
   </div>
-  <div class="col-sm-3" *ngIf="connectionsLoadedValid">
+  <div class="col-sm-3 connection-selector-container" *ngIf="connectionsLoadedValid">
     <ngx-datatable [rows]="rows"
                    [columns]="columns"
                    [messages]="tableMessages"
                    [footerHeight]="24"
-                   [scrollbarV]="true"
+                   [scrollbarV]="false"
                    [scrollbarH]="true"
                    [columnMode]="'force'"
                    [reorderable]="false"
@@ -46,13 +47,13 @@
                              *ngIf="hasJdbcConnectionSelected()">
     </app-jdbc-table-selector>
   </div>
-  <div class="col-sm-6" *ngIf="hasNonJdbcConnectionSelected()">
+  <div class="col-sm-6 alert-padding" *ngIf="hasNonJdbcConnectionSelected()">
     <div class="alert alert-info">
       <span class="pficon pficon-info"></span>
       <strong>Non-JDBC Connections are not supported</strong>
     </div>
   </div>
-  <div class="col-sm-6" *ngIf="!hasSelectedConnection()">
+  <div class="col-sm-6 alert-padding" *ngIf="!hasSelectedConnection()">
     <div class="alert alert-info">
       <span class="pficon pficon-info"></span>
       <strong>Please select a Connection</strong>
@@ -61,13 +62,13 @@
   <!-- ----------------------- -->
   <!--  Selected Tables List   -->
   <!-- ----------------------- -->
-  <div class="col-sm-3" *ngIf="!hasSelectedTables">
+  <div class="col-sm-3 alert-padding" *ngIf="!hasSelectedTables">
       <div class="alert alert-info">
         <span class="pficon pficon-info"></span>
         <strong>No tables selected</strong>
       </div>
   </div>
-  <div class = "list-div col-sm-3 jdbc-column-results" *ngIf="hasSelectedTables">
+  <div class = "list-div col-sm-3" *ngIf="hasSelectedTables">
       <div *ngFor="let table of getSelectedTables()">
         <app-selected-table [table]="table" (selectionListTableRemoved)="onTableSelectionRemoved($event)"></app-selected-table>
       </div>

ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.css

@@ -28,15 +28,15 @@
 }
 
 .jdbc-list .list-group-item.active {
-  background-color: darkblue;
+  background-color: #0088ce;
   color: white;
   border-color: transparent;
 }
 
 .jdbc-column-title {
   height: 20px;
   border:1px solid white;
-  background-color: #cccccc;
+  background-color: #dddddd;
   padding-top: 0;
   padding-left: 10px;
   padding-right: 0;
@@ -53,3 +53,8 @@
 .oddRow {
   background-color: white;
 }
+
+.alert-padding {
+  padding-top: 10px;
+}
+

ngapp/src/app/dataservices/jdbc-table-selector/jdbc-table-selector.component.html

@@ -13,13 +13,13 @@
 <div class="col-sm-6" *ngIf="schemasLoading">
   <span class="spinner spinner-sm spinner-inline"></span>
 </div>
-<div class="col-sm-6" *ngIf="schemasLoadedInvalid">
+<div class="col-sm-6 alert-padding" *ngIf="schemasLoadedInvalid">
   <div class="alert alert-info">
     <span class="pficon pficon-info"></span>
     <strong>Unable to load schema</strong>
   </div>
 </div>
-<div class="col-sm-6" *ngIf="schemasLoadedValidEmpty">
+<div class="col-sm-6 alert-padding" *ngIf="schemasLoadedValidEmpty">
   <div class="alert alert-info">
     <span class="pficon pficon-info"></span>
     <strong>No schema available</strong>
@@ -49,13 +49,13 @@
 <div class="col-sm-6" *ngIf="hasSelectedSchema && tablesLoading">
   <span class="spinner spinner-sm spinner-inline"></span>
 </div>
-<div class="col-sm-6" *ngIf="hasSelectedSchema && tablesLoadedInvalid">
+<div class="col-sm-6 alert-padding" *ngIf="hasSelectedSchema && tablesLoadedInvalid">
   <div class="alert alert-info">
     <span class="pficon pficon-info"></span>
     <strong>Unable to load tables</strong>
   </div>
 </div>
-<div class="col-sm-6" *ngIf="hasSelectedSchema && tablesLoadedValidEmpty">
+<div class="col-sm-6 alert-padding" *ngIf="hasSelectedSchema && tablesLoadedValidEmpty">
   <div class="alert alert-info">
     <span class="pficon pficon-info"></span>
     <strong>No tables available</strong>

ngapp/src/app/dataservices/selected-table/selected-table.component.css

@@ -1,8 +1,8 @@
 .selected-table-card {
-  background-color: #f2f2f2;
+  background-color: #def3ff;
   border:2px dotted darkblue;
   margin-top: 5px;
-  margin-left: 15px;
+  margin-left: 0;
   min-height: 60px;
   max-height: 80px;
   padding-top: 5px;

ngapp/src/app/dataservices/selected-table/selected-table.component.html

@@ -1,4 +1,4 @@
-<div class="col-sm-8 selected-table-card">
+<div class="col-sm-12 selected-table-card">
   <span class="fa fa-plug"></span><span class="selected-table-connection">{{ table.getConnection().getId() }}</span>
   <span class="fa fa-close pull-right selected-table-close-icon" (click)="onRemove()"></span>
   <br>

ngapp/src/styles.css

@@ -15,7 +15,7 @@
 
 .datatable-header {
   color: white;
-  background-color: #cccccc;
+  background-color: #bbbbbb;
   text-align: center;
 }
 
@@ -60,6 +60,6 @@
 }
 
 .datatable-body-row.active .datatable-row-group {
-  background-color: darkblue !important;
+  background-color: #0088ce !important;
   color: white;
 }