Screen ? - Choose your look

[madsrh]

Everybody loves the "new" settings option where the user can switch between the default, light or dark theme.

I think it would be great if this option was presented to the user during the install.

[oSoMoN]

@long-chung what do you think of the suggestion?

[long-chung]

@oSoMoN Looks great

[oSoMoN]

Where in the sequence of screens should this go?

[long-chung]

I think the step before the installation slides/copying files would make the most sense, unless anybody has a different opinion?

[ghost]

Pop OS does a post setup configuration after restarting the computer. This kind of personalization settings fit better after installing.

[elbeicktalat]

@long-chung I think this page should be appear after choosing the installations type to show the theme on the installer.
I said after that because I think if we show it before choosing installation type it will appear more important than the installation type page.

[madsrh]

Just a quick reminder that this screen needs to be updated with the recent changes to the Yaru theme (only light and dark theme options now).

As you know, there's more changes coming and new preview thumbs from Wayne is needed (same as found in GCC).

[Feichtmeier]

@oSoMoN I would like to work on this :)

[oSoMoN]

All yours @Feichtmeier !

[elbeicktalat]

Hi there,
I'm not sure about the radio box, I believe it will be more beautiful if you made it with cards like the installation type page #27, also we have to discuss about the title is it really necessary?
What do you think ?

[madsrh]

Good idea @elbeicktalat. I think it would look better without the radio buttons 😅
Looking at the screenshot in the PR, I would say the thumbs should be bigger.
Is this possible @Feichtmeier ?

[Muqtxdir]

Hi,

Looking at the screenshot in the PR, I would say the thumbs should be bigger.
Is this possible @Feichtmeier ?

For GCC MR on launchpad, I used the theme-previews at 270x200 px, Attached below is a zip file containig those two SVGs
📎: theme-previews.zip

[Feichtmeier]

I currently set them so they are use the big images and are scaled down to 1/5 of the window. So another question is probably if they should scale with the window or not. Thinking of different resolutions

[Feichtmeier]

@madsrh @elbeicktalat and whoelse has an opinion on that, I used @jpnurmi 's OptionCard - is this better?

[madsrh]

Much better @Feichtmeier
I love the Simon and Garfunkel reference ♥️😀 (the word darkness shouldn't be capitalized)

[Feichtmeier]

@madsrh ?

[madsrh]

Bigger isn't always better BUT is there any chance that the thumbs could be bigger and the also bigger optioncards? Like on page #27?

https://user-images.githubusercontent.com/10974330/110313110-47eff780-8006-11eb-93fd-3d1379939d36.png

[Feichtmeier]

@madsrh I don't know. I have a 2,5k screen and the window is already scaled a little bit bigger than on a full hd screen. When the window changes this, the stuff looks like this:

[elbeicktalat]

@Feichtmeier For me is much better than before, also I think if you increase the example size I mean the image, will be more better.

[elbeicktalat]

I think the space between the cards is so small, I don't know which is better space around or evenly.
For sure not space between specialy when there is only 2 cards.

[jpnurmi]

I think the space between the cards is so small

👍 How about the same as on the "try or install page"?

I used @jpnurmi 's OptionCard

No no, the credits for that one belong to Olivier! :)

[Feichtmeier]

?

[madsrh]

Okay @Feichtmeier I think I've figured out how to explain what I'm seeing. When going through the install screens, the cards must have same size in every screen. So for this screen the cards should IMHO have the same size as used on page 27.
You get the idea:

WDYT?

[Feichtmeier]

@madsrh good idea

It would be cool to make OptionCards behave and look equal everywhere.

Also @jpnurmi and me seemed to agree that we could maybe change the bg color of the card instead of the elevation on selection?
Like this (sorry for the wrong app, but same page)

[jpnurmi]

The highlight looks a bit strong. 🙂 I recall you mentioned somewhere just changing the shadow color. Did you try how it would look that way?

[Feichtmeier]

The highlight looks a bit strong. slightly_smiling_face I recall you mentioned somewhere just changing the shadow color. Did you try how it would look that way?

Yes but the shadowColor looks a bit weird:

Maybe with opacity changing?

[jpnurmi]

Agreed, the colored shadow doesn't look too good. :) What about a flat card with a highlighted border?

Sorry for the colors and the outline is also too thick. It's just a quick Gimped version of the elevation illustration at https://material.io/components/cards#behavior

[Feichtmeier]

Like this? Or with a reduced primary color?

No shadow change and with opacity orange:

[jpnurmi]

I was thinking an entirely flat card with a 1px accent color outline. ☺️

[Feichtmeier]

I was thinking an entirely flat card with a 1px accent color outline. relaxed

Or 1px

Like this?

[jpnurmi]

Sorry for these short and dull comments. 😄 What if you keep elevation for unselected cards? Making the selected one flat visualizes that the card has been toggled down on the surface.

[madsrh]

I'm really not a fan of orange text but perhaps this will look better with the new accent color 🙈

The flat cards look good and are also in line with the mockups from the design team (IDK how accurate they are)

[Feichtmeier]

@madsrh :) I live it, but I agree that it is a bit aggressive

@jpnurmi like this?

[jpnurmi]

I wish the orange text had more contrast against the dark background, but that's a different discussion. From the options so far, the last two are my favorites. 👍

[Feichtmeier]

I wish the orange text had more contrast against the dark background, but that's a different discussion. From the options so far, the last two are my favorites. +1

I plan to adapt the dark yaru flutter theme to the dark yaru gtk theme, which would make the color darker and thus the contrast higher

[Feichtmeier]

@long-chung sorry for the confusion about what issue is what.

Here is a gif of the things we have been discussing:

• different optioncard
• flat AppBar

if you agree on this I put it in my PR (edit: click to enlarge)

[long-chung]

@Feichtmeier Thanks for clarifying. Looks good, +1 from me.

[oSoMoN]

I love the Simon and Garfunkel reference heartsgrinning (the word darkness shouldn't be capitalized)

While I also appreciate the reference to "the sound of silence", I wonder if it's really appropriate. People who don't get the reference might be confused. @long-chung can you please comment?

[oSoMoN]

Also, this reference makes the work of translators quite hard.

[Feichtmeier]

Sure thing I am not really attached to it :) Was just a middle long sentence that somehow fitted in there 👍 🕶️ 💡

[waynecrosby]

@Feichtmeier I really like the animation transitions but I'm not sure the orange text is working and it isn't explicitly obvious which selection you have made. I would suggest just using white and dark grey text and just use the orange to outline the box. Below are a couple of examples with the text and visual knocked back (when not selected) and a small shadow to emphasise your choice. There is also a text update but I'm not sure it's better than what we have, let me know what you think?



Text change?

[Feichtmeier]

@waynecrosby alright ! WIll do - thanks for the feedback :)

Edit: will try all your ideas