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

[thisislawatts]

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

[yatheeshraju]

Hi , Can i work on this ?

[davehakkens]

yes, go for it! :)

[AlfonsoGhislieri]

Any update here @yatheeshraju ?

[manacespereira]

This is already solved and should be closed, or am I wrong? I took a look at the master branch and seems it is already done

[balhelhas]

I agree that this issue has been done and it's on the master branch. I will put has done 👍

[ajotka]

Hi @balhelhas! Since this has already been moved to "done", can you close this issue, please?