Merge pull request #306 from maciaszczykm/styling-update

Log view styling

Author: bryk

src/app/frontend/logs/logs.scss

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import '../variables';
+
 $logs-color-black: #000;
 $logs-color-white: #fff;
 
@@ -26,6 +28,6 @@ $logs-color-white: #fff;
 }
 
 .kd-logs-element {
-  padding: 0;
+  padding: 0 (2 * $baseline-grid) 0 (2 * $baseline-grid);
   word-wrap: break-word;
 }

src/app/frontend/logs/logstoolbar/logstoolbar.html

@@ -18,15 +18,15 @@
   <span flex="10"></span>
 
   <div layout="row" layout-wrap layout-margin layout-align="center center">
-    <span class="kd-logs-toolbar-text">Logs from pod</span>
+    <span class="kd-logs-toolbar-text">Logs from pod:</span>
     <md-select class="kd-logs-toolbar-select" aria-label="Logs from pod" ng-model="ctrl.pod"
                md-on-close="ctrl.onPodChange(ctrl.pod.name)"
                required>
       <md-option ng-repeat="item in ctrl.pods" ng-value="item">
         <span class="kd-logs-toolbar-text">{{item.name}}</span>
       </md-option>
     </md-select>
-    <span class="kd-logs-toolbar-text">container</span>
+    <span class="kd-logs-toolbar-text">Container:</span>
     <md-select class="kd-logs-toolbar-select" aria-label="Containers" ng-model="ctrl.container"
                md-on-close="ctrl.onContainerChange(ctrl.container.name)"
                required>

src/app/frontend/logs/logstoolbar/logstoolbar.scss

@@ -37,10 +37,18 @@ md-toolbar {
 }
 
 .kd-logs-toolbar-text {
-  font-size: $subhead-font-size-base;
+  font-size: $body-font-size-base;
 }
 
 .kd-logs-toolbar-select {
   margin-bottom: 2 * $baseline-grid;
   margin-left: auto;
+
+  &:not([disabled]) {
+    &:focus {
+      .md-select-value {
+        color: $logs-toolbar-color-white;
+      }
+    }
+  }
 }