[WIP] Design updates for SecureDrop 1.0.0, rev1

Updates colors throughout to a new "SecureDrop Blue" and a darker
"Grimace Blue", a new "danger" color, and blue gradients on the
index page; updates the favicon and the default logo.

Resolves #4500
Resolves #4501
Resolves #4502
Resolves #4503

Additional tweaks chiefly agreed upon with Nina Alter (@ninavizz)
during pair development:

Global:
- Removal of some button icons that did not disambiguate meaning
- Tweaks to default button letter spacing, font weight
- Pick headline color that fits with new overall theme
- Ensure consistent use of headline levels
- Removed unused colors, styles, icons
- More careful spacing between icons and text on buttons

Source Interface:
- New trashcan icon for deleting replies
- Flipped order of introductory text on submit page by importance

Journalist Interface:
- Restyled timestamps, "0 docs, 1 message" type counters to be
  less easily confused with buttons
- Restyled "Select all" type buttons to not have checkbox icons
  on them, to ensure they're not confused with actual checkboxes
- Added spacing between Select buttons and other actions, to
  make logical distinction more obvious
- Removed download icon from each table row, as it did not convey
  sufficient meaning to justify keeping it
- Removed "Reply" icon from Reply headline, and left-aligned it,
  for consistency with other headlines
- Made textbox the same width as the table above it, and removed
  fixed column width, to ensure proper scaling across viewport
  sizes
- Right-aligned "Submit" button consistent with other forms
- Removed hover from "X" of modals, as it did not really add
  value here

Admin Interface:
- Made it more obvious when the Delete icon is disabled

Out of scope for this rev:
- String changes
- Typography changes
- Docs screenshot updates (will be done after final rev)

install_files/ansible-base/roles/build-securedrop-app-code-deb-pkg/files/usr.sbin.apache2

@@ -264,7 +264,6 @@
   /var/www/securedrop/static/i/font-awesome/refresh-blue.png r,
   /var/www/securedrop/static/i/font-awesome/refresh-white.png r,
   /var/www/securedrop/static/i/font-awesome/times-white.png r,
-  /var/www/securedrop/static/i/font-awesome/trash-black.png r,
   /var/www/securedrop/static/i/font-awesome/black/guard.svg r,
   /var/www/securedrop/static/i/font-awesome/white/guard.svg r,
   /var/www/securedrop/static/i/font-awesome/white/exclamation-circle.svg r,
@@ -277,6 +276,11 @@
   /var/www/securedrop/static/i/tipbox/tipbox-hed-j-single.png r,
   /var/www/securedrop/static/i/tipbox/tipbox-hed-submit3.png r,
   /var/www/securedrop/static/i/tipbox/tipbox-logo.png r,
+  /var/www/securedrop/static/i/trash-x-out.png r,
+  /var/www/securedrop/static/i/trash-x-solid.png r,
+  /var/www/securedrop/static/i/x_icon-button_blue.png r,
+  /var/www/securedrop/static/i/x_icon-grimace_blue.png r,
+  /var/www/securedrop/static/i/x_icon-sd_blue.png r,
   /var/www/securedrop/static/js/journalist.js r,
   /var/www/securedrop/static/js/source.js r,
   /var/www/securedrop/static/fonts/fa-brands-400.eot r,

securedrop/journalist_templates/_confirmation_modal.html

@@ -4,7 +4,7 @@
     <a href="#close" title="{{ gettext('Close') }}" class="close">X</a>
     <h2>{{ modal_data.modal_header }}</h2>
     <p>{{ modal_data.modal_body }}</p>
-    <a href="#close" id="{{ modal_data.cancel_id }}" title="{{ gettext('Cancel') }}" class="btn sd-button">{{ gettext('Cancel') }}</a>
-    <button type="submit" id="{{ modal_data.submit_id }}" name="action" value="delete" class="sd-button {{ modal_data.submit_btn_type }}">{{ modal_data.submit_btn_text }}</button>
+    <a href="#close" id="{{ modal_data.cancel_id }}" title="{{ gettext('Cancel') }}" class="btn">{{ gettext('CANCEL') }}</a>
+    <button type="submit" id="{{ modal_data.submit_id }}" name="action" value="delete" class="{{ modal_data.submit_btn_type }}">{% filter upper %}{{ modal_data.submit_btn_text }}{% endfilter %}</button>
   </div>
 </div>

securedrop/journalist_templates/account_edit_hotp_secret.html

@@ -6,6 +6,6 @@
     <label for="otp_secret">{{ gettext('Change Secret') }}</label>
     <input name="otp_secret" type="text" placeholder="{{ gettext('HOTP Secret') }}"><br>
   </p>
-  <button class="sd-button" type="submit">{{ gettext('CONTINUE') }}</button>
+  <button type="submit">{{ gettext('CONTINUE') }}</button>
 </form>
 {% endblock %}

securedrop/journalist_templates/account_new_two_factor.html

@@ -21,6 +21,6 @@ <h1>{{ gettext('Enable YubiKey (OATH-HOTP)') }}</h1>
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
   <label for="token">{{ gettext('Verification code') }}</label>
   <input name="token" id="token" type="text" placeholder="123456">
-  <button type="submit" class="sd-button">{{ gettext('SUBMIT') }}</button>
+  <button type="submit">{{ gettext('SUBMIT') }}</button>
 </form>
 {% endblock %}

securedrop/journalist_templates/admin.html

@@ -3,7 +3,7 @@
 <h1>{{ gettext('Admin Interface') }}</h1>
 
 <form action="{{ url_for('admin.add_user') }}">
-  <button class="sd-button" type="submit" class="btn" id="add-user"><i class="fa fa-plus"></i>{{ gettext('ADD USER') }}</button>
+  <button type="submit" id="add-user"><i class="fa fa-plus"></i>{{ gettext('ADD USER') }}</button>
 </form>
 
 <hr class="no-line">
@@ -22,9 +22,9 @@ <h1>{{ gettext('Admin Interface') }}</h1>
     {% for user in users %}
       <tr class="user">
         <td>{{ user.username }}</td>
-        <td><a href="/admin/edit/{{ user.id }}" class="plain" data-username="{{ user.username }}"><i class="fa fa-edit" title="{{ gettext('Edit user {username}').format(username=user.username) }}"></i></a></td>
+        <td><a href="/admin/edit/{{ user.id }}" class="plain edit-user-button" data-username="{{ user.username }}"><i class="fa fa-edit" title="{{ gettext('Edit user {username}').format(username=user.username) }}"></i></a></td>
 	{% if user.id == g.user.id %}
-        <td><i class="far fa-trash-alt"></i></button></td>
+        <td><i class="far fa-trash-alt disabled-delete-button"></i></td>
 	{% else %}
         <td><button type="submit" class="plain delete-user" formaction="/admin/delete/{{ user.id }}" data-username="{{ user.username}}"><i class="far fa-trash-alt" title="{{ gettext('Delete user {username}').format(username=user.username) }}"></i></button></td>
 	{% endif %}
@@ -44,8 +44,8 @@ <h1>{{ gettext('Admin Interface') }}</h1>
 
 <hr class="no-line">
 
-<a href="{{ url_for('admin.manage_config') }}" class="btn sd-button" id="update-instance-config">
-  <i class="fas fa-pencil-alt"></i>{{ gettext('INSTANCE CONFIG') }}
+<a href="{{ url_for('admin.manage_config') }}" class="btn" id="update-instance-config">
+  <i class="fas fa-pencil-alt"></i> {{ gettext('INSTANCE CONFIG') }}
 </a>
 
 <hr class="no-line">

securedrop/journalist_templates/admin_add_user.html

@@ -71,6 +71,6 @@
       <span class="form-validation-error">{{ error }}</span><br>
     {% endfor %}
   </p>
-  <button type="submit" class="sd-button"><i class="fa fa-plus"></i>{{ gettext('ADD USER') }}</button>
+  <button type="submit"><i class="fa fa-plus"></i>{{ gettext('ADD USER') }}</button>
 </form>
 {% endblock %}

securedrop/journalist_templates/admin_edit_hotp_secret.html

@@ -7,6 +7,6 @@
     <label for="otp_secret">{{ gettext('Change Secret') }}</label>
     <input name="otp_secret" type="text" placeholder="{{ gettext('HOTP Secret') }}"><br>
   </p>
-  <button class="sd-button" type="submit">{{ gettext('CONTINUE') }}</button>
+  <button type="submit">{{ gettext('CONTINUE') }}</button>
 </form>
 {% endblock %}

securedrop/journalist_templates/admin_new_user_two_factor.html

@@ -24,6 +24,6 @@ <h1>{{ gettext('Enable YubiKey (OATH-HOTP)') }}</h1>
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
   <label for="token">{{ gettext('Verification code') }}</label>
   <input name="token" id="token" type="text" placeholder="123456">
-  <button type="submit" class="sd-button">{{ gettext('SUBMIT') }}</button>
+  <button type="submit">{{ gettext('SUBMIT') }}</button>
 </form>
 {% endblock %}

securedrop/journalist_templates/base.html

