Mobile Preferences Screen Prototype

[ghalestrilo]

Part of the Mobile UI project. This PR implements a screen to access and control editor settings.

This PR requires #1467 to be merged

How to test:

1. Run the app locally with the MOBILE_ENABLED flag set to true (MOBILE_ENABLED=true npm start)

• You should be able to access /mobile
• You should be able to edit code
• Clicking the gear icon should take you to the settings screen
• You should be able to change settings and go back to the editor
• Preview Screen should be working as well

2. Run the app without the flag enabled

• It should work as usual
• /mobile routes should not be accessible

I have verified that this pull request:

• has no linting errors (npm run lint)
• is from a uniquely-named feature branch and has been rebased on top of the latest master. (If I was asked to make more changes, I have made sure to rebase onto master then too)
• is descriptively named and links to an issue number, i.e. Fixes #123

[catarak]

I'm also noticing some styles on the Preferences not being right, specifically the "X" next to "Preferences" (should be in the right corner)? and I also notice that "Used with screen reader" is not the right color for the theme.

[catarak]

Would it make sense to extend from client/common/Button? No worries if that's overcomplicated. Either way, I'd like this to use remSize so the measurement can easily be read as pixels.

[ghalestrilo]

Sure! I updated it

[catarak]

I think this file could have a more descriptive/specific name since "Selector" feels pretty generic, where this component is specifically being used for a Preference selection.

[ghalestrilo]

True. I renamed it to <PreferencePicker /> to be more descriptive

[catarak]

When trying this on my phone, the "On" and "Off" text felt too small. In the light theme, the contrast between "On" being selected or "Off" being selected feels too subtle, though maybe that needs to be addressed in a separate PR.

A design idea would be to make the "Settings X" at the top into a bar, with a separate background color, maybe the same color as on the main page (the panel color).

[ghalestrilo]

I increased the option label font-size to 16px on the mobile view, that should be a bit better
About the Header, I think we need to test it on the second iteration. I thought leaving it transparent conveyed the idea that it's a "temporary" Screen / Modal, with a different purpose from the ones with solid headers.

[catarak]

About the Header, I think we need to test it on the second iteration. I thought leaving it transparent conveyed the idea that it's a "temporary" Screen / Modal, with a different purpose from the ones with solid headers.

Sounds good! I think it's worth testing, as when I opened the screen, the hierarchy between "Settings" and "General Settings" felt confusing to me as they are both the same font size and styling.

[catarak]

@ghalestrilo looks great! I just pushed a commit that re-added the Redux DevTools to App.jsx... maybe this could be done with an environment variable so that you don't have to comment/uncomment it all of the time?