SI: Re-Style Passphrase Widget

[ninavizz]

This is a child-issue to the epic #6211

Problem

Today's "Passphrase Widget" is problematic for many reasons, summarized across many touchpoints & reports:

• Lock semiotic confusing
• Refresh functionality opportunity for user error
• Colors outdated
• A11y unfriendly hide/show control

Solution

New to Figma? So are all of us! Learn about SecureDrop on Figma.

• Create new hide/show control per Figma
• Implement re-designed passphrase widget that does the following:
• Kill Remember your codename is: string
• Kill padlock icon
• Kill refresh control (Erik did already in PR Remove "Refresh codename" feature #6195)
• Kill hide/show control placed inside widget itself.
• Resize rectangular container
• Place 28x28 weeble icon colored grimace blue. Mimic padding/positioning within Figma.
• Container has 1px #FFFFFF outline & #FAFCFF fill
• Give dropshadow per Figma
• Place 7 irregularly wide #D0D3EB rectangles inside container for "Hidden" view. Rectangles imply redaction, do not need to dynamically resize to actual words. See Figma for sizing/padding/etc.
• Connect new A11y friendly hide/show control
• Typography: mmh... color grimace blue and make bold? May need to tweek size. Courier non-standard font, so probably want to stick with monospaced font.

oops... above screenshot grabbed, before `:focus` state added to hide/show control. 😸

[eaon]

Fixed in #6315