New header dropdown / notification menu styles https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574 UPDATE: This is now active on meta for all users ## Summary Experiment for a new look & style for header dropdown menus along with notification item styles. We remove the “active” border styling from dropdowns in header. This border adds a complication to styling when creating themes. We add spacing, and change the “active” icon styling on the notification menu. ## Screenshots | Before | After | |----|----| | ![CleanShot 2025-06-24 at 09.50.29@2x](upload://zJ0HO6XKrgYJgYYiIcT2Ibkyoe.png) | ![CleanShot 2025-06-24 at 09.47.10@2x](upload://x6f1URlO7dqkMyd6OWOBc83xqla.png) | en Sat, 28 Jun 2025 22:29:37 +0000 UX New header dropdown / notification menu styles Did something change regarding the font or icon size? My first impression is they are a bit larger now, but that might be because of the added white space. This creates a bit of a mismatch between the notification icons and the menu icons.

Also, the padding on the right of seems a bit too large to me.

Side note: I am using browser scaling to 90% (not sure how that would cause any issues, but browsers are odd sometimes :smile: ).

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/82 Sat, 28 Jun 2025 22:29:37 +0000 meta.discourse.org-post-369574-82 New header dropdown / notification menu styles
New header dropdown / notification menu styles I still find the difference between white on blue and black on white easier to recognize than the difference between white on blue and white on dark grey

Maybe it’s because the icon is the first place I look at.
It is more important to me than the avatar. Because the one, who triggered the notification is also there as text, what I’m notified about is only there for moved posts, otherwise the icon is the only indicator.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/81 Sat, 28 Jun 2025 05:20:55 +0000 meta.discourse.org-post-369574-81 New header dropdown / notification menu styles
New header dropdown / notification menu styles Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/78 Fri, 27 Jun 2025 23:20:16 +0000 meta.discourse.org-post-369574-78 New header dropdown / notification menu styles
New header dropdown / notification menu styles Done!

Enabled for all trust_level_0 users.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/77 Fri, 27 Jun 2025 22:35:51 +0000 meta.discourse.org-post-369574-77 New header dropdown / notification menu styles
New header dropdown / notification menu styles @jordan-vidrine I feel like we can enable this experiment now globally on meta (and pin this topic), and see if anyone complains, overall I think where we are at is better than our default.

@lindsey thoughts?

It is a evolutionary change that is subtly better in a few ways.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/76 Wed, 25 Jun 2025 23:47:42 +0000 meta.discourse.org-post-369574-76 New header dropdown / notification menu styles
New header dropdown / notification menu styles I think a good compromise here is to start by defaulting it on new installs

I think the big reason we held off is customisations people made

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/75 Wed, 25 Jun 2025 21:36:46 +0000 meta.discourse.org-post-369574-75 New header dropdown / notification menu styles
New header dropdown / notification menu styles
sam:

Also @lindsey a big change we should think about is making the avatars show up by default

Huh didn’t we try this at some point recently? I thought we’d given that a go and decided not to proceed for some reason. But I very much like the idea, the notification menu is much more interesting and informative with the avatars.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/74 Wed, 25 Jun 2025 17:22:10 +0000 meta.discourse.org-post-369574-74 New header dropdown / notification menu styles
New header dropdown / notification menu styles The change has been merged.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/73 Wed, 25 Jun 2025 01:08:38 +0000 meta.discourse.org-post-369574-73 New header dropdown / notification menu styles
New header dropdown / notification menu styles I am generally good with it, but there is something about that light grey text that still bugs me. I still prefer it in black. Can we try that? leave icon grey but keep text in black on read notifications?

Except for that I prefer this styling to our original. Still think it is worth exploring some more radical options, but as an iteration it feels good.

Also @lindsey a big change we should think about is making the avatars show up by default, we are not doing that and so many default installs get this less than optimal default experience:

The changes @jordan-vidrine made here are refinements vs re-imagining, which is nice

  • Selecting feels a bit nicer
  • Distinct icon styling for read vs unread feels nicer
  • The blue links in notifications are an outlier, it is nice to have this in black.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/72 Tue, 24 Jun 2025 23:58:16 +0000 meta.discourse.org-post-369574-72 New header dropdown / notification menu styles
