feat: implementation of the avatar feature in workspaces screens

[nina992]

Overview

A simple avatar feature makes the UX a little bit better, and also to solve some style issues like Workspace banner stretching with many members

What I've done

1. Adding the avatar feature for below pages :

• Workspace section in Dashboard page
• Member list related to member section in workspace setting page
• Members section in each workspace in workspace list page
• profile picture in account page

2. Match the new feature with the design (https://www.figma.com/file/bdnfDaGXGoNfUws4y7JItl/Re%3AEarth-UI-Gamma?node-id=9967%3A176976)

3. Main changes in Code are :

   1. Adding a new Atom component (Avatar)
   2. Adding a new color in both (light & dark ) themes
   3. Refactoring the MemberlistEdit component
   4. Adding subHeader that could be used in field component

What I haven't done

I tried to fix this bug Broken alignment inside settings pages

How I tested

1. Check the navigation bar avatar and make sure that it matches the design
2. check the workspace section in dashboard and make sure it matches the design
3. check the member list in workspace setting page make sure that the list shows the email- the right design
4. check the members in workspace list

Screenshot

Which point I want you to review particularly

Memo

[netlify]

✅ Deploy Preview for reearth-web ready!

Name	Link
🔨 Latest commit	a76681a
🔍 Latest deploy log	https://app.netlify.com/sites/reearth-web/deploys/6266f0a1d8a3070008a6223b
😎 Deploy Preview	https://deploy-preview-206--reearth-web.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codecov]

Codecov Report

Merging #206 (a76681a) into main (2afc16e) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main     #206   +/-   ##
=======================================
  Coverage   43.70%   43.70%           
=======================================
  Files          60       60           
  Lines        1350     1350           
  Branches      227      227           
=======================================
  Hits          590      590           
  Misses        698      698           
  Partials       62       62           

Impacted Files	Coverage Δ
src/theme/colors.ts	100.00% <ø> (ø)
src/theme/darkTheme.ts	100.00% <ø> (ø)
src/theme/lightheme.ts	100.00% <ø> (ø)
src/theme/theme.ts	100.00% <ø> (ø)

[KaWaite]

Made some suggestions, comments and asked for some changes!

Also, UI-based observations:

• Dashboard icon isn't centered

- Navbar avatar isn't updated - The role and buttons (this screenshot doesn't show the buttons bc its my personal workspace) aren't centered really with the title AND subtitle

[rot1024]

Rename the PR title because "avatar system" is abstract so that most people cannot understand what is changed in UI:

e.g.

• feat: display avatars in the workspace screen

[lavalse]

And also don't forget to update the navigation header 😂

[lavalse]

And also update this page ( account setting page ) please .

design is here

[issmail-basel]

Just a few comments to answer