Feature/tech stack p1

[MattRueter]

Description

1. Added logic to fetch data from BE
2. Updated Tech Stack cards UI to match Figma design.
3. No CRUD functionality but buttons update UI state (toggling menus, forms etc...)

Issue link

Fixes # (issue)

Type of change

• 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 not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
chingu-dashboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2024 9:26pm

[Dan-Y-Ko]

I don't really like the shrink solution with the avatar, but it also doesn't looks very good right now without it, so I will need to talk to design team to see what we want to do.

Some things that you can change now though:

1. The buttons are way too long. They should just take up the width of its child element (so the text), with the natural padding we have in the button components themselves.
2. The add tech stack input, when user clicks outside of it, it should go back to the button. You can see the features and directory page to see example of that.
3. The finalize selection button is not lined up properly with the tech stack cards, it's off a bit.
4. The popover (the edit/delete menu) exists already in the features page. I'd like you to make use of that. Again, I only made that with that page specifically in mind so it will need to be refactored to be re-usable. First step would be to move that component out of that folder and put it in the global component folder. Also, just move the jsx out, the logic in editpopover file should stay the same, with the new re-usable popover component replacing the UI for it. I would like to keep it simple and just make the UI re-usable and accept the functions from the outside. You might need to make the width and height props as well, either way just some ideas for you.
5. The tech stack titles are missing styles

[Dan-Y-Ko]

Try the things suggested here: https://i.imgur.com/glEW7au.png. Also if you look at the old tech stack page spacing seems fine. Maybe have a look there to see what the difference is. Also don't worry about the avatars overlapping the ellipsis. That will never happen once this is finished.

[Dan-Y-Ko]

https://i.imgur.com/X3pLaIi.png when clicking into the input, the layout of the cards shifts. It shouldn't do that.

https://i.imgur.com/mVAmdwh.png the layout gets completely messed up when pressing on the ellipsis. Should look like this https://www.figma.com/design/OAKUcYBLP3UOaRlnKrcf1G/Chingu-Dashboard?node-id=14225-161630&t=ZrFqegvMqf1Geeu1-4

[Dan-Y-Ko]

The alignment of the popover is still off. I think the ellipsis needs to be moved to the left of the vote button. Also, the popover should be anchored to that ellipsis. Not sure how to explain it but I think if you put position relative on the ellipsis and then put the popover under it, it will position it relative to that ellipsis, which is the intended behavior.