Components | Header design update

[sekaiking]

Live view

Theme.ts

• Edited previous variants as needed

• Added layout.container that should used on components that have a fluid width

• Added link.navigation variants which is going to be used in the Menu components next,

• Added borders variants, so we have all borders in one place

From my testing theme-ui doesn't read color variants inside border, so this is the solution I did

  borders: {
      0: 0,
      1: `1px solid ${colors.colors.text}`,
  },

• Added the logo as an image variant using backgroundImg, so we can change logo directly from theme.ts. In frontend/theme.ts, the logo is a direct url from the public folder, but in components/theme.ts, the logo is imported as a static file.

I'm not sure if that was the best approach, if you have any better idea on how to improve it let me know.

Header Component

• Added a sub component for Userbutton which is changed depending on user authentication and hover
• Title is being split now by / so we can style each part differently like the design and it doesn't affect titles that doesn't have /.
• Changed links in the header like the following:
  • Logo -> home
  • Title -> user bids
  • UserButton -> connect/disconnect

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/curaos/frontend/BTYMPJ3KEdoe27DAf2ifE3E6iLhB
✅ Preview: https://frontend-git-headerdesignupdate-curaos.vercel.app

[sekaiking]

Something went wrong with Chromatic and importing logo. I have to check that first

[sekaiking]

Something went wrong with Chromatic and importing logo. I have to check that first

working now :)

[bestatigen]

Looks great @achrafismyname. A couple of adjustments. The rest seems fine. We'll just do minor adjustments when the pages come together later on.

Thanks!

[sekaiking]

https://60d9b2ac2cf86a00396f9b0f-yieunoqzsq.chromatic.com/

[bestatigen]

Thanks

[github-actions]

🎉 This PR is included in version @cura/components-v1.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