Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1.x] Style improvements #177

Merged
merged 4 commits into from
Aug 8, 2022
Merged

[1.x] Style improvements #177

merged 4 commits into from
Aug 8, 2022

Conversation

jessarcher
Copy link
Member

@jessarcher jessarcher commented Aug 8, 2022

This PR primarily addresses the contrast and readability of the "Log in" and "Register" links in the Vue and React versions while using dark mode. I watched someone use Laravel for the first time, with the Breeze React stack, and they didn't notice the links.

It adds the missing dark text color variant that is present in the welcome.blade.php template from the skeleton, which makes the text lighter when on a dark background.

While making this change, I found that the Welcome.vue page had scoped styles that did not include the CSS class required for the above change. Rather than manually add the class, I chose to remove the scoped styles completely, in favour of using the classes provided by Tailwind. This is consistent with the Welcome.jsx page from the React version.

It's important to note that welcome.blade.php requires these styles to be included in the view because the skeleton does not come with Tailwind. It also ensures that users get a styled welcome page even when they haven't compiled their assets. The Vue and React versions always require a build step, and Breeze provides Tailwind, so the CSS classes don't need to be baked in.

The only caveat is that the classes in welcome.blade.php use a different color palette than Tailwind 3. The React version was already using the Tailwind colors, but now the Vue version is as well. If we want them to be consistent, I would suggest we change the baked-in classes in welcome.blade.php to use Tailwind 3 colors. If we prefer the warmer grays from the current skeleton, we could look at switching everything to one of the other grays that Tailwind 3 provides, such as Zinc or Neutral. Alternatively, we could add the custom palette to the tailwind.config.js file in this project.

Additionally, the "Log in" link of the Vue version contained underlined white space after the link, so I've addressed this by removing the white space, which makes it consistent with welcome.blade.php.

Here are screenshots of the three stacks before any changes were made:

Blade before:

breeze-blade-before

Vue before:

breeze-vue-before

(Note the underlined whitespace after the "Log in" link)

React before:

breeze-react-before

The contrast on the React version is the worst, and it's not helped on a high-resolution screen where the links are very small and far away from the rest of the content on the page.

This PR doesn't change the Blade stack, so here is what the Vue and React versions look like after these changes:

Vue after:

breeze-vue-after

React after:

breeze-react-after

@jessarcher jessarcher marked this pull request as ready for review August 8, 2022 03:48
@jessarcher
Copy link
Member Author

Jetstream is also missing the dark variant on the nav links, so if this is merged, I'll make the same change over there.

@taylorotwell taylorotwell merged commit a6817a4 into 1.x Aug 8, 2022
@taylorotwell taylorotwell deleted the style-improvements branch August 8, 2022 13:25
slimani-dev pushed a commit to slimani-dev/breeze that referenced this pull request Jan 21, 2023
* Remove unnecessary styles from Vue welcome page

* Add missing dark variant for welcome nav links

* Fix underlined trailing white space in Vue welcome page

* Make StyleCI happy
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants