-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
fix(login): Make login form and footer look like a dashboard panel #38131
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
Conversation
|
Yes, I would recommend the same corner roundness as well and maxbe also make it the same width like the login background? |
|
@szaimen @solracsf there was a design discussion in the linked issue and also here #35482 (comment), so I just picked the pill style as it seems to be the preferred one (?).
I do not think that works, because the footer text is much wider, looks like this: |
|
No problem, but from a design perspective, it makes no sense (to me) to have multiple border radius ;-) |
|
with reduced padding it indeed looks much better 👍 |
|
@nimishavijay is it very important that the footer is not wider than the login box? I personally think that less height but wider footer look better:
And for the bright color theme
|
ddfbf6f to
05a0606
Compare
Oh it was a misunderstanding! I agreed with your point about the width, so it doesn't need to be limited :) |
nimishavijay
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Latest screenshots look great! Good to go design-wise :) 🚀
jancborchardt
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great @susnux! :) I’d actually say we could use an even larger border-radius for the login box as well – the same as for the content when logged in: var(--body-container-radius). What do you think?
@jancborchardt server/apps/dashboard/src/DashboardApp.vue Line 416 in 9d2d3d4
As the login box is more a panel than the main content box (?) |
|
Right, that makes sense @susnux – considering that the Dashboard panels are older than the redesign though, I’d say it’s better to align with the redesign. :) Especially since the new added container around the footer looks rounder than the login form container otherwise. And actually the dashboard panels also look better with the bigger border-radius (
|
505bd97 to
b9c2d2a
Compare
b9c2d2a to
3d245a8
Compare
|
@szaimen yes, cache issue... Happens because that css variable is set to As the variable does not exist on mobile I moved it to a new one ( |
szaimen
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested and seems to work now but didnt review the code
jancborchardt
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems good to me! And now looks very nice with the 2 similar roundings. :) Nice job @susnux
Also adjust border radius to match new main content box. Signed-off-by: Ferdinand Thiessen <[email protected]>
…ner-radius` can be used on mobile devices Signed-off-by: Ferdinand Thiessen <[email protected]>
3d245a8 to
6ce567e
Compare
Signed-off-by: Ferdinand Thiessen <[email protected]>
6ce567e to
79239ea
Compare
|
CI failure unrelated |










Summary
Screenshots
color: white; background: black;¹¹: Like the issue: if the user agent uses a custom default browser theme
Checklist