🔨 Switch Appearance to use useOvermind

[MichaelDeBoey]

Follow-up of #2806

Things I did extra:

• Extract EditorTheme into its own component
• Put all styles into the elements.ts file
• Use FunctionComponent instead of React.FC, since it's the same, but FunctionComponent is a bit clearer I think

[lbogdan]

Build for latest commit 095c9d9 is at https://pr3074.build.csb.dev/s/new.

[christianalfoni]

Hm, there seems to be some missing code and styling?

Are you running the project while refactoring? 😄 Let me know if you have any issues running it

[christianalfoni]

Screenshots

[MichaelDeBoey]

@christianalfoni This PR is waiting from before the #Hacktoberfest event.

I can't see the "Open VSCode Settings" button in production or my refactor, so I'm not sure how you can thb.

Will look into the width of the TextArea tho 🙂

[MichaelDeBoey]

I can't see the "Open VSCode Settings" button in production or my refactor, so I'm not sure how you can thb.

Found out this is because of the VSCodePlaceholder component, which needs store.preferences.settings.experimentVSCode.

codesandbox-client/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder.js

Line 10 in a4513fb

if (store.preferences.settings.experimentVSCode) {

Since there are no experiments atm, I can't test this out unfortunattely

codesandbox-client/packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/index.tsx

Lines 17 to 18 in a4513fb

	There are no experiments running at the moment. Stay tuned for new
	experiments!

Edit: on the other hand, If I didn't have store.preferences.settings.experimentVSCode, I should see children, which would need to show me a "Font Size" title... 😕

[MichaelDeBoey]

Found out the reason the "Open VSCode Settings" button isn't shown.

You need to be inside a sandbox to see it (so opening Preferences on dashboard won't show it):

codesandbox-client/packages/app/src/app/pages/common/Modals/PreferencesModal/VSCodePlaceholder.js

Lines 31 to 41 in a4513fb

	<Route path={editorUrl()}>
	{res =>
	res.match && (
	<div style={{ marginTop: '1rem' }}>
	<Button small onClick={openCommand}>
	Open VSCode Settings
	</Button>
	</div>
	)
	}
	</Route>

codesandbox-client/packages/common/src/utils/url-generator.ts

Line 58 in a4513fb

export const editorUrl = () => `/s/`;

[MichaelDeBoey]

@christianalfoni Resolved discussions + simplified components since settings.experimentVSCode is always true 🙂

[christianalfoni]

Looking great! 👍 😄

Tested:

• Open appearance in settings
• Open vscode
• Tested custom color scheme

[MichaelDeBoey]

Thanks! 🙂