Replace Font Awesome icons with PNGs in JI

Replace all Font Awesome icons in JI with PNGs so they are displayed
correctly with Tor Browser in "Safest" setting (freedomofpress#5546 & freedomofpress#5576).

Related changes included:
- Increase font size of source submisison counts text in /
- Ensure consistent vertical spacing in users table in /admin/

securedrop/journalist_templates/_source_row.html

@@ -4,27 +4,39 @@
   <time class="date" title="{{ source.last_updated|rel_datetime_format }}" datetime="{{ source.last_updated|rel_datetime_format(fmt="%Y-%m-%d %H:%M:%S%Z") }}">{{ source.last_updated|rel_datetime_format(relative=True) }}</time>
   <div class="designation">
     {% if source.star.starred %}
-      <button class="button-star starred" type="submit"
-              formaction="{{ url_for('col.remove_star', filesystem_id=source.filesystem_id) }}"><i class="fa fa-star"></i></button>
+      <button class="button-star starred" type="submit" formaction="{{ url_for('col.remove_star', filesystem_id=source.filesystem_id) }}">
+        <img src="{{ url_for('static', filename='icons/starred.png') }}" class="icon-star-source" height="15" alt="starred-icon">
+      </button>
       <input type="checkbox" name="cols_selected" value="{{ source.filesystem_id }}">
       <a href="/col/{{ source.filesystem_id }}" id="starred-source-link-{{ loop_index }}" class="code-name {% if source.num_unread != 0 %}unread{% else %}read{% endif %}">
         {{ source.journalist_designation }}
       </a>
     {% else %}
-      <button class="button-star un-starred" type="submit"
-        formaction="{{ url_for('col.add_star', filesystem_id=source.filesystem_id) }}"><i class="fa fa-star"></i></button>
+      <button class="button-star un-starred" type="submit" formaction="{{ url_for('col.add_star', filesystem_id=source.filesystem_id) }}">
+        <img src="{{ url_for('static', filename='icons/unstarred.png') }}" class="icon-star-source off-hover" height="15" alt="unstarred-icon">
+        <img src="{{ url_for('static', filename='icons/starred.png') }}" class="icon-star-source on-hover" height="15" alt="starred-icon">
+      </button>
       <input type="checkbox" name="cols_selected" value="{{ source.filesystem_id }}">
       <a href="/col/{{ source.filesystem_id }}" id="un-starred-source-link-{{ loop_index }}" class="code-name {% if source.num_unread != 0 %}unread{% else %}read{% endif %}">
         {{ source.journalist_designation }}
       </a>
     {% endif %}
   </div>
   <div class="submission-count">
-    <span><i class="far fa-file-archive"></i> {{ ngettext('1 doc', '{num} docs', docs).format(num=docs) }}</span>
-    <span><i class="far fa-file-alt"></i> {{ ngettext('1 message', '{num} messages', msgs).format(num=msgs) }}</span>
+    <span>
+      <img src="{{ url_for('static', filename='icons/files.png') }}" class="icon" height="16" alt="files-icon">
+      {{ ngettext('1 doc', '{num} docs', docs).format(num=docs) }}
+    </span>
+    <span>
+      <img src="{{ url_for('static', filename='icons/messages.png') }}" class="icon" height="13" alt="messages-icon">
+      {{ ngettext('1 message', '{num} messages', msgs).format(num=msgs) }}
+    </span>
     {% if source.num_unread > 0 %}
       <span class="unread">
-        <a class="btn small" href="/download_unread/{{ source.filesystem_id }}"><i class="fa fa-download"></i> {{ ngettext('1 unread', '{num} unread', source.num_unread).format(num=source.num_unread)}}</a>
+        <a class="btn small" href="/download_unread/{{ source.filesystem_id }}">
+          <img src="{{ url_for('static', filename='icons/download.png') }}" class="icon" height="13" alt="download-icon">
+          {{ ngettext('1 unread', '{num} unread', source.num_unread).format(num=source.num_unread) }}
+        </a>
       </span>
     {% endif %}
   </div>

securedrop/journalist_templates/admin.html

@@ -3,7 +3,10 @@
 <h1>{{ gettext('Admin Interface') }}</h1>
 
 <form action="{{ url_for('admin.add_user') }}">
-  <button type="submit" id="add-user"><i class="fa fa-plus"></i>{{ gettext('ADD USER') }}</button>
+  <button type="submit" id="add-user">
+    <img src="{{ url_for('static', filename='icons/plus.png') }}" class="icon" height="15" alt="plus-icon">
+    {{ gettext('ADD USER') }}
+  </button>
 </form>
 
 <hr class="no-line">
@@ -22,11 +25,27 @@ <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 edit-user-button" 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" data-username="{{ user.username }}">
+            <i title="{{ gettext('Edit user {username}').format(username=user.username) }}">
+              <img src="{{ url_for('static', filename='icons/edit-user.png') }}" class="icon" height="16" alt="edit-user-icon">
+            </i>
+          </a>
+        </td>
 	{% if user.id == g.user.id %}
-        <td><i class="far fa-trash-alt disabled-delete-button"></i></td>
+        <td>
+          <i class="disabled-delete-button"></i>
+          <img src="{{ url_for('static', filename='icons/trash-disabled.png') }}" height="16" alt="trash-disabled-icon">
+        </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>
+        <td>
+          <button type="submit" class="plain delete-user" formaction="/admin/delete/{{ user.id }}" data-username="{{ user.username}}">
+            <!-- <i title="{{ gettext('Delete user {username}').format(username=user.username) }}"> -->
+              <img src="{{ url_for('static', filename='icons/trash.png') }}" class="off-hover" height="16" alt="trash-icon">
+              <img src="{{ url_for('static', filename='icons/trash-hover-red.png') }}" class="on-hover" height="16" alt="trash-icon">
+            <!-- </i> -->
+          </button>
+        </td>
 	{% endif %}
         <td><time class="date" title="{{ user.created_on }}">{{ user.created_on|rel_datetime_format(relative=True) }}</time></td>
         {% if user.last_access %}
@@ -45,7 +64,8 @@ <h1>{{ gettext('Admin Interface') }}</h1>
 <hr class="no-line">
 
 <a href="{{ url_for('admin.manage_config') }}" class="btn" id="update-instance-config">
-  <i class="fas fa-pencil-alt"></i> {{ gettext('INSTANCE CONFIG') }}
+  <img src="{{ url_for('static', filename='icons/pencil-alt.png') }}" class="icon" height="15" alt="edit-icon">
+  {{ gettext('INSTANCE CONFIG') }}
 </a>
 
 <hr class="no-line">

securedrop/journalist_templates/admin_add_user.html

@@ -71,6 +71,9 @@
       <span class="form-validation-error">{{ error }}</span><br>
     {% endfor %}
   </p>
-  <button type="submit"><i class="fa fa-plus"></i>{{ gettext('ADD USER') }}</button>
+  <button type="submit">
+    <img src="{{ url_for('static', filename='icons/plus.png') }}" class="icon" height="15" alt="plus-icon">
+    {{ gettext('ADD USER') }}
+  </button>
 </form>
 {% endblock %}

securedrop/journalist_templates/col.html

@@ -4,7 +4,7 @@
 
   <p class="breadcrumbs">
     <a href="/">{{ gettext('All Sources') }}</a>
-    <i class="fa fa-chevron-right"></i>
+    <img src="{{ url_for('static', filename='icons/chevron-right.png') }}" class="icon" height="14" alt=">">
     <strong>{{ source.journalist_designation }}</strong>
   </p>
 
@@ -13,9 +13,15 @@
     <form action="/bulk" method="post">
       <p>
         <div id="select-container"></div>
-        <button type="submit" name="action" value="download" class="small"><i class="fa fa-download"></i> {{ gettext('Download Selected') }}</button>
+        <button type="submit" name="action" value="download" class="small">
+          <img src="{{ url_for('static', filename='icons/download.png') }}" class="icon" height="13" alt="download-icon"> {{ gettext('Download Selected') }}
+        </button>
         <a href="#delete-selected-confirmation-modal" id="delete-selected-link">
-          <button type="button" class="small danger"><i class="far fa-trash-alt"></i> {{ gettext('Delete Selected') }}</button>
+          <button type="button" class="small danger">
+            <img src="{{ url_for('static', filename='icons/trash.png') }}" class="icon off-hover" height="13" alt="trash-icon">
+            <img src="{{ url_for('static', filename='icons/trash-hover-white.png') }}" class="icon on-hover" height="13" alt="trash-icon">
+            {{ gettext('Delete Selected') }}
+          </button>
         </a>
       </p>
 
@@ -25,29 +31,43 @@
             {% if doc.filename.endswith('reply.gpg') %}
               {% if not doc.deleted_by_source %}
                 <input type="checkbox" name="doc_names_selected" value="{{ doc.filename }}" class="doc-check">
-                <span title="{{ gettext('Reply') }}" class="icon"><i class="fa fa-reply pull right"></i></span>
+                <span title="{{ gettext('Reply') }}" class="icon">
+                  <img src="{{ url_for('static', filename='icons/reply.png') }}" class="icon" width="16" alt="reply-icon">
+                </span>
               {% else %}
                 <input type="checkbox" name="doc_names_selected" value="{{ doc.filename }}" class="doc-check">
-                <span title="{{ gettext('Read') }}" class="icon"><i class="fa fa-check"></i></span>
+                <span title="{{ gettext('Read') }}" class="icon">
+                  <img src="{{ url_for('static', filename='icons/check.png') }}" class="icon" width="16" alt="check-icon">
+                </span>
               {% endif %}
             {% elif not doc.seen %}
               <input type="checkbox" name="doc_names_selected" value="{{ doc.filename }}" class="doc-check unread-cb">
-              <span title="{{ gettext('Unread') }}" class="icon"><i class="fa fa-envelope"></i></span>
+              <span title="{{ gettext('Unread') }}" class="icon">
+                <img src="{{ url_for('static', filename='icons/envelope-closed.png') }}" class="icon" width="16" alt="closed-envelope-icon">
+              </span>
             {% else %}
               <input type="checkbox" name="doc_names_selected" value="{{ doc.filename }}" class="doc-check">
-              <span title="{{ gettext('Read') }}" class="icon"><i class="fa fa-envelope-open"></i></span>
+              <span title="{{ gettext('Read') }}" class="icon">
+                <img src="{{ url_for('static', filename='icons/envelope-open.png') }}" class="icon" width="16" alt="open-envelope-icon">
+              </span>
             {% endif %}
             <a class="file {% if not doc.seen 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) }}">
               <span class="filename">{{ doc.filename }}</span>
             </a>
             <span class="info"><span title="{{ doc.size }} bytes">{{ doc.size|filesizeformat() }}</span></span>
 
             {% if doc.filename.endswith('-doc.gz.gpg') %}
-              <i title="{{ gettext('Uploaded Document') }}" class="far fa-file-archive pull-right"></i>
+              <i title="{{ gettext('Uploaded Document') }}" class="pull-right">
+                <img src="{{ url_for('static', filename='icons/files.png') }}" height="16" alt="files-icon">
+              </i>
             {% elif doc.filename.endswith('-reply.gpg') %}
-              <i title="{{ gettext('Reply') }}" class="fa fa-reply pull-right"></i>
+              <i title="{{ gettext('Reply') }}" class="pull-right">
+                <img src="{{ url_for('static', filename='icons/reply.png') }}" width="16" alt="reply-icon">
+              </i>
             {% else %}
-              <i title="{{ gettext('Message') }}" class="far fa-file-alt pull-right"></i>
+              <i title="{{ gettext('Message') }}" class="pull-right">
+                <img src="{{ url_for('static', filename='icons/messages.png') }}" width="15" alt="messages-icon">
+              </i>
             {% endif %}
           </li>
         {% endfor %}
@@ -109,7 +129,10 @@ <h3>{{ gettext('Reply') }}</h3>
     <input type="hidden" name="col_name" value="{{ source.journalist_designation }}">
     <div class="center">
       <a href="#delete-collection-confirmation-modal" id="delete-collection-link">
-        <button type="button" class="danger"><i class="far fa-trash-alt"></i> {{ gettext('DELETE SOURCE AND SUBMISSIONS') }}</button>
+        <button type="button" class="danger">
+          <img src="{{ url_for('static', filename='icons/trash.png') }}" class="icon off-hover" height="15" alt="trash-icon">
+          <img src="{{ url_for('static', filename='icons/trash-hover-white.png') }}" class="icon on-hover" height="15" alt="trash-icon">
+        </i> {{ gettext('DELETE SOURCE AND SUBMISSIONS') }}</button>
       </a>
     </div>
 

securedrop/journalist_templates/config.html

@@ -12,7 +12,8 @@ <h2>{{ gettext('Alerts') }}</h2>
 
 <p>
   <a class="btn" href="{{ url_for('admin.ossec_test') }}" id="test-ossec-alert">
-    <i class="fa fa-bell"></i> {{ gettext('SEND TEST OSSEC ALERT') }}
+    <img src="{{ url_for('static', filename='icons/bell.png') }}" class="icon" height="15" alt="bell-icon">
+    {{ gettext('SEND TEST OSSEC ALERT') }}
   </a>
 </p>
 
@@ -36,7 +37,8 @@ <h5>
     {{ gettext('Recommended size: 500px * 450px') }}
   </h5>
   <button type="submit" id="submit-logo-update">
-    <i class="fas fa-pencil-alt"></i> {{ gettext('UPDATE LOGO') }}
+    <img src="{{ url_for('static', filename='icons/pencil-alt.png') }}" class="icon" height="15" alt="edit-icon">
+    {{ gettext('UPDATE LOGO') }}
   </button>
   {% include 'logo_upload_flashed.html' %}
 </form>
@@ -52,7 +54,8 @@ <h2>{{ gettext('Submission Preferences') }}</h2>
     <label for="prevent_document_uploads">{{ gettext('Prevent sources from uploading documents. Sources will still be able to send messages.') }}</label>
   </p>
   <button type="submit" id="submit-submission-preferences">
-    <i class="fas fa-pencil-alt"></i> {{ gettext('UPDATE SUBMISSION PREFERENCES') }}
+    <img src="{{ url_for('static', filename='icons/pencil-alt.png') }}" class="icon" height="15" alt="edit-icon">
+    {{ gettext('UPDATE SUBMISSION PREFERENCES') }}
   </button>
   {% include 'submission_preferences_saved_flash.html' %}
 </form>

securedrop/journalist_templates/edit_account.html

@@ -72,7 +72,10 @@ <h2>{{ gettext('Reset Password') }}</h2>
     <br>
     <span id="password" class="password">{{ password }}</span>
   </p>
-  <button type="submit" id="reset-password" class="upper"><i class="fas fa-sync"></i> {{ gettext('Reset Password') }}</button>
+  <button type="submit" id="reset-password" class="upper">
+    <img src="{{ url_for('static', filename='icons/sync.png') }}" class="icon" height="15" alt="sync-icon">
+    {{ gettext('Reset Password') }}
+  </button>
 </form>
 
 <hr class="no-line">
@@ -105,7 +108,11 @@ <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 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">
+    <img src="{{ url_for('static', filename='icons/sync.png') }}" class="icon" height="15" alt="sync-icon">
+    {{ button_text }}
+    <span class="tooltip">{{ tooltip_text }}</span>
+  </button>
 </form>
 {%- endmacro %}
 

securedrop/journalist_templates/index.html

@@ -8,12 +8,28 @@ <h1><span class="headline">{{ gettext('Sources') }}</span></h1>
       <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
       <p>
         <div id="index-select-container"></div>
-        <button type="submit" name="action" value="download-unread" class="small"><i class="fa fa-download"></i> {{ gettext('Download Unread') }}</button>
-        <button type="submit" name="action" value="download-all" class="small"><i class="fa fa-download"></i> {{ gettext('Download') }}</button>
-        <button type="submit" name="action" value="star" class="small"><i class="fa fa-star"></i> {{ gettext('Star') }}</button>
-        <button type="submit" name="action" value="un-star" class="small"><i class="far fa-star-half"></i> {{ gettext('Un-star') }}</button>
+        <button type="submit" name="action" value="download-unread" class="small">
+          <img src="{{ url_for('static', filename='icons/download.png') }}" class="icon" height="13" alt="download-icon">
+          {{ gettext('Download Unread') }}
+        </button>
+        <button type="submit" name="action" value="download-all" class="small">
+          <img src="{{ url_for('static', filename='icons/download.png') }}" class="icon" height="13" alt="download-icon">
+          {{ gettext('Download') }}
+        </button>
+        <button type="submit" name="action" value="star" class="small">
+          <img src="{{ url_for('static', filename='icons/star.png') }}" class="icon" height="14" alt="star-icon">
+          {{ gettext('Star') }}
+        </button>
+        <button type="submit" name="action" value="un-star" class="small">
+          <img src="{{ url_for('static', filename='icons/unstar.png') }}" class="icon" height="14" alt="unstar-icon">
+          {{ gettext('Un-star') }}
+        </button>
         <a href="#delete-confirmation-modal" id="delete-collections-link">
-          <button type="button" class="small danger"><i class="far fa-trash-alt"></i> {{ gettext('Delete') }}</button>
+          <button type="button" class="small danger">
+            <img src="{{ url_for('static', filename='icons/trash.png') }}" class="icon off-hover" height="13" alt="trash-icon">
+            <img src="{{ url_for('static', filename='icons/trash-hover-white.png') }}" class="icon on-hover" height="13" alt="trash-icon">
+            {{ gettext('Delete') }}
+          </button>
         </a>
       </p>
 

securedrop/sass/journalist.sass

@@ -74,8 +74,7 @@ button.small-danger, a.btn.small-danger, .btn.small-danger
 
 .submission .icon
   display: inline-block
-  width: 3.5%
-  color: #3d3d3d
+  margin-right: 3px
 
 #cols li.source
   .button-star

securedrop/sass/modules/_button.sass

@@ -52,10 +52,7 @@
       border: 1px solid  $color_grimace_blue
 
     &.delete-user
-      color: $color_urgent_coral
-
-      &:hover
-        color: #ce0083
+      padding: 0
 
 
   .btn
@@ -124,26 +121,20 @@
   a:hover > img.on-hover, button:hover > img.on-hover
     display: inline
 
-  a > img.icon, button > img.icon, button > i.fa, button > i.fas, a > i.fa, a >i.fas
+  a > img.icon, button > img.icon
     vertical-align: middle
     margin-right: 3px
     margin-bottom: 2px
     opacity: .9
 
+  // The source star icon must not inherit the vertical alignment of other button icons
+  button > img.icon-star-source
+    margin-right: 3px
+
   .button-star
     padding: 0
-    color: orange
     border: none
 
   .btn--space
     margin-bottom: 5px
     margin-left: 5px
-
-  // Icons used as buttons in the Journalist UI
-  .disabled-delete-button
-    color: #c0c0c0
-    font-size: 0.8em
-    letter-spacing: 0.2em
-
-  .edit-user-button
-    font-size: 0.8em

securedrop/sass/modules/_cols.sass

@@ -59,7 +59,7 @@
         span
           padding: 3px
           margin-right: 5px
-          font-size: 12px
+          font-size: 0.9em
           color: #3d3d3d
 
           &.unread

securedrop/sass/modules/_users-table.sass

@@ -2,5 +2,8 @@
   table#users
     width: 100%
 
+    th, td
+      padding-bottom: .85em
+
     td
       text-align: center