Added user type badge to top bar and tweaked buttons states

[atomworks]

There is one main addition to the TopBar here and an additional small change.

• Main: As some projects have guest access, there is requirement to show the user type in the header. This has now been added and a base name for a color variable can be also passed to alter this within the bounds of our theme vars. You can also pass additional props to make it a link, so when you hover it, it will optionally change label with linkText and can either be a normal link (using linkHref) or use React Routers Link component (with the prop linkTo).
• Other: The drawer toggle button's blue line on hover and active states now have slightly rounded top corner.

https://github.com/user-attachments/assets/2d77d591-5bcf-4dec-805e-243119bee4ae

As a quick note on code. This ended up being a bit over engineered looking in places as I wanted to ensure that the size was the same when you hovered. As a result of that work there was a bug where the size would not match up correctly as the measurements taken to enforce the width would vary after render... a result of waiting for the fonts to render correctly it seems. The best solution for this was the setTimeout which solves the problem the majority of the time.

There doesn't seem to be a practical way to wait for the font to render correctly before rendering the component. That problem seems like something we would have to foudationally change. I'm open to ideas though.

[atomworks]

Made a small update but will wait for our next call before I formally request a review on this as there might be some more follow up!