@@ -33,7 +33,7 @@
       <div class="container">
         {% block header %}
         <div id="header">
-          <a href="{{ url_for('main.index') }}"><img src="{{ url_for('main.select_logo') }}" class="logo small" alt="SecureDrop" width="250"></a>
+          <a href="{{ url_for('main.index') }}" class="no-bottom-border"><img src="{{ url_for('main.select_logo') }}" class="logo small" alt="SecureDrop" width="250"></a>
           {% include 'locales.html' %}
           {% if use_custom_header_image %}
           <div class="powered">

securedrop/journalist_templates/col.html

@@ -13,7 +13,7 @@
       <a href="#change-codename-{{ source.journalist_designation }}" title="{{ gettext('Generate a new random codename for this source. We recommend doing this if the first random codename is difficult to say or remember. You can generate new random codenames as many times as you like.') }}" class="plain" id="regenerate-codename-btn"><span id="regenerate-codename-btn-label">{{ gettext('Change codename') }}</span></a>
       <div id="change-codename-{{ source.journalist_designation }}" class="confirm-prompt">{{ gettext('Are you sure you want to generate a new codename?') }}
         <a href="#regenerate-code">{{ gettext('Cancel') }}</a>
-        <button class="sd-button" type="submit">{{ gettext('CONFIRM') }}</button>
+        <button class="button small" type="submit">{{ gettext('CONFIRM') }}</button>
       </div>
     </p>
   </form>
@@ -48,7 +48,7 @@
               <span title="{{ gettext('Read') }}" class="icon"><i class="fa fa-envelope-open"></i></span>
             {% endif %}
             <a class="file {% if not doc.downloaded and not doc.filename.endswith('reply.gpg') %}unread{% else %}read{% endif %}" href="{{ url_for('col.download_single_file', filesystem_id=filesystem_id, fn=doc.filename) }}">
-              <i class="fa fa-download"></i> <span class="filename">{{ doc.filename }}</span>
+              <span class="filename">{{ doc.filename }}</span>
             </a>
             <span class="info"><span title="{{ doc.size }} bytes">{{ doc.size|filesizeformat() }}</span></span>
 
@@ -88,15 +88,15 @@
 
   <hr class="cut-out">
   <hr class="no-line">
-  <h3><i class="fa fa-reply"></i> {{ gettext('Reply') }}</h3>
+  <h3>{{ gettext('Reply') }}</h3>
   {% if source.has_key %}
     <p>{{ gettext('You can write a secure reply to the person who submitted these documents:') }}</p>
     <form action="{{ url_for('main.reply') }}" method="post" autocomplete="off">
       <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
       <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}">
-      {{ form.message(id="reply-text-field", rows='10', cols='72', class="journalist-reply__input") }}
+      {{ form.message(id="reply-text-field", rows='10', class="journalist-reply__input") }}
       <hr class="no-line">
-      <button id="reply-button" class="sd-button" type="submit">{{ gettext('SUBMIT') }}</button>
+      <button id="reply-button" class="button pull-right" type="submit">{{ gettext('SUBMIT') }}</button>
     </form>
   {% elif source.flagged %}
     <p class="notification">{{ gettext("You've flagged this source for reply.") }}</p>
@@ -106,7 +106,7 @@ <h3><i class="fa fa-reply"></i> {{ gettext('Reply') }}</h3>
     <form action="{{ url_for('main.flag') }}" method="post">
       <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-      <button id="flag-button" class="sd-button" type="submit">{{ gettext('FLAG THIS SOURCE FOR REPLY') }}</button>
+      <button id="flag-button" type="submit">{{ gettext('FLAG THIS SOURCE FOR REPLY') }}</button>
     </form>
   {% endif %}
   <hr class="no-line">
@@ -117,9 +117,11 @@ <h3><i class="fa fa-reply"></i> {{ gettext('Reply') }}</h3>
     <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
     <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}">
     <input type="hidden" name="col_name" value="{{ source.journalist_designation }}">
-    <a href="#delete-collection-confirmation-modal" id="delete-collection-link">
-      <button type="button" class="sd-button danger"><i class="far fa-trash-alt"></i> {{ gettext('DELETE SOURCE AND SUBMISSIONS') }}</button>
-    </a>
+    <div class="center">
+      <a href="#delete-collection-confirmation-modal" id="delete-collection-link">
+        <button type="button" class="button danger"><i class="far fa-trash-alt"></i> {{ gettext('DELETE SOURCE AND SUBMISSIONS') }}</button>
+      </a>
+    </div>
 
     <!-- Confirmation modal for entire collection deletion -->
     {% with %}

securedrop/journalist_templates/config.html

