Having a bit of text in it I'm no longer sure if we should actually go with the blur here, which we initially discussed with @jancborchardt. Feels a bit less out of place compared to the general Nextcloud design:

@nimishavijay Maybe you also have some thoughts about that?

Other than that, there are a few further things that should be more aligned with the increase of the formatting buttons.

• The menubar itself should only be 50px in total (including the padding)

• The avatars still seem to have a slightly different size and the user icon on the right some margin (the margin actually seems to be the reason that the menubar exceeds the 50px size)

I think with text behind the formatting bar it is a bit confusing, because initially I couldn't tell that it was blurred text, I thought the colour of the bar changed to a weird grey. It looks really nice with images though.
I can also imagine it might be an accessibility issue because of insufficient contrast.

I suggest we do something like add gradient from 100% opacity at the middle of the formatting bar to 0% at the bottom along with the blur, so it is not a hard stop but a softer gradient. What do you think?

@jancborchardt @juliushaertl What do you think about @nimishavijay 's suggestion?
I think gradient opacity would look better.

I don't see a way with CSS to fade out the blur effect (which itself also doesn't work in some browsers). @jancborchardt Do you have strong feeling about the blur at all? I feel the design is much cleaner and more structured without now looking at the recording another time.

I don't see a way with CSS to fade out the blur effect (which itself also doesn't work in some browsers). @jancborchardt Do you have strong feeling about the blur at all? I feel the design is much cleaner and more structured without now looking at the recording another time.

Yeah, agree with you, don’t have a strong feeling about the blur – the current state looks better and less jarring. Similarly, as soon as the document is loaded, the header bar (where title and top right actions are in) should be fully opaque so the Nextcloud header does not shine through.

@juliushaertl Please check again.

1. Remove blur
2. The menubar itself should only be 50px in total (including the padding)
3. The avatars still seem to have a slightly different size and the user icon on the right some margin (the margin actually seems to be the reason that the menubar exceeds the 50px size)

/rebase

/compile amend /

@juliushaertl Please check again.
Since julius is out, i'll review.

Looks really goodat first sight. In particular scrolling workspaces without messing with the menubar is great.

1. Remove blur

👍

2. The menubar itself should only be 50px in total (including the padding)

Confirmed in viewer. looks good.
In the workspace it seems to be 44 (3 + 38 + 3) because there's no outer .menubar. Seems fine to me.

3. The avatars still seem to have a slightly different size and the user icon on the right some margin (the margin actually seems to be the reason that the menubar exceeds the 50px size)

Confirmed. Changing the margin in SessionList.vue to margin: 0px 6px; centers the avatar. Reducing top of .save-status to 9px (6 less than before) ensures the status is still centered.

I'll create a new commit on top of this to apply these changes.

as soon as the document is loaded, the header bar (where title and top right actions are in) should be fully opaque so the Nextcloud header does not shine through.

@luka-nextcloud is this something you could adjust here too? It’s sort of separate but makes the formatting bar look off since the Nextcloud header shines through above.

I rebased and addressed all changes proposed by @eneiluj .

as soon as the document is loaded, the header bar (where title and top right actions are in) should be fully opaque so the Nextcloud header does not shine through.

@luka-nextcloud is this something you could adjust here too? It’s sort of separate but makes the formatting bar look off since the Nextcloud header shines through above.

My understanding is that the top header bar with hte nextcloud shining through is part of the viewer - not the text app. As far as i know we can only pick a light or a dark theme for the viewer.

2. Why not generating avatars in 44x44px instead of 32x32px in SessionList's template?

Yes... looks much better. Will do this.