Developer Tools page

[bharateshwq]

Description

Fixes #2035

Created basic wire frame design for how the developer tools should look like while keeping in consideration the design language of policy Engine
Let me know if there are changes required for this

This in no way is the final commit that i expect to be merged there are a lot of optimization, responsiveness tasks and restructuring to be

Screenshots

[bharateshwq]

Hey @MaxGhenis ,
I have pushed a new commit can you have a look at it

[anth-volk]

@bharateshwq This is looking great! Thanks for your work on it. Could you just do the following on the design:

• Pad the titles underneath the images more on the top, perhaps to about 1rem
• Show how this looks on tablet (769 to ~1200px) and mobile (<769px) breakpoints

I might also ask for a couple changes to the text of the header afterward

[bharateshwq]

Hey @anth-volk,
I have done the necessary changes and added responsiveness to the developer-hub page

[anth-volk]

Thanks for your work on this @bharateshwq, this is looking good. There are a few changes I was hoping to request:

• At the moment, this code places a wrapper around the API status and simulations pages. Could you remove that, including the "back" arrow? The pages themselves should actually be unchanged.
• Could you link this page into the footer with the tag "Developer tools"?
• Minor, but could you add padding to the right of the text within the link boxes at the mobile viewpoint? In the image below, you can see how the word "Simulations" runs into the button.

I might also request some textual changes, but am hoping to do that at the end.

[anth-volk]

Could you remove this before your final commit?

[bharateshwq]

Hey @anth-volk,

I'll definitely fix that. Do you prefer having the api-status route separate, or keeping it under developer-tools/api-status? Right now, it's the latter, in which case users might find it more intuitive to have a back button on the API status and simulation pages. Let me know your thoughts!

[anth-volk]

@bharateshwq I think the way you layered the URLs makes sense, but I also think their browser back button should be able to handle that navigation action, as I believe react-router-dom writes to history.

[bharateshwq]

Yes @anth-volk, React Router does write to the history, so using the browser's back button would work for navigation. However, I'll be removing the back button from the UI. Additionally, the current(master) API status and simulation headers have different designs, which I feel may not appear consistent to the user.
How would you like me to proceed with this?

[anth-volk]

@bharateshwq That is a good point. Considering these are internal developer tools, I don't think it's too big of an issue, but certainly warrants opening a separate issue. I can't remember their designs well enough, but I'm guessing the API status page is more out-of-line with our current design. If you'd like to take it on after this one, we'd greatly appreciate it.

[bharateshwq]

Hey @anth-volk, I've made the updates as requested and am awaiting your feedback. Thanks!

[anth-volk]

@bharateshwq Thanks, I'm hoping to get to this either tonight or tomorrow