@@ -11,8 +11,8 @@ <h2>{{ gettext('Alerts') }}</h2>
 <p>{{ gettext('Send an encrypted email to verify if OSSEC alerts work correctly:') }}</p>
 
 <p>
-  <a class="btn sd-button" href="{{ url_for('admin.ossec_test') }}" id="test-ossec-alert">
-    <i class="fa fa-bell"></i>{{ gettext('SEND TEST OSSEC ALERT') }}
+  <a class="btn" href="{{ url_for('admin.ossec_test') }}" id="test-ossec-alert">
+    <i class="fa fa-bell"></i> {{ gettext('SEND TEST OSSEC ALERT') }}
   </a>
 </p>
 
@@ -35,8 +35,8 @@ <h2>{{ gettext('Logo Image') }}</h2>
   <h5>
     {{ gettext('Recommended size: 500px * 450px') }}
   </h5>
-  <button type="submit" class="sd-button" id="submit-logo-update">
-    <i class="fas fa-pencil-alt"></i>{{ gettext('UPDATE LOGO') }}
+  <button type="submit" id="submit-logo-update">
+    <i class="fas fa-pencil-alt"></i> {{ gettext('UPDATE LOGO') }}
   </button>
   {% include 'logo_upload_flashed.html' %}
 </form>

securedrop/journalist_templates/delete.html

@@ -17,7 +17,7 @@
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
   <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}" autocomplete="off">
   <input type="hidden" name="confirm_delete" value="true">
-  <p><button class="sd-button" type="submit" name="action" value="delete" id="confirm-delete">{{ gettext('PERMANENTLY DELETE FILES') }}</button></p>
+  <p><button type="submit" name="action" value="delete" id="confirm-delete">{{ gettext('PERMANENTLY DELETE FILES') }}</button></p>
 </form>
 
 <p><a href="/col/{{ filesystem_id }}">{{ gettext('Return to the list of documents for {source_name}…').format(source_name=source.journalist_designation) }}</a></p>

securedrop/journalist_templates/edit_account.html

@@ -24,7 +24,7 @@ <h2>{{ gettext('Change Name &amp; Admin Status') }}</h2>
       <input name="is_admin" id="is-admin" type="checkbox" {% if user.is_admin %}checked{% endif %}>
       <label for="is_admin">{{ gettext('Is Admin') }}</label>
     </p>
-    <button class="sd-button" type="submit" id="update">{{ gettext('UPDATE') }}</button>
+    <button type="submit" id="update">{{ gettext('UPDATE') }}</button>
   </form>
 {% else %}
   <h1>{{ gettext('Edit your account') }}</h1>
@@ -40,7 +40,7 @@ <h2>{{ gettext('Change Name') }}</h2>
       {% set last_name = g.user.last_name or '' %}
       <input name="last_name" id="last_name" value = "{{ last_name }}"">
     </p>
-    <button class="sd-button" type="submit" id="change-name">{{ gettext('UPDATE') }}</button>
+    <button type="submit" id="change-name">{{ gettext('UPDATE') }}</button>
   </form>
 {% endif %}
 
@@ -72,7 +72,7 @@ <h2>{{ gettext('Reset Password') }}</h2>
     <br>
     <span id="password" class="password">{{ password }}</span>
   </p>
-  <button class="sd-button btn" type="submit" id="reset-password"><i class="fas fa-sync"></i> {{ gettext('Reset Password') }}</button>
+  <button type="submit" id="reset-password"><i class="fas fa-sync"></i> {% filter upper %}{{ gettext('Reset Password') }}{% endfilter %}</button>
 </form>
 
 <hr class="no-line">
@@ -105,7 +105,7 @@ <h2>{{ gettext('Reset Two-Factor Authentication') }}</h2>
   <input name="uid" type="hidden" value="{{ user.id }}">
   {% endif %}
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <button class="sd-button" id="button-reset-two-factor-{{ type }}" tooltip="{{ tooltip_text }}" type="submit" class="pull-right"><i class="fas fa-sync"></i> {{ button_text }}<span class="tooltip">{{ tooltip_text }}</span></button>
+  <button id="button-reset-two-factor-{{ type }}" tooltip="{{ tooltip_text }}" type="submit" class="pull-right"><i class="fas fa-sync"></i> {{ button_text }}<span class="tooltip">{{ tooltip_text }}</span></button>
 </form>
 {%- endmacro %}
 

securedrop/journalist_templates/locales.html

@@ -19,7 +19,7 @@
         {% else %}
           {% set url = '' %}
         {% endif %}
