feature: research page card redesign

[BaltacMihai]

PR Checklist

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

PR Type

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

Description

Place the top icons on each individual card instead of the "table header". I used a placeholder until we get an icon for the "Updates" sign. Removes direct usage of the theme object, instead accessing it within the sx property.

-- Additionally, I changed the empty state symbol from "-" to "0" because the user will now understand it better. In the old form, the user might have wondered if the data had loaded or not.

Git Issues

Closes #2450 Closes #2292

Screenshots/Videos

[codecov[bot]]

Codecov Report

Patch coverage: 37.50% and project coverage change: -0.09 :warning:

Comparison is base (70b90af) 43.16% compared to head (bd8b479) 43.07%.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2454      +/-   ##
==========================================
- Coverage   43.16%   43.07%   -0.09%     
==========================================
  Files         261      261              
  Lines        7195     7196       +1     
  Branches     1569     1569              
==========================================
- Hits         3106     3100       -6     
- Misses       4059     4069      +10     
+ Partials       30       27       -3     

Impacted Files	Coverage Δ
src/pages/Research/Content/ResearchList.tsx	34.48% <ø> (ø)
src/pages/Research/Content/ResearchListItem.tsx	13.79% <0.00%> (-8.79%)	:arrow_down:
packages/components/src/Icon/Icon.tsx	97.04% <100.00%> (+0.01%)	:arrow_up:
packages/components/src/Icon/svgs.tsx	100.00% <100.00%> (ø)

... and 9 files with indirect coverage changes

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[cypress[bot]]

1 flaky tests on run #3668 ↗︎

0

90

0

0

1

Details:

chore: added the "update" icon
Project: onearmy-community-platform	Commit: bd8b479e18
Status: Passed	Duration: 03:58 💡
Started: Jun 21, 2023 8:21 PM	Ended: Jun 21, 2023 8:25 PM

  src/integration/research/write.spec.ts • 1 flaky test • ci-chrome

View Output Video

Test		Artifacts
[Research] > [Edit a research article] > [By Owner]		Output Screenshots

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[davehakkens]

Looks good! Here you can find the icon @BaltacMihai

[github-actions[bot]]

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

https://onearmy-next--pr2454-master-apkuv3as.web.app

_{(expires Sat, 22 Jul 2023 20:04:17 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 6d65e4f8fee2f6ab2da0c1c3b85b8797d66afa59}

[onearmy-bot]

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

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[davehakkens]

Just noticed the font-size of the numbers is quite large, 18px. Could this be reduced to 14px @BaltacMihai (like on the how-to overview page)