From f4503fb654a246817010ef2bb6b0860a10432fff Mon Sep 17 00:00:00 2001 From: Erik Moeller Date: Fri, 19 Jul 2019 15:42:34 -0700 Subject: [PATCH] [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 - Consistent use of upper case on large 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) --- .../files/usr.sbin.apache2 | 6 +- .../_confirmation_modal.html | 4 +- .../account_edit_hotp_secret.html | 2 +- .../account_new_two_factor.html | 2 +- securedrop/journalist_templates/admin.html | 10 +- .../journalist_templates/admin_add_user.html | 2 +- .../admin_edit_hotp_secret.html | 2 +- .../admin_new_user_two_factor.html | 2 +- securedrop/journalist_templates/base.html | 2 +- securedrop/journalist_templates/col.html | 24 ++--- securedrop/journalist_templates/config.html | 8 +- securedrop/journalist_templates/delete.html | 2 +- .../journalist_templates/edit_account.html | 8 +- securedrop/journalist_templates/index.html | 2 +- securedrop/journalist_templates/locales.html | 2 +- securedrop/journalist_templates/login.html | 2 +- securedrop/sass/_base.sass | 6 -- securedrop/sass/_source_index.sass | 65 ++++++++++--- securedrop/sass/_variables.sass | 14 +-- securedrop/sass/global/_body-tag.sass | 1 - securedrop/sass/journalist.sass | 28 +++++- securedrop/sass/modules/_button.sass | 89 +++++++++++------- securedrop/sass/modules/_cols.sass | 17 ++-- securedrop/sass/modules/_confirm-modal.sass | 3 - securedrop/sass/modules/_headline.sass | 7 +- .../modules/_hr-horizontal-rule-line.sass | 7 +- securedrop/sass/modules/_link.sass | 18 +++- securedrop/sass/modules/_option.sass | 19 ---- securedrop/sass/modules/_panel.sass | 2 +- securedrop/sass/modules/_sd-button.sass | 7 -- securedrop/sass/modules/_snippet.sass | 2 +- securedrop/sass/modules/_submission.sass | 14 ++- securedrop/sass/modules/_text-link.sass | 8 +- securedrop/sass/source.sass | 9 +- securedrop/source_templates/base.html | 4 +- securedrop/source_templates/generate.html | 6 +- securedrop/source_templates/index.html | 57 +++++------ securedrop/source_templates/locales.html | 2 +- securedrop/source_templates/login.html | 9 +- securedrop/source_templates/lookup.html | 26 ++--- securedrop/static/i/favicon.png | Bin 1948 -> 5185 bytes .../static/i/font-awesome/trash-black.png | Bin 2280 -> 0 bytes securedrop/static/i/logo.png | Bin 44138 -> 10629 bytes securedrop/static/i/trash-x-out.png | Bin 0 -> 2263 bytes securedrop/static/i/trash-x-solid.png | Bin 0 -> 2198 bytes securedrop/static/i/x_icon-button_blue.png | Bin 0 -> 1558 bytes securedrop/static/i/x_icon-grimace_blue.png | Bin 0 -> 1641 bytes securedrop/static/i/x_icon-sd_blue.png | Bin 0 -> 254 bytes securedrop/static/js/journalist.js | 14 +-- 49 files changed, 294 insertions(+), 220 deletions(-) delete mode 100644 securedrop/sass/modules/_option.sass delete mode 100644 securedrop/sass/modules/_sd-button.sass delete mode 100644 securedrop/static/i/font-awesome/trash-black.png create mode 100644 securedrop/static/i/trash-x-out.png create mode 100644 securedrop/static/i/trash-x-solid.png create mode 100644 securedrop/static/i/x_icon-button_blue.png create mode 100644 securedrop/static/i/x_icon-grimace_blue.png create mode 100644 securedrop/static/i/x_icon-sd_blue.png diff --git a/install_files/ansible-base/roles/build-securedrop-app-code-deb-pkg/files/usr.sbin.apache2 b/install_files/ansible-base/roles/build-securedrop-app-code-deb-pkg/files/usr.sbin.apache2 index aa20d309d27..125892bb742 100644 --- a/install_files/ansible-base/roles/build-securedrop-app-code-deb-pkg/files/usr.sbin.apache2 +++ b/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, diff --git a/securedrop/journalist_templates/_confirmation_modal.html b/securedrop/journalist_templates/_confirmation_modal.html index 26662d56e3d..ad2d52d6886 100644 --- a/securedrop/journalist_templates/_confirmation_modal.html +++ b/securedrop/journalist_templates/_confirmation_modal.html @@ -4,7 +4,7 @@ X

