Update GDM gradient to be closer to mockup

[godlyranchdressing]

As far as I know, this can't be 1:1 and I'm not sure how to go about making it look like an exact match of the mockup. Right now the gradient effect is created by having a solid purple background and having a semi-transparent white gradient on top of it (lockscreen-gradient.svg) to give it the illusion of a purple gradient.

In this mockup it's #15030f -> #472c3f

I think the most we can do is make the colors darker as they're much lighter right now.

[madsrh]

Nice job 👍 Although it's not in this mockup by @luxamman, I think we should use the Suru style user icon.

https://github.com/CanonicalLtd/desktop-design/blob/master/User%20icon/user-icon.svg

[didrocks]

I love it! Nicely workarounded :)

Question: did you try with multiple monitors having different resolutions? (It should work as you are using a full screen svg on top, but just something to try out)

[clobrano]

Question: did you try with multiple monitors having different resolutions? I tried with my 13'' screen 1920x1080 and it works nicely. Only the "login" button is purple instead of green. Should I open a bug for that?

[didrocks]

@clobrano sorry for not being clear enough, what I actually meant was "testing in a multi-monitor configuration, when the 2 monitors don't have the same resolution".

[clobrano]

@didrocks ah ok 😄 What about the login button? Is it purple for me only?

[Feichtmeier]

@clobrano @godlyranchdressing Fixed the login button to be green: will put this into the next shell PR

So what's missing?

[clobrano]

The default icon should be circular instead that like a squircle. @madsrh linked the icon in the PR

[Feichtmeier]

I've talked a bit to @3v1n0 and it seems like the wrong icons in the top panel and popups and the default-user-icon problems could be rather related to some env variable than a correct url("....") path.

[Feichtmeier]

Closing this as this is migrated as an issue to the gtk repo: https://github.com/ubuntu/gtk-communitheme/issues/583

[polyjitter]

For a project that's in general incredibly bright and colorful (the "breath of fresh air", as someone described it), this seems surprisingly muted and drab of a gradient choice for the login screen, which will be the very first window into the system. That feels like it's giving off the complete wrong impression for the first moments. I feel like maybe the colors need to be lighter and a bit more saturated?

[madsrh]

I agree @taciturasa 😃

...which will be the very first window into the system...

Although, one might argue that the boot screen is 'muted and drab' too 😉

Do you have a suggestion?

We had other ideas in this thread (just search for GDM)

[polyjitter]

To start with, I think the actual layout is fine and great. It's the drab background that gets me.

That being said...

https://ubuntucommunity.s3-us-east-2.amazonaws.com/original/1X/cb409f2f476df019bb8fae1c0d102ee7a2603f52.jpg

I really really, like the way this looks! It feels like a subtle hue shift from the default wallpaper, while keeping the same basic composition ideas. Maybe a few more tweaks would be in order (ex. making the folds a little more subtle would do good, or maybe replace them with the famous dot pattern, the purple could be the SLIGHTEST bit brighter, as well as the orange coming more into the center than it currently is), but as a user, if I was greeted with this, it would feel really friendly and like I was waking up with my computer almost 😊 Was there a reason this wasn't what you went with?

Also, for the boot screen, I'm still a fan of the ubuntu composition, and i like the idea of it being one solid color, but yeah, the purple could be WAY brighter, like it is with that image. Maybe even give the background the same folds; then, use the famous dots(TM) as a visual throughpoint to indicate when you're dealing with sort of the "meta" computer, or the stuff that exists above your actual working station (lock screens, user switching, logging in, etc.)

Does GDM theming support animations/css gradients or anything that could be used to create color animation? If so, it'd be cool to be able to bring in that orange color in the corner when you reach the GDM screen. Almost like "you're almost to your desktop, keep on going! ❤".

[polyjitter]

Again, I'm still not sure of our other technical limitations, but my further reading does provide me info that GTK/Shell CSS both support animations, which I'm sure you guys probably already knew, I'm just new and slow 😊

With that being said, and with some previous experimentation with minor shell tweaks, it seems like it would be possible to form the background color of the GDM screen as the same exact solid shade of purple ended up in use (with this idea) on the plymouth screen as the GDM background-color, and then apply an animation to the background-color to transition between the purple and the purple-orange gradient, one time no repeat. I'll put together a fiddle later messing around with this idea, but these are my current thoughts.

[clobrano]

Was there a reason this wasn't what you went with?

I guess the reason is that none of us is skilled with svg tools :D

my further reading does provide me info that GTK/Shell CSS both support animations

Not sure you're talking about the Login page though, which is slightly different. You found evidence of animation for this page?

I'll put together a fiddle later messing around with this idea, but these are my current thoughts.

Looking forward to this :) hopefully with css tricks available on gdm login