Inconsistent button styles for install

[iandstewart]

The language pack selection screen features a blue button aligned to the right like so.

​https://cloudup.com/cvOk27SYJij

While the next few steps of the install process feature a grey button aligned to the left, at least for Canadian English.

​https://cloudup.com/cgi_-PW5Ot1

The alignment may be language specific. Not sure if that can be corrected in some way to be less jarring, maybe with centred alignment. The colour shift seemed odd enough to report.

[Ipstenu]

Making the translation install button not blue

[Ipstenu]

Making the other installer buttons blue

[Ipstenu]

The difference is that the translation-install.php file has it set as button-primary and the others do not. There are some that shouldn't be set that, but I don't know which way is best. I've tossed up two patches to go either way. I'd lean towards making all the install buttons primary like that to make it clear what the final action should be.

[SergeyBiryukov]

@karmatosed: Any preference here?

[Travel_girl]

Suggestion Install-Burron

[Travel_girl]

I think it would be the best way, that the finaly action button is a blue button and should be a primary button.

[melchoyce]

+1 to primary, right-aligned.

[Travel_girl]

What would be the next step for this ticket? Do we need more opinions for the button?

[melchoyce]

Next step is to get a patch ready for commit.

@Ipstenu Do you want update your existing patch, if it doesn't match @Travel_girl's mockups?

[Ipstenu]

Updated patch #2

[Ipstenu]

I forgot I wrote the patch in the first place!

The patch I have doesn't change the CSS, just assigns button-primary to the buttons (that's 29875.2.diff) so if you want the CSS to move the buttons to the left then that's a different change which I haven't done, and I'm not sure where we'd want to put that.

I added 29875.3.diff which is based off trunk, and that just makes the buttons primary again.

[Travel_girl]

@Ipstenu do you have screenshot how the buttons would look like, with your patch? So I can have a look what css-changes are needed.

[Ipstenu]

Replying to Travel_girl:

@Ipstenu do you have screenshot how the buttons would look like, with your patch? So I can have a look what css-changes are needed.

They literally change the color from grey to blue.

​https://cloudup.com/cT9hd1ZKYrI

Which ones of the various screens do you want screen grabs for?

[Ipstenu]

Step 0 (no wp-config) - ​https://cloudup.com/cB_Sb6mPeGS - Blue Left

Step 1 (build wp-config) - ​https://cloudup.com/clKPh6Mi_5w - Blue Left

Step 2 (alright sparky) - ​https://cloudup.com/cOwWE4KCzXY - Grey Left

Step 3 (language) - ​https://cloudup.com/cT9hd1ZKYrI - Blue Right

Step 4 (install WordPress) - ​https://cloudup.com/c0XLCCq9Ced - Grey Left

If I change step 2 (sparky) to button-primary, it becomes blue left

Step 4 is in another castle -- FILE - install.php but it too becomes blue and left.

Language being blue and RIGHT is the outlier and is using button button-primary button-large in translation-install.php, and that's the same code as I used in the diff. At a guess it's from the input having the ID of "language-continue"

Attaching a diff with them all blue though.

[Ipstenu]

Updating install.php to be blue buttons as well

[Travel_girl]

@Ipstenu the buttons are really jumping all the time.

I think their should be all blue and on the right site, because it is one process.

[SergeyBiryukov]

Related: #40470

[melchoyce]

Replying to Travel_girl:

@Ipstenu the buttons are really jumping all the time.

I think their should be all blue and on the right site, because it is one process.

+1

@Ipstenu, does your latest patch have them all right-aligned in addition to blue?

[Ipstenu]

3 diff has them as blue and I did not adjust direction because as I said before:

Language being blue and RIGHT is the outlier and is using button button-primary button-large in translation-install.php, and that's the same code as I used in the diff. At a guess it's from the input having the ID of "language-continue"

Everything _else_ is aligned left so I'd think we'd have to edit the CSS to be left in that case.

29875.3.diff​ and 29875.3-install.diff​ make the buttons blue.

[JoshuaWold]

Just discussed this ticket at WordCamp Europe 2018 in the design team.

Based on what we can see so far, when a primary button is in a modal or isolated smaller window it appears on the right. When it’s in a larger screen (such as a settings page in WordPress admin) it appears on the left. If this assumption is correct, then it’d make sense to move the primary button in this flow to the right.

Also, since the color has been taken care of, we suggest closing the ticket out and opening a new one if the alignment issue needs further discussion.

[karmatosed]

I am now closing this ticket as it was left open for feedback and none has happened. This closed the advice given in the previous comment. I will add 'maybe later' to denote the alignment issue can have a ticket.