{{ modal_data.modal_header }}

{{ modal_data.modal_body }}

- {{ gettext('Cancel') }} - + {{ gettext('CANCEL') }} + diff --git a/securedrop/journalist_templates/account_edit_hotp_secret.html b/securedrop/journalist_templates/account_edit_hotp_secret.html index cc4bc0bb954..131fc3a231f 100644 --- a/securedrop/journalist_templates/account_edit_hotp_secret.html +++ b/securedrop/journalist_templates/account_edit_hotp_secret.html @@ -6,6 +6,6 @@

- + {% endblock %} diff --git a/securedrop/journalist_templates/account_new_two_factor.html b/securedrop/journalist_templates/account_new_two_factor.html index c7ee696e8bb..60d0c05e090 100644 --- a/securedrop/journalist_templates/account_new_two_factor.html +++ b/securedrop/journalist_templates/account_new_two_factor.html @@ -21,6 +21,6 @@

{{ gettext('Enable YubiKey (OATH-HOTP)') }}

- + {% endblock %} diff --git a/securedrop/journalist_templates/admin.html b/securedrop/journalist_templates/admin.html index 2a54f19b49f..7a516c6129c 100644 --- a/securedrop/journalist_templates/admin.html +++ b/securedrop/journalist_templates/admin.html @@ -3,7 +3,7 @@

{{ gettext('Admin Interface') }}

- +

@@ -22,9 +22,9 @@

{{ gettext('Admin Interface') }}

{% for user in users %} {{ user.username }} - + {% if user.id == g.user.id %} - + {% else %} {% endif %} @@ -44,8 +44,8 @@

{{ gettext('Admin Interface') }}


- - {{ gettext('INSTANCE CONFIG') }} + + {{ gettext('INSTANCE CONFIG') }}
diff --git a/securedrop/journalist_templates/admin_add_user.html b/securedrop/journalist_templates/admin_add_user.html index da5e1aa88df..0423e5fc0d3 100644 --- a/securedrop/journalist_templates/admin_add_user.html +++ b/securedrop/journalist_templates/admin_add_user.html @@ -71,6 +71,6 @@ {{ error }}
{% endfor %}

- + {% endblock %} diff --git a/securedrop/journalist_templates/admin_edit_hotp_secret.html b/securedrop/journalist_templates/admin_edit_hotp_secret.html index 7a33f3abe45..397df7c7d9c 100644 --- a/securedrop/journalist_templates/admin_edit_hotp_secret.html +++ b/securedrop/journalist_templates/admin_edit_hotp_secret.html @@ -7,6 +7,6 @@

- + {% endblock %} diff --git a/securedrop/journalist_templates/admin_new_user_two_factor.html b/securedrop/journalist_templates/admin_new_user_two_factor.html index fa8abd38a22..52938994d15 100644 --- a/securedrop/journalist_templates/admin_new_user_two_factor.html +++ b/securedrop/journalist_templates/admin_new_user_two_factor.html @@ -24,6 +24,6 @@

{{ gettext('Enable YubiKey (OATH-HOTP)') }}

- + {% endblock %} diff --git a/securedrop/journalist_templates/base.html b/securedrop/journalist_templates/base.html index a18021178fb..cb020c79130 100644 --- a/securedrop/journalist_templates/base.html +++ b/securedrop/journalist_templates/base.html @@ -33,7 +33,7 @@
{% block header %}