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

Minor authorization page fixes styles #14310

Merged
merged 9 commits into from Feb 5, 2019

Conversation

@Ibochkarev
Copy link
Contributor

Ibochkarev commented Jan 26, 2019

What does it do?

With this PR, I adjust the styles a little 3.x. This PR is focused on changing the visual representation of the authorization page.

I have corrected:

  • centered and increased the size of the logo
  • text indents, input field descriptions
  • link colors, input field descriptions
  • seems to have centered the position of the checkbox and the text =)
  • font sizes
  • button colors their hover behavior
  • styles at the form input
  • styles of error message and successful operation

Why do you need it?

Redesign is one of the key features of MODX3 and I tried to bring the styles of this page a little closer to the overall design.

Before:
modx revolution 2019-01-26 05-59-49
modx revolution 2019-01-26 05-59-36

After:
login modx revolution - 2019-01-30 18-14-40
login modx revolution - 2019-01-30 18-15-14
login modx revolution - 2019-01-30 18-15-30

Related issue(s)/PR(s)

#13948

@Ibochkarev Ibochkarev requested review from Mark-H and opengeek as code owners Jan 26, 2019

Update _build/templates/default/sass/_colors-and-vars.scss
Co-Authored-By: Ibochkarev <ivanx86@gmail.com>
@christianseel

This comment has been minimized.

Copy link
Contributor

christianseel commented Jan 26, 2019

I like the success/error styles! However the logo looks way too big for me now. I'm also not sure about the inputs as they look somehow disabled now?

Is the (button) green the same as the current primary color of the manager interface? Because at the time when we were working on the login, the previous color was used as primary in the manager.

@christianseel

This comment has been minimized.

Copy link
Contributor

christianseel commented Jan 26, 2019

Ah, just found #14306 which seems to be related and which streamlines the button colors 👍🏻

@Ibochkarev

This comment has been minimized.

Copy link
Contributor Author

Ibochkarev commented Jan 26, 2019

I'm also not sure about the inputs as they look somehow disabled now?

@christianseel I ask you to test these changes. Since there is always the possibility to make adjustments.

I will fix the logo.

Thanks for the feedback. I tried to do in the same style.

@Jako Jako added this to the v3.0.0-alpha milestone Jan 26, 2019

@Alroniks
Copy link
Collaborator

Alroniks left a comment

After the quick look:

  • New blue color seems to bold in comparing with old one. I'd prefer to return it.
  • As some font properties were changed it's strongly required test it on Latin letters too (screenshots).
  • I don't agree with replacing focus stroke by shadows. Availability is completely lost.
@JoshuaLuckers
Copy link
Collaborator

JoshuaLuckers left a comment

Keep the key points in the original plan in mind when changing the login screen:

@Mark-H

This comment has been minimized.

Copy link
Collaborator

Mark-H commented Jan 29, 2019

@JoshuaLuckers We honestly don't have to stick to what was posted on modx3.org a year ago if a better proposal comes around. If you have specific points of feedback, please elaborate.

@JoshuaLuckers

This comment has been minimized.

Copy link
Collaborator

JoshuaLuckers commented Jan 29, 2019

I agree that we don't have to stick to something that's proposed a long time ago. We do have to keep in mind the designs that where proposed. Deviations from this design should have proper argumentation (that's what I'm missing right now).

@Mark-H

This comment has been minimized.

Copy link
Collaborator

Mark-H commented Jan 29, 2019

I agree with @Alroniks on the focus status (the inset box shadow is a little too subtle), and I'd probably take out the letter-spacing on the ghost buttons/password reset link. Makes it look a little stretched and inconsistent with other text on latin text:

schermafbeelding 2019-01-29 om 14 36 15

Those two things changed would earn my ✔️ .

I don't really have an opinion on the blue color. I think it's an interesting shade of blue, but if it's not used anywhere else but the login page, it may make sense to restore that to something more consistent.

@JoshuaLuckers: Design is very subjective of course, but in my opinion the screenshots made it clear that it adds more polish to the design, which is more than enough argumentation in my book ;)

Ibochkarev added some commits Jan 30, 2019

@Alroniks
Copy link
Collaborator

Alroniks left a comment

Now it looks much better! 👍

@Ibochkarev

This comment has been minimized.

Copy link
Contributor Author

Ibochkarev commented Feb 3, 2019

The last word is yours @Mark-H =)

@Mark-H

Mark-H approved these changes Feb 5, 2019

@Mark-H Mark-H self-assigned this Feb 5, 2019

@Mark-H Mark-H merged commit 61dd51d into modxcms:3.x Feb 5, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

Mark-H added a commit that referenced this pull request Feb 5, 2019

Minor tweaks to the new manager login [#14310]
Merge remote-tracking branch 'upstream/pr/14310' into 3.x

* upstream/pr/14310:
  Delete dublicates colors
  Refactoring code, change after reviews
  Small fix
  Update _build/templates/default/sass/_colors-and-vars.scss
  Add font-weight for .c-button--ghost
  Add margin-top #modx-login-username-reset
  Minor authorization page fixes

@Ibochkarev Ibochkarev deleted the Ibochkarev:Minor-authorization-page-fixes branch Feb 5, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment