[refactor] Remove direct usage of Theme from "Collection.section.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

[achiverram28]

Can I work on this

[davehakkens]

Thanks for wanting to help @achiverram28, i've seen you mentioned you wanted to take on a few other issues. Would suggest to do them one by one, not all at the same time. What about we start with one of these refractoring ones since they are still available?

[achiverram28]

Sure , that will be fine. Can you assign me this so that I can modify things. Can you elaborate a bit more on as to how to refactor thise code

[AlfonsoGhislieri]

Hi @achiverram28, I have assigned you to this issue, everything you need is referenced in the issue's description. We are trying to make components theme-aware: you can read about how this can be done with theme-ui here: https://theme-ui.com/sx-prop

Like @thisislawatts wrote, if you look at #2282 you can see an example of how to do this refactoring.

Let me know if you have further questions

[achiverram28]

Sure , I will start understanding things and start working on it

[iSCJT]

@achiverram28 how are you getting on with this one? would you like to stay assigned to the ticket?

[thesatyam05]

Hello, I am willing to work on this issue. can I?

@AlfonsoGhislieri @iSCJT @thisislawatts

[iSCJT]

@thesatyam05 I'd like to give @achiverram28 a little longer to reply in case they've started work on it. If you have a look at the link below there's some similar theme usage refactoring issues you could pick up. Thanks for wanting to help out 🤩

https://github.com/orgs/ONEARMY/projects/7/views/2

[iSCJT]

@thesatyam05 are you still interested in taking this one on?

[onearmy-bot]

:tada: This issue has been resolved in version 1.87.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: