2 files changed, 68 insertions, 1 deletions
diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss
index 05974efb..4dc79398 100644
--- a/web-ui/app/scss/style.scss
+++ b/web-ui/app/scss/style.scss
@@ -23,6 +23,7 @@
 @import "views/no-message-selected";
 @import "views/no-mails-available";
 @import "views/read-view";
+@import "views/security-labels";
 @import "views/compose-view";
 @import "views/compose-button";
 
@@ -31,6 +32,5 @@
 
 // TODO
 @import "reply";
-@import "security";
 @import "styles";
 
diff --git a/web-ui/app/scss/views/_security-labels.scss b/web-ui/app/scss/views/_security-labels.scss
new file mode 100644
index 00000000..3a15d99b
--- /dev/null
+++ b/web-ui/app/scss/views/_security-labels.scss
@@ -0,0 +1,67 @@
+.security-status {
+  margin: 0 0 5px;
+
+  &__label {
+    display: inline-block;
+    padding: 2px 6px;
+    white-space: nowrap;
+    background: $success;
+    color: $white;
+    border-radius: 12px;
+
+    &:before {
+      font-family: FontAwesome;
+    }
+
+    &--encrypted {
+      &:before {
+        content: "\f023";
+      }
+
+      &--with-error {
+        background: $attention;
+        &:before {
+          content: "\f023 \f057";
+        }
+      }
+    }
+
+    &--not-encrypted {
+      background: $attention;
+
+      &:before {
+        content: "\f13e ";
+      }
+    }
+
+    &--signed {
+      &:before {
+        content: "\f00c";
+      }
+
+      &--revoked, &--expired {
+        background: $attention;
+
+        &:before {
+          content: "\f05e";
+        }
+      }
+
+      &--not-trusted {
+        background: $error;
+
+        &:before {
+          content: "\f05e";
+        }
+      }
+    }
+
+    &--not-signed {
+      background: $attention;
+
+      &:before {
+        content: "\f05e";
+      }
+    }
+  }
+}