Update icons placed on Submit/Cancel buttons in Source Interface #4501
Labels
help wanted
Issues we would definitely appreciate volunteer help with
Comments
ninavizz
changed the title
eloquence
changed the title
|
The mockup link points to a folder, I am guessing you meant to link to this specific mockup? https://scene.zeplin.io/project/5cb7d4d1f93bd116d7b25561/screen/5cf5cd50a10cff716e3db87b If so, I agree with these changes: the current icon choices look confusingly like a state indicator or a button-within-a-button. The simpler "X" and removal of the icon on the "Submit" button make a lot of sense to me. :) Since this issue is not just about colors, I've updated the issue title for clarity. |
redshiftzero
added
the
help wanted
|
Could you upload a larger version of the "x" PNG icon in both colors so it zooms cleanly on HiDPI monitors? Right now it's 9x9, 36x36 would be good. |
|
Between this and the upload-arrow bit, I feel we're establishing good precedent for creating a rule that all PNG art shd be generated at 3x the 100% size, and with PNG-24. That'll be a nice one to include in an eventual styleguide. Yep, creating 36x36, now! :) |
eloquence
added a commit
that referenced
this issue
Jul 19, 2019
eloquence
added a commit
that referenced
this issue
Jul 19, 2019
eloquence
added a commit
that referenced
this issue
Jul 22, 2019
|
I need a version of the "x" icon in the new "button blue" ( |
eloquence
added a commit
that referenced
this issue
Jul 24, 2019
|
New colors/usage + PNG artifacts documented: freedomofpress/securedrop-ux#65 |
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
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)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
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)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
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)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
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)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
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)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
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)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
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)
eloquence
added a commit
that referenced
this issue
Jul 31, 2019
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)
eloquence
added a commit
that referenced
this issue
Aug 13, 2019
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)
lev-csouffrant
pushed a commit
to lev-csouffrant/securedrop
that referenced
this issue
Aug 25, 2019
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 freedomofpress#4500 Resolves freedomofpress#4501 Resolves freedomofpress#4502 Resolves freedomofpress#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)
kushaldas
pushed a commit
that referenced
this issue
Sep 25, 2019
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)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Design Epic
Design updates to the Source UI (w/in the existing experience) are being explored in UX-repo issue #42. Within these updates, a new color palette is being used. The goal of the color updates are make the product reflect the SecureDrop brand, as it's presented on the website. They also make the product snazzier.
This issue has been drafted to implement the below in a PR after #4500 has been completed
This Issue
See mockup: static
sd-blueartwork w/o circle in static mode, andgrimace-blueartwork for hover. Both icons as PNGs are here.SubmitThe text was updated successfully, but these errors were encountered: