Minor app tile tweaks from Cierra (#553)

* Minor app tile tweaks from Cierra

* Fixed text colour and heading height

* Remove padding in action-header. Correctly align app status icon within its container

src/app/utils/utils.service.js

@@ -3,7 +3,8 @@
 
   angular
     .module('app.utils')
-    .factory('app.utils.utilsService', utilsServiceFactory);
+    .factory('app.utils.utilsService', utilsServiceFactory)
+    .filter('mbToHumanSize', mbToHumanSizeFilter);
 
   utilsServiceFactory.$inject = [
     '$log'
@@ -46,10 +47,10 @@
       if (sizeMb === -1) {
         return '∞';
       }
-      if (sizeMb > 1048576) {
+      if (sizeMb >= 1048576) {
         return precisionIfUseful(sizeMb / 1048576) + ' TB';
       }
-      if (sizeMb > 1024) {
+      if (sizeMb >= 1024) {
         return precisionIfUseful(sizeMb / 1024) + ' GB';
       }
       return precisionIfUseful(sizeMb) + ' MB';
@@ -114,4 +115,14 @@
 
   }
 
+  mbToHumanSizeFilter.$inject = [
+    'app.utils.utilsService'
+  ];
+
+  function mbToHumanSizeFilter(utilsService) {
+    return function (input) {
+      return utilsService.mbToHumanSize(input);
+    };
+  }
+
 })();

src/plugins/cloud-foundry/view/applications/application/summary/summary.scss

@@ -1,30 +1,38 @@
 @import "edit-app/edit-app";
 
-.application-details .summary .data-body {
-  padding:  $hpe-unit-space * .75 $hpe-unit-space;
-
-  .dl-horizontal > * {
-    margin-bottom: $hpe-unit-space * .5;
-    margin-left: auto;
+.application-details {
+  .action-header {
+    color: $dove-gray2;
+    font-size: 18px;
+    padding-left: 0;
+    padding-right: 0;
   }
+  .summary .data-body {
+    padding: $hpe-unit-space * .75 $hpe-unit-space;
+
+    .dl-horizontal > * {
+      margin-bottom: $hpe-unit-space * .5;
+      margin-left: auto;
+    }
 
-  dd.nowrap {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    dd.nowrap {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
 
-    &.align-right {
-      clear: right;
-      text-align: right;
+      &.align-right {
+        clear: right;
+        text-align: right;
+      }
     }
-  }
 
-  .app-status-block {
-    line-height: 0;
+    .app-status-block {
+      line-height: 0;
 
-    .app-status {
-      margin-left: 0;
-      margin-right: 2px;
+      .app-status {
+        margin-left: 0;
+        margin-right: 2px;
+      }
     }
   }
 }

src/plugins/cloud-foundry/view/applications/list/gallery-view/application-gallery-card/application-gallery-card.html

@@ -1,16 +1,16 @@
 <gallery-card card-data="applicationGalleryCardCtrl.cardData"
   on-card-click="applicationGalleryCardCtrl.goToApp()">
   <dl class="dl-horizontal">
-    <dt translate>App State</dt>
-    <dd class="text-capitalize">
+    <dt translate class="app-status-wrapper">
+      <app-state-icon state="applicationGalleryCardCtrl.app.state.indicator"></app-state-icon>
       {{applicationGalleryCardCtrl.app.state.label | lowercase}}
-      <app-state-icon class="app-status" state="applicationGalleryCardCtrl.app.state.indicator"></app-state-icon>
-    </dd>
-    <dt translate>Instance Quota</dt>
-    <dd>{{applicationGalleryCardCtrl.app.entity.instances}}</dd>
+    </dt>
+    <dd></dd>
+    <dt translate>Instances</dt>
+    <dd>{{ applicationGalleryCardCtrl.app.entity.instances }}</dd>
     <dt translate>Disk Quota</dt>
-    <dd>{{applicationGalleryCardCtrl.app.entity.disk_quota}}</dd>
-    <dt translate>Memory Quota</dt>
-    <dd>{{applicationGalleryCardCtrl.app.entity.memory}} MB</dd>
+    <dd>{{ applicationGalleryCardCtrl.app.entity.disk_quota | mbToHumanSize }}</dd>
+    <dt translate>Memory</dt>
+    <dd>{{ applicationGalleryCardCtrl.app.entity.memory | mbToHumanSize }}</dd>
   </dl>
 </gallery-card>

src/plugins/cloud-foundry/view/applications/list/gallery-view/gallery-view.scss

@@ -15,11 +15,38 @@ $gallery-card-layout-steps: 4;
   vertical-align: middle;
 }
 
+.app-gallery-card {
+  // Gives a heading of 60px with minimal changes
+  .card.panel .panel-heading {
+    color: $dove-gray2;
+    padding-top: 19px;
+    padding-bottom: 18px;
+  }
+  .dl-horizontal dt.app-status-wrapper {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    font-size: 18px;
+    font-weight: 500;
+    color: $dove-gray2;
+    &>span {
+      text-transform: capitalize;
+    }
+    app-state-icon {
+      display: flex;
+      .app-status {
+        margin-left: 0;
+      }
+      margin-right: 6px;
+    }
+  }
+}
+
 // Tweak the card width slightly when samller to stop application state name over-running
 @media (min-width: 768px) {
   gallery-card {
     .card .dl-horizontal dd {
         margin-left: 170px;
     }
   }
-}
+}