update flashed message graphic and add login button to successful log…

…out page (may need button alignment tweak)

securedrop/sass/modules/_flash.sass

@@ -3,9 +3,9 @@
     display: flex
     flex-flow: row nowrap
     align-items: flex-start
-    border-radius: 10px
-    padding: 10px
+    border-radius: 2px
     margin: 10px
+    padding: 10px 16px
     text-align: left
     font-size: medium
 
@@ -39,10 +39,19 @@
         color: #D62727
 
     &.important
-      border: 1px solid #EBDCEB
-      background: #FDFAFD
+      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
+
+      &:dir(rtl)
+        text-align: right
+        border-top: 1px solid #ece6e7
+        border-left: 1px solid #ece6e7
+        border-bottom: 1px solid $color_urgent_coral
+        border-right: 6px solid $color_urgent_coral
 
-      strong
-        color: #673466
       p
         color: #555555

securedrop/sass/source.sass

@@ -240,3 +240,23 @@ 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/logout.html

@@ -1,6 +1,11 @@
 {% extends "base.html" %}
 {% block body %}
-<h1>{{ gettext('One more thing...') }}</h1>
-<br>
+<div>
+  <a href="{{ url_for('main.login') }}" class="btn pull-right"> {{ gettext('LOG IN') }}
+  </a>
+<div>
+  <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>
+</div>
 {% endblock %}

securedrop/source_templates/session_timeout.html

@@ -1,8 +1,6 @@
-<div class="localized" dir="{{ g.text_direction }}">
-  <div class="icon">
-    <img src="{{ url_for('static', filename='i/hand_with_fingerprint.png') }}">
-  </div>
-  <div class="message"><strong>{{ gettext('Important!') }}</strong><br>
-    <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. This will clear your Tor browser activity data on this device.').format(icon=url_for('static', filename='i/torbroom-black.png'))  }}</p>
-  </div>
+<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>