community-platform [refactor] Remove direct usage of Theme from "EventsCreate.tsx"

[refactor] Remove direct usage of Theme from "EventsCreate.tsx"

Open thisislawatts opened this issue 1 year ago • 3 comments

Remove the following

// TODO: Remove direct usage of Theme
import { preciousPlasticTheme } from 'oa-themes'
const theme = preciousPlasticTheme.styles

At the moment we are importing the theme object directly and accessing its style properties. We should avoid doing this and instead make use of sx property available on all ThemeUI components to load these values out of the theme definition.

Read more about it here:

The sx prop lets you add any valid CSS to an element, while using values from your theme to keep styles consistent. You can think of the style object that the sx prop accepts as a superset of CSS. https://theme-ui.com/sx-prop

The aim should be for there to be no visual differences. However there may be circumstances where this would introduce better visual consistency across the UI. Feel free to reach out on Discord if you think you have found one of those scenarios.

Here's an example where the same change has been made, although I would call out that this specific file required more work than most 🤗 https://github.com/ONEARMY/community-platform/pull/2282