New header dropdown / notification menu styles The latest updates have been live for a couple days now. Wondering how everyone here feels about them.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/71 Tue, 24 Jun 2025 14:51:32 +0000 meta.discourse.org-post-369574-71 New header dropdown / notification menu styles
New header dropdown / notification menu styles Ah ok, the styles are applying to unread. Will add some css to target this one as well.

Can you send a screenshot of the mobile reddish bg?

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/67 Thu, 19 Jun 2025 00:11:11 +0000 meta.discourse.org-post-369574-67 New header dropdown / notification menu styles
New header dropdown / notification menu styles
jordan-vidrine:

two diff colors

This one, yeah two diff colors. You need to get an account to require approval on local to see this.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/66 Thu, 19 Jun 2025 00:09:54 +0000 meta.discourse.org-post-369574-66 New header dropdown / notification menu styles
New header dropdown / notification menu styles
sam:

I am finding the light grey very hard to read, it feels washed out. Maybe we try with only greying the avatar decoration?

The contrast here is just very very hard on the eyes, especially on the non bold text.

Yeah, I’m finding this feedback interesting. It must be due to proximity, bold, spacing, and shorter width of text.

I am using the same color to signify “read” that our topic lists use.

That said, I do think the icon bg has something to do with this as well, which is why I like @keegan suggestion here:

One more option I am kind of wanting to implement is inline title w/ description. Something like this:

Is this on hover? Or is the list actually showing two diff colors of blue background on different items?

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/65 Thu, 19 Jun 2025 00:02:51 +0000 meta.discourse.org-post-369574-65 New header dropdown / notification menu styles
New header dropdown / notification menu styles On mobile I am getting “reddish” background instead of blue.

I am finding the light grey very hard to read, it feels washed out. Maybe we try with only greying the avatar decoration?

The contrast here is just very very hard on the eyes, especially on the non bold text.

I think this is why gmail ended up with using font-weight for the delineation.

Also on desktop, getting 2 different blues which is confusing.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/64 Wed, 18 Jun 2025 22:45:05 +0000 meta.discourse.org-post-369574-64 New header dropdown / notification menu styles
New header dropdown / notification menu styles
sam:

Thoughts?

Last one looks quite good! It communicates the unread status clearly, but is still very light. Similarly, I like the first one (though I don’t think the blue circle is necessary, so in comparison the last one wins). All other designs are “too much” for my personal taste.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/63 Wed, 18 Jun 2025 21:28:10 +0000 meta.discourse.org-post-369574-63 New header dropdown / notification menu styles
New header dropdown / notification menu styles Today some of the designers and I did some pairing and iterating on the styles. Here is where we landed.

  • Bringing back the blue bg, but slightly more muted.
  • keep the new “read” styling to mimic topic lists
  • decrease “active” background highlight of active nav item
  • keep the blue circle bg for icons of unread


Sam, I like the first two options your artifact shows as well. Will look more into those. For now, I think our most recent iteration gets us in a spot where the differentiation is a bit more clear.

To move further I think we’d need some tweaks to the template & copy.

CSI ENHANCE

Seems normal

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/62 Wed, 18 Jun 2025 16:09:37 +0000 meta.discourse.org-post-369574-62 New header dropdown / notification menu styles
New header dropdown / notification menu styles Overall I think we are making lots of progress here, the right hand side is working, but I am finding the contrast on read stuff very hard to read and see of grey is a bit sad.

Compare to this interactive artifact (clickable, try it out)

I kind of like the last option the most, cause it is clear and uncluttered, but the first 2 feel fine as well.

Thoughts? (also what’s up with Nathan … what an avatar :slight_smile: )

