From fd8128dfe990f0986bbb2c7a1a7037739fc93db4 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Mon, 25 Jun 2018 16:04:19 -0400
Subject: [PATCH] callout

---
 src/app/settings/change-email.component.html  |  4 +-
 .../settings/change-password.component.html   |  4 +-
 .../deauthorize-sessions.component.html       |  4 +-
 .../settings/delete-account.component.html    |  4 +-
 src/app/settings/purge-vault.component.html   |  4 +-
 src/app/tools/export.component.html           |  4 +-
 src/app/tools/import.component.html           |  4 +-
 src/scss/styles.scss                          | 58 +++++++++++++++++++
 8 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/src/app/settings/change-email.component.html b/src/app/settings/change-email.component.html
index b94521b1db..3b3501b24e 100644
--- a/src/app/settings/change-email.component.html
+++ b/src/app/settings/change-email.component.html
@@ -15,8 +15,8 @@
     <ng-container *ngIf="tokenSent">
         <hr>
         <p>{{'changeEmailDesc' | i18n : newEmail}}</p>
-        <div class="alert alert-warning" role="alert">
-            <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+        <div class="callout callout-warning" role="alert">
+            <h3 class="callout-heading">{{'warning' | i18n}}</h3>
             <p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
         </div>
         <div class="row">
diff --git a/src/app/settings/change-password.component.html b/src/app/settings/change-password.component.html
index e1dd77c093..0e2c752d17 100644
--- a/src/app/settings/change-password.component.html
+++ b/src/app/settings/change-password.component.html
@@ -1,5 +1,5 @@
-<div class="alert alert-warning" role="alert">
-    <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+<div class="callout callout-warning" role="alert">
+    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
     <p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
 </div>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
diff --git a/src/app/settings/deauthorize-sessions.component.html b/src/app/settings/deauthorize-sessions.component.html
index f088020bb2..0b167a2efc 100644
--- a/src/app/settings/deauthorize-sessions.component.html
+++ b/src/app/settings/deauthorize-sessions.component.html
@@ -9,8 +9,8 @@
             </div>
             <div class="modal-body">
                 <p>{{'deauthorizeSessionsDesc' | i18n}}</p>
-                <div class="alert alert-warning" role="alert">
-                    <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+                <div class="callout callout-warning" role="alert">
+                    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
                     <p class="mb-0">{{'deauthorizeSessionsWarning' | i18n}}</p>
                 </div>
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
diff --git a/src/app/settings/delete-account.component.html b/src/app/settings/delete-account.component.html
index e8723742e1..11d68c7a4b 100644
--- a/src/app/settings/delete-account.component.html
+++ b/src/app/settings/delete-account.component.html
@@ -9,8 +9,8 @@
             </div>
             <div class="modal-body">
                 <p>{{'deleteAccountDesc' | i18n}}</p>
-                <div class="alert alert-warning" role="alert">
-                    <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+                <div class="callout callout-warning" role="alert">
+                    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
                     <p class="mb-0">{{'deleteAccountWarning' | i18n}}</p>
                 </div>
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
diff --git a/src/app/settings/purge-vault.component.html b/src/app/settings/purge-vault.component.html
index 458ec33783..d1b7e4b087 100644
--- a/src/app/settings/purge-vault.component.html
+++ b/src/app/settings/purge-vault.component.html
@@ -9,8 +9,8 @@
             </div>
             <div class="modal-body">
                 <p>{{'purgeVaultDesc' | i18n}}</p>
-                <div class="alert alert-warning" role="alert">
-                    <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+                <div class="callout callout-warning" role="alert">
+                    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
                     <p class="mb-0">{{'purgeVaultWarning' | i18n}}</p>
                 </div>
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
diff --git a/src/app/tools/export.component.html b/src/app/tools/export.component.html
index b05ba791d6..613f13fd5d 100644
--- a/src/app/tools/export.component.html
+++ b/src/app/tools/export.component.html
@@ -3,8 +3,8 @@
         <h1>{{'exportVault' | i18n}}</h1>
     </div>
     <p>{{'exportMasterPassword' | i18n}}</p>
-    <div class="alert alert-warning" role="alert">
-        <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+    <div class="callout callout-warning" role="alert">
+        <h3 class="callout-heading">{{'warning' | i18n}}</h3>
         <p class="mb-0">{{'exportWarning' | i18n}}</p>
     </div>
     <div class="row">
diff --git a/src/app/tools/import.component.html b/src/app/tools/import.component.html
index 06af2d4ac8..be7df2415c 100644
--- a/src/app/tools/import.component.html
+++ b/src/app/tools/import.component.html
@@ -14,8 +14,8 @@
             </div>
         </div>
     </div>
-    <div class="alert alert-info" role="alert" *ngIf="format">
-        <h4 class="alert-heading">{{'instructionsFor' | i18n : getFormatName()}}</h4>
+    <div class="callout callout-info" role="alert" *ngIf="format">
+        <h3 class="callout-heading">{{'instructionsFor' | i18n : getFormatName()}}</h3>
         <p class="mb-0">
             <ng-container *ngIf="format === 'bitwardencsv'">
                 See detailed instructions on our help site at
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index cbc84e0ce6..e5e95250b5 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -433,3 +433,61 @@ app-avatar {
         }
     }
 }
+
+.callout {
+    padding: $alert-padding-y $alert-padding-x;
+    margin-bottom: $alert-margin-bottom;
+    border: 1px solid $card-border-color;
+    border-left-width: 5px;
+    border-radius: $card-inner-border-radius;
+    background-color: $card-bg;
+
+    .callout-heading {
+        margin-top: 0;
+    }
+
+    h3.callout-heading {
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    &.callout-primary {
+        border-left-color: $primary;
+
+        .callout-heading {
+            color: $primary;
+        }
+    }
+
+    &.callout-info {
+        border-left-color: $gray-800;
+
+        .callout-heading {
+            color: $gray-800;
+        }
+    }
+
+    &.callout-danger {
+        border-left-color: $danger;
+
+        .callout-heading {
+            color: $danger;
+        }
+    }
+
+    &.callout-success {
+        border-left-color: $success;
+
+        .callout-heading {
+            color: $success;
+        }
+    }
+
+    &.callout-warning {
+        border-left-color: $warning;
+
+        .callout-heading {
+            color: $warning;
+        }
+    }
+}