I will cross check this with our internal design team, to check for consistency and feedback.

I like this approach, however I would like to refrain from Bootstrap and utilize native CSS frameworks like CSS Grid and Flexbox, which is supported in all major browsers.

Update: Internal review pending

Feedback from EFF Design

"Hi there, thanks for submitting this issue!
Our design team uses the following considerations when thinking about design changes. That said,

While we may not go with Bootstrap specifically, you make a great point regarding making the page responsive, and we're talking about how we can factor a responsive grid into our page designs going forward.

Separate styling for the URL:http://___ is a good suggestion. We might go with a different monospaced typeface choice, such as VeraMono, which we use on Certbot.eff.org for strings.

Different styling for the "Copy URL" button is a good suggestion, and we like how you stacked it (though we might bump up the button size to be a bit more uniform). To meet color contrast standards, we might suggest adding a border to the button, or upping the contrast in a different manner, since the present light grey is hard to distinguish from the white background.

The wording that you suggest for the buttons is an improvement, and we really appreciate your contributions on that. We quite like "Proceed anyway (unsafe)" and "Disable for this site", and are recommending making that change. The change for "Proceed anyway (unsafe)" to being the only one red is a nice change as well.

Thanks again for your contribution!"

For the typeface and Grid CSS, and other feedback I can submit a commit adding to this PR. It will then go under review again. I know this process is new in our repo, but trying to normalize these steps for future design contributions this so thank you for your patience!

Thank you @zoracon and EFF design teams for the quick and useful response. I agree that using native Grid CSS and a typeface which align with EFF overall design guidelines are great idea. Please feel free to add more commits to my PR and ping me anytime for testing.

When I created this PR and I was also looking into modifying the extension option page. We have notably different design/ themed UI elements, e.g. buttons in the extension popup, option and cancel pages. It would be great if EFF design team could provide a master CSS/ SCSS file which we can follow and use consistently across this project.

@cschanaj A master file is a great suggestion and I will definitely discuss this with our design people. Coordination with design hasn't always been stable but I am doing my best to integrate better design guidance for this project.

I have new commit in with adjustments. Had to commit some groundwork for CSS files and global variables.

I have below what it looks like now with suggestions from EFF Design and @cschanaj

EFF is going on holiday soon, so won't be able to get the proper sign off until after the holidays (Dec. 24-January 3)

Desktop:

Tablet:

Mobile:

@zoracon they look great to me. thank you so much for the excellent work!

@zoracon It would be better if a "Back to safety" button was added, and the other actions were less emphasized than "Back to safety" (see default browser error pages for example).

@zoracon It would be better if a "Back to safety" button was added, and the other actions were less emphasized than "Back to safety" (see default browser error pages for example).

@pipboy96 I can run that by UX review for an added workflow, for now we can get these changes in.

Pushed in a final round of minor edits and will merge soon

Just adding the last round's feedback for context

Thanks for sending that ticket and asking me about the designs. Just checked in with the design team 🙂

Overall, we approve of the changes! We had a few suggestions (ranging from easy changes to something that might require more work) if it’s helpful.

Easier change:
We’d like to increase the white space between the logo and text above. Image included for reference around general breathing room.

Easier change:
We thought the URL still gets a little lost. We wanted to suggest a way to differentiate the http://badssl.com text from the rest of the text. A suggestion was to use #666666 grey (a11y compliant at a large size of 14pt), and to bold the monospaced font.
..
We like the way the buttons stack on tablet and mobile, but thought the 3 buttons on desktop look a little awkward. We were wondering about moving the “copy URL” button logo to the right of the link. (It could even be an icon instead of a button.)

Thank you!!