(also the reduced border radius feels a tiny bit better)

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/61 Tue, 17 Jun 2025 23:45:39 +0000 meta.discourse.org-post-369574-61 New header dropdown / notification menu styles
New header dropdown / notification menu styles This experiment is back to being live here on meta. Make sure to join the experiments group.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/60 Tue, 17 Jun 2025 19:23:38 +0000 meta.discourse.org-post-369574-60 New header dropdown / notification menu styles
New header dropdown / notification menu styles Maybe it’s because I’m so used to the white background for notifications I have already seen, but it does look a bit odd to have such large areas with grey background in a theme that otherwise does not use them.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/59 Sat, 14 Jun 2025 11:32:38 +0000 meta.discourse.org-post-369574-59 New header dropdown / notification menu styles
New header dropdown / notification menu styles Here is an iteration idea based on some more feedback received here.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/58 Fri, 13 Jun 2025 21:28:31 +0000 meta.discourse.org-post-369574-58 New header dropdown / notification menu styles
New header dropdown / notification menu styles I understand it, last update with no extra padding on the buttons looks better to me :ok_hand:

What are your thoughts on this subtle improvement?

It’s about removing the hover effect from the active button panel on the right side, while applying a subtle blend effect to the left panel.

This would help differentiate the panels from the buttons and prevent the interface from appearing overly saturated or ‘fully painted’ when there are active notifications and panel at the same time.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/57 Fri, 13 Jun 2025 18:37:52 +0000 meta.discourse.org-post-369574-57 New header dropdown / notification menu styles
New header dropdown / notification menu styles
satonotdead:

May I know the motivation for the padding on the corners of the buttons/sections?

To more closely mimic the sidebar.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/56 Fri, 13 Jun 2025 18:12:24 +0000 meta.discourse.org-post-369574-56 New header dropdown / notification menu styles
New header dropdown / notification menu styles I appreciate your work, as always, and I like that you are working specifically on this.

May I know the motivation for the padding on the corners of the buttons/sections?

I honestly don’t get it but I’m probably missing something.

That looks beautiful with no extra padding on rounded corners :slight_smile:

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/55 Fri, 13 Jun 2025 17:55:36 +0000 meta.discourse.org-post-369574-55 New header dropdown / notification menu styles
New header dropdown / notification menu styles So at the moment, we really only have to different parts of Discourse using a “read/unread” styling state.

The other part in this menu is a “selected” state. This is to show the currently selected notification tab. In this iteration we are mimicking the selected state for sidebar items.

Here is a basic audit of the things we are looking at in the menu. Read, Unread, Selected

Sidebar
For sidebar, we just indicate “unread” with a dot. “Read” is assumed by default if no blue dot exists.

Side bar - active
Here is the currently selected sidebar item, aka active.

Topic List
For topic lists we currently show a blue dot && use color in the title & metadata to differentiate. One caveat is that we dont show the blue dot on topics you are not following/watching. So whether the blue dot appears or not is not immediately clear to the user.

Menus
We use selected as a state here to show active selection. I do not think this translates to notifications, but it does translate to the selected state of the menu notifications current tab.

There are inconsistencies at the moment of what color we use for selected.

For tracking, we use grey.

For currently selected category we use blue.

User Notifications page
This page needs some work in the current iteration.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/54 Fri, 13 Jun 2025 17:33:11 +0000 meta.discourse.org-post-369574-54 New header dropdown / notification menu styles
New header dropdown / notification menu styles I really like the layout on the current iteration, it’s wraps all the relevant information in a compact item, and the overall list spacing still feels generous :+1:

With respect to state, I don’t have a strong preference for the different options. But I think it would be great if it could be addressed more generally in a design exploration. There’s not a fully consistent system in place and rather than just looking for the right fit for the notification menu now, it could be great to have a wider exploration mapping state and context across the app and then applying it with variables.

For example, yes, the state (read/unread) is analogous to the topic list. But the context is different, and on similar context (other menu panels) a more subtle grey usually doesn’t indicate that state. Now it makes other menu items look a bit more as if they indicate some muted state as well. So I feel this could really profit from a more systematic mapping.

Read full topic

]]>
https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/53 Fri, 13 Jun 2025 14:21:10 +0000 meta.discourse.org-post-369574-53 New header dropdown / notification menu styles