Certificate management alert icons implementation and alignment

- Replaces background image icons with icon directive
- Sizes and aligns icons in certificate table

TODO:
- Remove critical icon background image in separate commit

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I2e10bc3f3432331b6dd9354dbcd0e32480894ece

3 files changed, 17 insertions, 2 deletions

diff --git a/app/assets/icons/icon-critical.svg b/app/assets/icons/icon-critical.svg
new file mode 100644
index 0000000..85a6736
--- /dev/null
+++ b/app/assets/icons/icon-critical.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 2.3c4.3 0 7.7 3.5 7.7 7.7s-3.5 7.7-7.7 7.7-7.7-3.4-7.7-7.7S5.8 2.3 10 2.3m0-1.9C4.7.4.3 4.7.3 10.1s4.3 9.7 9.7 9.7 9.7-4.3 9.7-9.7S15.3.4 10 .4z" fill="#da1416"/><circle cx="10" cy="10" r="7.7" opacity=".4" fill="#da1416"/><path d="M4.5 4.5l11 11.1m0-11.1l-11 11.1" fill="none" stroke="#da1416" stroke-width="2" stroke-miterlimit="10"/></svg>
\ No newline at end of file
diff --git a/app/common/directives/certificate.html b/app/common/directives/certificate.html
index 2b7d9b7..1a7d091 100644
--- a/app/common/directives/certificate.html
+++ b/app/common/directives/certificate.html
@@ -24,8 +24,16 @@
     Valid until:
   </div>
   <div class="certificate__status-cell">
-    <span class="inline" ng-class="{'icon__warning certificate__table__icon' : cert.isExpiring , 'icon__critical certificate__table__icon' : cert.isExpired}"
-      ng-if="cert.isExpired || cert.isExpiring"></span>
+    <icon file="icon-critical.svg"
+      aria-label="certificate has expired"
+      class="certificate__status-icon"
+      ng-if="cert.isExpired">
+    </icon>
+    <icon file="icon-warning.svg"
+      aria-label="certificate will expire soon"
+      class="certificate__status-icon"
+      ng-if="cert.isExpiring">
+    </icon>
   </div>
   <div class="certificate__date-cell">
     {{cert.ValidNotAfter | date:medium}}
diff --git a/app/configuration/styles/certificate.scss b/app/configuration/styles/certificate.scss
index 0eaa7c0..a7c57f2 100644
--- a/app/configuration/styles/certificate.scss
+++ b/app/configuration/styles/certificate.scss
@@ -80,6 +80,12 @@
     }
     display: none;
   }
+  .certificate__status-icon {
+    width: 1.2em;
+    svg {
+      margin-bottom: .2em;
+    }
+  }
   .certificate__buttons-cell {
     @include mediaQuery(small) {
       width: 10%;