Feature/cgd 36

[timothyrusso]

Description and impacts

• Add the new Tech Stack component.
• Add primary colors configuration.
• Basic responsive layout.

Jira related story

CGD-36

Screenshots

How to test it

Add the <TechStackContainer /> component to the ./chingu-dashboard/src/app/page.tsx

[vercel]

Someone is attempting to deploy this pull request to the Chingu Dashboard Team on Vercel.

To accomplish this, the commit author's email address needs to be associated with a GitHub account.

Learn more about how to change the commit author information.

[vercel]

@timothyrusso is attempting to deploy a commit to the Chingu Dashboard Team on Vercel.

To accomplish this, @timothyrusso needs to request access to the Team.

Afterwards, an owner of the Team is required to accept their membership request.

If you're already a member of the respective Vercel Team, make sure that your Personal Vercel Account is connected to your GitHub account.

[github-actions]

Preview URL https://chingu-dashboard-ewu1xi7rl-chingu-dashboard.vercel.app

[Dan-Y-Ko]

Other than the comments I left, this looks good. Just one thing though. Can you add the page for this and put the component in that page itself. As a reminder, the techstack folder should contain an index.ts file (for the barrel exports), a page.tsx file, and then the components folder. The contents of the components folder will be same as what you have currently.

Once this is updated, I'll test it locally before merging :)

[timothyrusso]

Other than the comments I left, this looks good. Just one thing though. Can you add the page for this and put the component in that page itself. As a reminder, the techstack folder should contain an index.ts file (for the barrel exports), a page.tsx file, and then the components folder. The contents of the components folder will be same as what you have currently.

Once this is updated, I'll test it locally before merging :)

@Dan-Y-Ko Done, let me know if this is what you are expecting :)

[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	Sep 5, 2023 7:07am

[Dan-Y-Ko]

Ok, I cloned it locally, it looks good. Just a few more things to change.

1. Let's go with kebab case for the folder names if contains multiple words like in this situation (so rename it to tech-stack).
2. In tech-stack/index (so outside the components folder), change the file to this

export { default as TeckStackPage } from "./page";

3. In the tech-stack/page.tsx file, rename the component to TechStackPage.
4. In the root index.ts file (in the app folder), change the file to this

export { CounterPage } from "./counter/";
export { TeckStackPage } from "./tech-stack/";

You can remove what's in there currently, the import for the counter I had there initially is incorrect so might as well edit it to avoid confusion for the others.

Hopefully, I covered everything so we can close this pr lol

@Dan-Y-Ko Done! Let me know if I must correct something else :)

[Dan-Y-Ko]

As the theming is finalized now, can you update the colors to follow the theming set in Figma (the theme has been merged into the dev branch).

[timothyrusso]

As the theming is finalized now, can you update the colors to follow the theming set in Figma (the theme has been merged into the dev branch).

@Dan-Y-Ko I've updated the colors, but we are missing the color for the Avatar component: #D9D9D9;

[Dan-Y-Ko]

As the theming is finalized now, can you update the colors to follow the theming set in Figma (the theme has been merged into the dev branch).

@Dan-Y-Ko I've updated the colors, but we are missing the color for the Avatar component: #D9D9D9;

No, that is not part of the theme. You can see the colors in the figma here: https://www.figma.com/file/OAKUcYBLP3UOaRlnKrcf1G/Chingu-Dashboard?node-id=2743%3A14568&mode=dev

The figma may not be 100% updated to reflect the theme colors yet. In this case though, it's fine because the avatar component won't really have a color, it should just be an image (in the final product).

[Dan-Y-Ko]

Everything looks good to me now!