Agreed, the demo looks really nice! Regarding the background color, I believe we should be using #eaf3ff to comply with the design system color tokens – which might already be the case in the patch, the blue looks very similar.
More information can be found in the design system documentation here or below :)

[new exploration] more conversation-like:

The revised scope looks great – I don't imagine the absence of T267444 having an impact on this initial deployment of Page Frame.

Same bug as T320820?

Yes exactly

This looks amazing! 👏

Thanks, @ppelberg & @Esanders!
Looks great, my only concern is that when the keyboard is opened then I'm not seeing the "Return to reply" button (since the keyboard is on top of it).
I wonder if we should place the button at the top of the screen then?

Thanks for the ping @ppelberg and for spotting this @alexhollender_WMF!
I agree with @Esanders: although styled as links, these are buttons so :visited colour doesn't make sense here.

Design QA
Looks great! Two observations:

1. The "i" icon looks slightly different than the one on the mock but it's normal – the OOUI icon has been updated since then and the patch demo has the latest one.
2. Not directly related to this task but the "add topic" button is missing the talk icon on this patch demo – is it normal since it's Patch Demo or a bug? @Esanders

Great spot @Tacsipacsi thank you for sharing! We won't be working on this right now but it's great to know for the future.

Thanks a lot @bmartinezcalvo for all the context!

Thanks @Esanders Looks great!

The "current spacing" in the original task looks wrong to me: The spacing between the last comment and the next heading is much bigger that it actually is, and as a result your proposed spacing is a large change. I'm not sure we want to make it that large.

Yes exactly that's the discrepancy between Figma and production I was mentioning. I think it'd still be good to have more spacing between the last comment and next heading compared the last patch demo (screenshot below):

@Esanders thanks for the patch demo! I noticed some discrepancies between the original Figma and the patch demo so I adjusted directly on the demo:

Looks great, thanks @Esanders! Moving to sign off.
cc @ppelberg

Just added the mocks and reviewed the reqs – looks all good. Moving this back to you @ppelberg :)

@Tacsipacsi Yes that's exactly what converged on :)

Looks perfect @ppelberg thanks for the updates!

Hi @Esanders, here are the relative measures for the spacings – hopefully the original Figma file is well coordinated with what's in production, otherwise will refine :)

Yes, that's a good point @Tacsipacsi. The objective is not to flood users with notifications, simply to remind them that they can adjust their notifications settings if they want to – especially for less advanced users who might have not explored their preferences. This meta-notification wouldn't be displayed often, only if you receive a significant amount of notifications in a short time or if you have a lot of unread ones.

To be consistent with the visual design of Talk pages on the apps, it's best to go with bold text for the headers on mobile.

@Samwilson
For the circular progress indicator (which I imagine will have an indeterminate load), I based the design on Google's Material UI component with Accent50 (#3366CC) color token from our design system.
Attaching the SVG and specs below:

SVG	Circular line (2px line width)	Loading component bounding box (16px)
circular-loading.svg281 BDownload

My gut is telling me to provide a well padded icon and go with oo-ui, plus it helps us standardize elements/design system. Can we add that one line change in? CCing @nayoub for visibility

I think this is intentional, with the idea being that this is an advanced feature and we don't want to distract from other more important links. Other sites use similarly muted styling (Twitter, Phabricator etc).

Great point @Esanders! I agree that adding another verb could cause some confusion and +1 on the translation community finding the appropriate copy.

are there any adjustments you'd like to see made to the naming of the browser tab prefixes before we move forward with implementing this?

Thanks for your comments @Tacsipacsi

I agree @Esanders the previous proposal was slightly too tight – I've added a new one that's sort of a hybrid. Let me know what you think, thanks!

Thoughts on this:

@ppelberg I wonder why that height changes, I guess it has to do with the icons being bigger due to badges. Given they serve different purposes and thus visual treatments, I don't see any particular issue with this.
cc @alexhollender_WMF – curious to get your thoughts on this :)

Thanks for your feedback @Tacsipacsi
I've added other iterations in the task description taking into consideration your points on legacy vector and the language selector on new vector. Would love to hear your thoughts on these too.

@dom_walden I believe we were thinking of not supporting this functionality anymore but those are great points! I agree – it might definitely be helpful for accessibility purposes, even though the discoverability of this functionality is rather complex (the issue mostly being the wait time before the tooltip appears).

I'm sure we've said it before, but these designs are really nice 😄

Thanks so much for the kind words!! @TheresNoTime @MusikAnimal 🙏😊

Thanks for your feedback @Samwilson !
Very good points about the errors - sounds good, we can revisit those later :)

@dmaza

• The icons shouldn't change depending on the pronunciation being generated or human-recorded. I don't think it's a significant detail to surface to users – what do you think?
• The errors would likely look like this, in this case invalid file :

• Human-recorded > TTS-generated makes complete sense :)

Thanks @ppelberg! Yes this looks good to me, we'll have to see in a later stage if & how to homogenize with other parts of the UI as reflected in T313872.

Here are the latest assets on the Figma board.
I'll update the ticket description in more detail by tomorrow. Also waiting to hear back from Design Systems and Web teams to make sure it works on their end too :)

Yes, you're right it might be a bit too bouncy. It'll be better with the banner over the preview then.

Video of IPA button interaction

@NRodriguez here's the default desktop state for IPA:

Thanks so much! @TheresNoTime @Samwilson

Following today's retro, we decided to revert this for now.
cc @NRodriguez

Hi @Samwilson, here's the svg for RTL version of the illustration:

Yes, thanks @Samwilson. Here's the .svg illustration:

Amazing! Looks perfect, thanks @Samwilson!