Comprehensive UI redesign to match OpenTofu.org aesthetic

[Yantrio]

Major visual overhaul of the registry UI to create a cohesive brand experience. Improving the layout to match what we did on opentofu.org.

[cloudflare-workers-and-pages]

Deploying registry-ui with    Cloudflare Pages

Latest commit:	9547e5a
Status:	✅  Deploy successful!
Preview URL:	https://c6b70b9b.registry-ui-dxi.pages.dev
Branch Preview URL:	https://cleanup-design.registry-ui-dxi.pages.dev

View logs

[diofeher]

Provider page looking really good :)

For the docs page itself:

I think this opentofu-registry adds unnecessary noise. And I think we can add more left spacing on the right block

In this another page, for example, information is looking really cluttered. But this is a problem on the current version that we have it too, so maybe we can fix it in a different PR.

[Yantrio]

@diofeher

I think this opentofu-registry adds unnecessary noise. And I think we can add more left spacing on the right block

I've implemented breadcrumbs in this space now, let me know if you think this is a good usage of this space.

[diofeher]

@Yantrio Oh, loved this idea! Looking way better :)

[yottta]

Looks really nice! Well done. 🙌

One thing that bothers me visually: is there a particular reason not to keep all the general information about the provider in one place? 🤔

[diofeher]

That's a good point @yottta ! I think it would be better to move the LICENSE to the top instead of moving the rest to the right sidebar.

[Yantrio]

The issue with the license is that repos can be multi-licensed and so this list could be quite large. I couldn't come up with a nice way to move that up top yet but im open to some ideas.

[yottta]

The issue with the license is that repos can be multi-licensed and so this list could be quite large. I couldn't come up with a nice way to move that up top yet but im open to some ideas.

Some random ideas:

• we could put the rest of the information under or above the license section, as shown in my previous screenshot
• we can have a license info on top, but followed by an ℹ️ icon which can show all the registered license of the provider

[yottta]

Looks good.

I wonder if you consider the change suggested here.

And in the new version, for the modules/provider search, the switch from the centered search box to the detailed view for the searched modules/providers is kinda disruptive. Maybe it's only me, but I don't find it to be a good UX. 🤷 Maybe we could have the detailed view directly shown? 🤔

[Yantrio]

Maybe we could have the detailed view directly shown? 🤔

Would you be able to elaborate or sketch out what you had in mind? I'm not sure I understand

[yottta]

Maybe we could have the detailed view directly shown? 🤔

Would you be able to elaborate or sketch out what you had in mind? I'm not sure I understand

IMO, when I start typing, I look at the field that I started typing into.
Look at this:
https://github.com/user-attachments/assets/453f4641-3d6d-465b-82d6-9c837260f7b6

Personally I find it quite disruptive when the field that I focus on moves in a glimpse.

Now that you asked, I am thinking on either leave the field as it is and when clicked/focused, the second view is shown, before starting typing. Another approach would be to change the initial text field to a button and when pressed, show directly the second view with the top left text field focused.

[apparentlymart]

Although the markup for the HeaderLogo component hasn't changed here (as far as I can tell?), it seems like the CSS has changed in a way that has upset the relative positioning of the "OpenTofu" logotype and the "Registry" text that appears after the logomark:

Even on the current site the baselines don't quite line up, at least on my system:

Since we have the whole thing wrapped in a link with aria-label="OpenTofu Registry" anyway, it might be better to incorporate the word "Registry" into the SVG image as path(s), just like we are already doing for the logotype, so that they'll always line up without relying on any CSS position trickery. 🤔

[Gogotchuri]

Yeah, it is way off for me

[apparentlymart]

This is kinda dense and so I ran out of time partway through reviewing it. I'm sharing what I have so far, but I've not read through everything yet.

[Gogotchuri]

Generally, the more consistent the design, the smoother the experience. So here are some inconsistencies I have noticed so far.

1. Colors on active menu items are different between docs and provider/module. And honestly, neither looks appealing to me. Let's standardize that. After I have tried a few other combinations for active items, I like

• background color: brand-300 with 40% transparency
• text color brand-800 - it is dark enough to read well under the background color, here are two old ones and a new one.
  Old:

New:

I haven't experimented in dark mode, but the same should work there too

2. The fact that the "path" section, including the home icon, jumps up after going into the docs or a specific provider/module, doesn't feel smooth. Not only that, but the font size and spacing are also changing. I would keep it in the same place and the same size when applying the gray borders and background. It will mean adding additional padding on the left on the exploration page and reducing the height of the "path" section. Below are the examples:

3. Search bars are identical except for the one in a provider filter. Grey background in dark mode is necessary, of course. But the outline colors are different for no reason. One is brand-500 and another one is brand-500 with transparency. Let's set brand-500 to the provider filter with no transparency value.

[Yantrio]

Thanks for the feedback @Gogotchuri and @apparentlymart , I've addressed those issues.

I'll try and play with the licensing information moving to the header now to see if I can find a nice approach.

[apparentlymart]

This is quite dense and hard to review thoroughly but it seems broadly good and so I'd be in favor of merging it and then dealing with any remaining concerns as separate PRs.

In particular, since the misaligned text in the logo was already present before this change (albeit not quite as bad), and since fixing it likely means adding a bunch of extra paths to an SVG asset, I'd support dealing with that particular change as a separate PR after this is landed.

[Gogotchuri]

I agree with @apparentlymart. Conducting a comprehensive review of this change line by line, with 4,000 lines of front-end code changes, is challenging. However, since most of the changes concern the UI, this version feels and looks better than the current one.
I am for merging this. Thanks for doing this work @Yantrio!

[Yantrio]

I know that @yottta expressed some concern over how jarring the new landing search experience is so if we are to merge this, I would like to do the following:

Have a child PR from this branch, in which I work on the search experience. We can review that separately and then merge all the way down into main.

(Sidenote: I just want to play with the mermaid gitgraph feature here to explain )

gitGraph
   commit id: "initial"
   
   branch cleanup-design
   checkout cleanup-design
   commit id: "design updates"
   commit id: "more cleanup"
   
   branch rework-search-landing
   checkout rework-search-landing
   commit id: "search experience improvements"
   
   checkout cleanup-design
   merge rework-search-landing
   
   checkout main
   merge cleanup-design

Loading

Does this approach sound okay @opentofu/maintainers ?

[yottta]

I know that @yottta expressed some concern over how jarring the new landing search experience is so if we are to merge this, I would like to do the following:

Have a child PR from this branch, in which I work on the search experience. We can review that separately and then merge all the way down into main.

(Sidenote: I just want to play with the mermaid gitgraph feature here to explain )

gitGraph
   commit id: "initial"
   
   branch cleanup-design
   checkout cleanup-design
   commit id: "design updates"
   commit id: "more cleanup"
   
   branch rework-search-landing
   checkout rework-search-landing
   commit id: "search experience improvements"
   
   checkout cleanup-design
   merge rework-search-landing
   
   checkout main
   merge cleanup-design

Loading

Does this approach sound okay @opentofu/maintainers ?

Of course! All in for that