-        <a href="{{ url }}" rel="nofollow">
+        <a href="{{ url }}" rel="nofollow" class="no-bottom-border">
           <span>{{ g.locales[locale] }}</span>
         </a>
       </li>

securedrop/journalist_templates/login.html

@@ -9,7 +9,7 @@ <h1>{{ gettext('Login to access the journalist interface') }}</h1>
   <p><input class="login-password" id="login-form-password" type="password" name="password" placeholder="{{ gettext('Password') }}"></p>
   <p class="show-password-checkbox-container"><label><input id="show-password-check" type="checkbox">Show password</label></p>
   <p><input class="login-token" name="token" id="token" type="text" placeholder="{{ gettext('Two-factor Code') }}"></p>
-  <button class="sd-button" type="submit"><i class="far fa-arrow-alt-circle-right"></i> {{ gettext('LOG IN') }}</button>
+  <button type="submit">{{ gettext('LOG IN') }}</button>
 </form>
 
 {% endblock %}

securedrop/sass/_base.sass

@@ -24,8 +24,6 @@
 @import modules/doc-check
 // Text link - make links purple in running text, possibly unnecessary.
 @import modules/text-link
-// Some kind of button possibly sd=standard button. Belongs in button module?
-@import modules/sd-button
 // Tooltips for showing informations
 @import modules/tooltip
 //variation on button for select all / none. In journalist interface only?
@@ -68,8 +66,6 @@
 @import "modules/document-actions-button"
 // Grid item - part of the grid. Doesnt seem to be used very much though.
 @import "modules/grid-item"
-// Option - might be unused. Delete?
-@import "modules/option"
 // Flexbox - support for flexbox layouts
 @import "modules/flexbox"
 // Logo - Small and large versions of the branding; can also be the journalist org brand (not SD).
@@ -116,7 +112,6 @@
   +document-actions
   +doc-check
   +text-link
-  +sd-button
   +tooltip
   +select
   +pull
@@ -138,7 +133,6 @@
   +select-container
   +document-actions-button
   +grid-item
-  +option
   +flexbox
   +logo
   +submissions

securedrop/sass/_source_index.sass

@@ -1,4 +1,9 @@
 =source_index_rules
+
+  #recommend-tor, #disable-js
+    text-decoration: underline
+    border: 0
+
   .index-wrap
     display: block
     text-align: center
@@ -13,7 +18,7 @@
       height: 100%
       align-self: center
 
-      img
+      img.logo-image
         width: 80%
 
     p
@@ -31,22 +36,60 @@
 
     .index-column
       padding: 1em
-      display: block
+      display: flex
+      flex-direction: column
+      justify-content: space-between
       width: 48%
-      border: 1px solid $color_purple_medium
       border-top-width: 0
       border-bottom-width: 0
 
     .index-left
-      background: $color_purple_medium
+      background-image: linear-gradient(140deg, #0096dc, #005db7)
       color: white
       border-style: none
 
-    .index-top
-      border-top-width: 1px
+    div.index-right
+      background: white
+      border-width: 1px
+      border-style: solid
+      border-image-source: linear-gradient(145deg, #0096dc, #005db7)
+      border-image-slice: 1
+      color: #0A7CDC
+
+    .left-cut-out
+      border-color: white
+
+    .right-cut-out
+      border-color: #0A7CDC
+
+    .index-column-bottom-container
+      margin-top: 3em
+
+    #submit-documents-button, #login-button
+      padding: 10px 20px 10px 20px
+
+    #submit-documents-button
+      font-weight: bold
+      letter-spacing: 0
+      font-size: 90%
+      background: transparent
+      border: 1px solid white
+
+    #login-button
+      font-weight: bold
+      letter-spacing: 0
+      font-size: 90%
+      background-image: linear-gradient(111deg, #0082d9, #126ec8)
+
+    #login-button:hover
+      background-image: linear-gradient(72deg, $color_grimace_blue, #2d3273)
+      border-color: rgba(0, 0, 0, 0)
+      color: white
 
-    .index-bottom
-      border-bottom-width: 1px
+    #submit-documents-button:hover
+      color: white
+      background-image: linear-gradient(72deg, $color_grimace_blue, #2d3273)
+      border-color: rgba(0, 0, 0, 0)
 
     // This query is to reorder the flex box elements so that they correctly form the
     // two boxes (submit/returning) when the screen is sized down
@@ -73,14 +116,8 @@
       .index-column.index-top
         order: 4
 
-      .index-column.index-bottom
-        order: 6
-
       .index-column.index-left
         order: 2
 
       .index-column.index-left.index-top
         order: 1
-
-      .index-column.index-left.index-bottom
-        order: 3