Issue #647: Refactor security labels stylesheet

This change refactor the stylesheet of security labels. Now it's
following the BEM naming conventions. Also, as the code is pretty
coupled between css and js, it was necessary some changes on javascript
code to keep the previous i18n key and rename the css classes.

1 files changed, 35 insertions, 12 deletions

diff --git a/web-ui/app/js/mail_view/ui/mail_view.js b/web-ui/app/js/mail_view/ui/mail_view.js
index 85d536f9..d1fba8c4 100644
--- a/web-ui/app/js/mail_view/ui/mail_view.js
+++ b/web-ui/app/js/mail_view/ui/mail_view.js
@@ -142,26 +142,41 @@ define(
       };
 
       this.checkEncrypted = function(mail) {
-        if(_.isEmpty(mail.security_casing.locks)) { return 'not-encrypted'; }
+        if(_.isEmpty(mail.security_casing.locks)) {
+          return {
+            cssClass: 'security-status__label--not-encrypted',
+            label: 'not-encrypted'
+          }
+        }
 
-        var status = ['encrypted'];
+        var statusClass = ['security-status__label--encrypted'];
+        var statusLabel = ['encrypted'];
 
         var hasAnyEncryptionInfo = _.any(mail.security_casing.locks, function (lock) {
           return lock.state === 'valid';
         });
 
         if(hasAnyEncryptionInfo) {
-          status.push('encryption-valid');
+          statusLabel.push('encryption-valid');
         } else {
-          status.push('encryption-error');
+          statusClass.push('--with-error');
+          statusLabel.push('encryption-error');
         }
 
-        return status.join(' ');
+        return {
+          cssClass: statusClass.join(''),
+          label: statusLabel.join(' ')
+        }
       };
 
       this.checkSigned = function(mail) {
+        var statusNotSigned = {
+          cssClass: 'security-status__label--not-signed',
+          label: 'not-signed'
+        };
+
         if(_.isEmpty(mail.security_casing.imprints)) {
-          return 'not-signed';
+          return statusNotSigned;
         }
 
         var hasNoSignatureInformation = _.any(mail.security_casing.imprints, function (imprint) {
@@ -169,23 +184,31 @@ define(
         });
 
         if(hasNoSignatureInformation) {
-          return 'not-signed';
+          return statusNotSigned;
         }
 
-        var status = ['signed'];
+        var statusClass = ['security-status__label--signed']
+        var statusLabel = ['signed'];
 
         if(_.any(mail.security_casing.imprints, function(imprint) { return imprint.state === 'from_revoked'; })) {
-          status.push('signature-revoked');
+          statusClass.push('--revoked');
+          statusLabel.push('signature-revoked');
         }
+
         if(_.any(mail.security_casing.imprints, function(imprint) { return imprint.state === 'from_expired'; })) {
-          status.push('signature-expired');
+          statusClass.push('--expired');
+          statusLabel.push('signature-expired');
         }
 
         if(this.isNotTrusted(mail)) {
-          status.push('signature-not-trusted');
+          statusClass.push('--not-trusted');
+          statusLabel.push('signature-not-trusted');
         }
 
-        return status.join(' ');
+        return {
+          cssClass: statusClass.join(''),
+          label: statusLabel.join(' ')
+        }
       };
 
       this.isNotTrusted = function(mail){