Include coral-theme broom graphic and move flash-notif styling to _fl…

…ash.sass

securedrop/sass/modules/_flash.sass

@@ -38,13 +38,18 @@
       i
         color: #D62727
 
+    &.important-header
+      margin: auto 6px
+      color: $color_urgent_coral
+
     &.important
       border-top: 1px solid #ece6e7
       border-left: 6px solid $color_urgent_coral
       border-bottom: 1px solid $color_urgent_coral
       border-right: 1px solid #ece6e7
       background-color: #FDFDFD
       color: #383838
+      align-items: center
 
       &:dir(rtl)
         text-align: right

securedrop/sass/source.sass

@@ -240,23 +240,3 @@ div.bubble
   image-rendering: crisp-edges
   margin-bottom: 10px
   margin-top: 5px
-
-// Session timeout flashed message styling
-.session-timeout-container
-  width: 100%
-  display: flex
-  align-items: center
-  justify-content: space-between
-
-.flashed_header
-  margin: 0px 10px 0px 10px
-  color: $color_urgent_coral
-
-// Logout page (Tor "new identity" CTA) styling
-// .button-container-float
-//   margin-bottom: 20px
-
-// .click-tor-cta
-//   display: flex
-//   flex-direction: column
-//   justify-content: space-between

securedrop/source_templates/flashed.html

@@ -7,6 +7,8 @@
         <img src="{{ url_for('static', filename='i/font-awesome/info-circle-black.png') }}" width="20" height="16">
         {% elif category == 'error' %}
         <img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/exclamation-triangle-black.png') }}" width="20" height="17">
+        {% elif category == 'important' %}
+        <img class="pull-left" src="{{ url_for('static', filename='i/bang-stop.png') }}" width="22" height="22">
         {% endif %}
         {{ message }}
       </div>

securedrop/source_templates/logout.html

@@ -1,9 +1,11 @@
 {% extends "base.html" %}
 {% block body %}
-<div>
+<div class="">
   <a href="{{ url_for('main.login') }}" class="btn pull-right"> {{ gettext('LOG IN') }}
   </a>
+  <br>
 <div>
+  <br>
   <h1>{{ gettext('One more thing...') }}</h1>
   <p id="click-new-identity-tor"> {{ gettext('Click the <img src={icon} alt="broom icon" width="16" height="16">&nbsp;<strong>New Identity</strong> button in your Tor browser\'s toolbar. This will clear your Tor browser activity data on this device.').format(icon=url_for('static', filename='i/torbroom-black.png'))  }}</p>
 </div>

securedrop/source_templates/session_timeout.html

@@ -1,6 +1,6 @@
-<div class="localized session-timeout-container" dir="{{ g.text_direction }}">
-    <img src="{{ url_for('static', filename='i/bang-stop.png') }}" width="22" height="22">
-    <div class="flashed_header"><strong>{{ gettext('Important') }}</strong>
-    </div>
-    <p>{{ gettext('You were logged out due to inactivity. Click the <img src={icon} alt="broom icon" width="16" height="16">&nbsp;<strong>New Identity</strong> button in your Tor browser\'s toolbar before moving on. This will clear your Tor browser activity data on this device.').format(icon=url_for('static', filename='i/torbroom-black.png'))  }}</p>
+<div class="flash important-header" dir="{{ g.text_direction }}">
+  <strong>{{ gettext('Important') }}</strong>
+</div>
+<div class="localized" dir="{{ g.text_direction }}">
+    <p>{{ gettext('You were logged out due to inactivity. Click the <img src={icon} alt="broom icon" width="16" height="16">&nbsp;<strong>New Identity</strong> button in your Tor browser\'s toolbar before moving on. This will clear your Tor browser activity data on this device.').format(icon=url_for('static', filename='i/torbroom-coral.png'))  }}</p>
 </div>