fix: activity grid within settings

[asheerrizvi]

PR Checklist

• [x] - Commit messages are descriptive, it will be used in our Release Notes

PR Type

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [ ] Developer experience (improves developer workflows for contributing to the project)

Description

Activity grid within settings.

Git Issues

Closes #1841

Screenshots/Videos

https://user-images.githubusercontent.com/17976252/184071371-8e1b1ad2-c2c2-45b5-b469-bacd5b451c09.mp4

---

What happens next?

Thanks for the contribution! We try to make sure all PRs are reviewed ahead of a monthly dev call (first Monday of the month, open to all!).

If the PR is working as intended it'll be merged and included in the next platform release, if not changes will be requested and re-reviewed once updated.

If you need more immediate feedback you can try reaching out on slack in the platform-dev channel.

[asheerrizvi]

@thisismattia have added a grid for these activity items. Gap between each of these items is 10px we can increase/decrease it if you want. Have also added some vertical margin for the subtitle "What is your primary plastic...". Let me know if you need any changes.

[thisislawatts]

Code looks good here @asheerrizvi, once @thisismattia has had a chance to sign off on the visuals we can merge.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 5200e4e):

https://onearmy-next--pr1886-fix-1841-8i8iy9lc.web.app

_{(expires Fri, 16 Sep 2022 06:04:09 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[thisismattia]

Nice one! Such a needed fix :) Now users can actually use it 😅 Mobile behaves nicely as per design. Nice job 🤘

[asheerrizvi]

@thisislawatts can merge this as well now.

[cypress[bot]]

---

Test summary

59 • 0 • 0 • 0 • 0

---

Run details

Project	onearmy-community-platform
Status	Passed
Commit	5200e4e364
Started	Aug 17, 2022 5:27 AM
Ended	Aug 17, 2022 5:30 AM
Duration	03:10 💡
OS	Linux Ubuntu - 20.04
Browser	Chrome 104

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[onearmy-bot]

:tada: This PR is included in version 1.20.2 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[thisismattia]

hey @asheerrizvi looks like on desktop the layout got a little screwed..

Would you be able to make all elements in one line? Maybe working with % rather than px. I think if we give each item width:19% we should have them nicely spaced on one line.

thanks!

[asheerrizvi]

@thisismattia sure will check it out tomorrow!