barryvdh
commented
6 months ago Hey, The screenshot looks nice, though it's partially more clear because you have the same filename there. I'm always open for suggestions, especially for the UI :)
Fonts This is a bit of a trade-off, because I would like to keep the styles/javascript to a minimum. So not super fond of including them.
Icons Yes this includes an older version. I want to updated it to 4.7 (via https://github.com/maximebf/php-debugbar/pull/624) but that's still a bit behind. Ideally I would not have font-awesome at all, but using svg icons. See https://github.com/maximebf/php-debugbar/issues/598 but that it's more of a 'further future' issue.
Colors and spacing I like this change :)
Just FYI, the project is split in the base debugbar (https://github.com/maximebf/php-debugbar) and this laravel integration. I maintain both packages, so if there are CSS fixes required that are benifitial for both versions, it's best to include them in the base.
nckrtl
First of all many thanks for creating and managing Laravel debugbar. As I use debugbar all the time I noticed some things in the ui that could be slightly improved. Before I go into detail here is a before and after:
At first you might not notice a lot of changes, and that's correct. I tried to keep them subtle while incorporating more of Laravel's branding.
Fonts
I changed the fonts. For sans serif font I used Figtree, which seems to be the default for the Laravel products. It's being used when installing Laravel (https://github.com/laravel/laravel/blob/11.x/resources/views/welcome.blade.php) but also in products like Horizon. For the mono font I used JetBrains Mono. I was able to use this fonts through a css change by base64 encoding them, it seemed I wasn't able to use them by just including the font files in the debugbar project.
Icons
All icons seem to come from an old version of font awesome. Also outline icons (clock) seems to being mixed with solid icons. It feels more consistent to stick to one type of icons. Updating the icons themselves also gives it a bit more modern feel and some of them make more sense to me. For example the PHP version icon could be the actual php icon. The memory icon could be a memory bank. I currently added the Icons through Figma so I still have to figure out how to get them displayed in debugbar.
Colors
In the current version on the queries tab the duration of each call is being shown with a red background. But as this is shown behind the text it felt like something was wrong with those queries as they seemed to be partially marked in red. To improve readability without losing the visual information of how long a query took we could reduce it to a 1px line aligned to the bottom.
I also made the highlighted yellow lines a bit darker to improve the contrast with the text.
Spacing and padding
I also virtually adjusted the spacing slightly of specific items in the top bar by removing the text shadows. The text shadows feel outdated and make the item take up slightly more space.
In the current version there is a padding around the content below the top bar. I'm not sure what kind of purpose this serves, or if it's a visual bug. I was able to adjust the CSS and remove it which looks nice and tidy to me.
Although I have most changes ready in the CSS to create a PR, I thought it would be good to first check here if you'd agree with the suggested changes. If yes, I'll continue making sure all tabs and their content looking good before creating a PR. Feedback is of course welcome and feel free to close this issue if things suggested are out of scope of this package.
Thanks, Nick.