Implementing new buttons for each component or page can introduce design inconsistency, and using the same styling/code introduces repetition. A better approach is to create a button component we can reuse anywhere, similar to react-bootstrap's button component.

Implement the auth interface and flow described & illustrated in the prototype.

Add style and layout to the Auth page.

There are three main concerns in this issue:

• Unused profile image/avatar
• Options breaking in certain viewport breakpoints
• Jarring icon effects

Unused profile image/avatar

Currently, the profile image or avatar on the top navbar has no purpose as the My Profile option already exists. Ideally, the avatar should serve as a dropdown that provides a menu containing user-relevant options, such as a route to the user profile and application settings.

Options breaking in certain viewport breakpoints

Specifically, at 1128 pixel width.

Jarring icon effects

Initially, the top navbar options don't have icons. When the user hovers over them, the icons appear. It might not be totally jarring, and it might not be intended. But if it was, it's certainly a strange design choice.

Buttons don't seem to be the same across different components/containers. This eliminates a cohesive and professional look.

In the source files, there's a button component but appears to be rarely used.

The current frontend codebase is unmaintainable.

The app certainly showcases a lot of features but most of them were poorly implemented. In these past few months of development, there were a lot of bad practices used in the code. During those times, I mostly worked on removing these bad practices and making the code more maintainable, and it worked to a certain degree. However, a large portion of the project still requires a lot of work, for which I don't have enough time and energy. The project reinvents the wheel in too many areas and implements too many features from scratch. This more or less resulted in bad code quality.

Reworking the entire project isn't viable. The proposed solution is to create an alternative web app using modern development tools. We will still be using React. For styling, the proposed library is MUI.

Only seems to happen when hovering on the bottom part of the nav links

Include a page/route where any user can verify the authenticity of certificate issuers. When a user provides an issuer's wallet address/public key, the app should indicate wether or not the issuer is authentic, notable, or active.

Since the nav links are already positioned in the center area of the navbar, I think it's reasonable to do the same for the logo. This would also enable users to quickly identify the brand.