Update Documentation Images to Latest Interface and Formats

[yesbhautik]

Updated all images to the latest Mattermost interface within the source/images directory. This update includes replacing outdated screenshots and, where necessary, changing image formats from PNG to GIF to enhance clarity and understanding in the documentation.

Summary

This pull request comprehensively updates the documentation images to reflect the latest Mattermost interface. The updates ensure that all screenshots are current and align with standard expectations. Additionally, some images were converted from PNG to GIF to provide better visual guidance where animations or multi-step processes were illustrated.

Ticket Link

Ticket Link

Milestone 02, 03, 04: #6658

[mattermost-build]

Hello @yesbhautik,

Thanks for your pull request! A Core Committer will review your pull request soon. For code contributions, you can learn more about the review process here.

[github-actions]

Newest code from yesbhautik has been published to preview environment for Git SHA 513ceab

[cwarnermm]

@yesbhautik - This is an outstanding docs PR with high impact! Thank you so much.

How easy would it be for you to do the following without a lot of rework?

• remove the hand pointers from the screenshots
• remove the red outlines from the screenshots

If it's easy, could you make these changes to all impacted screenshots, please? If it means entirely re-capturing the images, let's not introduce more work than you've already done.

Also, please ensure all mobile screenshots are scaled down to 30%. They're currently quite large on a given docs page.

[yesbhautik]

How easy would it be for you to do the following without a lot of rework?

• remove the hand pointers from the screenshots
• remove the red outlines from the screenshots

If it's easy, could you make these changes to all impacted screenshots, please? If it means entirely re-capturing the images, let's not introduce more work than you've already done.

I added hand pointers while taking screenshots because I thought they would provide better clarification for users. Regarding the red outlines, I only included them where they were previously present in the documentation.

As per your request, I can address the issue of hand pointers and remove them from the screenshots. However, in the case of red outlines, most of the screenshots where these outlines are present are outside the Mattermost platform, such as in Azure portal, Windows, and other external interfaces. Removing the red outlines from these could be quite challenging and may introduce errors or inconsistencies.

To effectively remove the red outlines, I can utilize premium software and AI tools to streamline the process. Please provide further confirmation so I can proceed with these adjustments.

[yesbhautik]

Also, please ensure all mobile screenshots are scaled down to 30%. They're currently quite large on a given docs page.

The mobile screenshots appear quite large because we used the original, high-resolution images. Scaling them down in the future could complicate updates. We have two possible solutions to address this:

1. Apply CSS to set a universal size for mobile screenshots across the documentation. This approach ensures consistency and can be easily adjusted in the future. However, implementing this may require opening another issue in the repository to handle the CSS changes.
2. Manually edit each screenshot to scale them down to 30%. This would involve altering the images directly, which could be more time-consuming and less flexible for future updates.

Please confirm which option you prefer to proceed with. If opting for the CSS solution, we can initiate a new issue to track and implement the changes.

[cwarnermm]

@yesbhautik - Given the effort it will take to remove elements from the new product screenshots (advanced tooling and AI), I would prefer not to ask you to complete that extra work, given how much you've already contributed in this docs PR.

I do want to provide context as to why I explored the effort to remove the elements:

• You're right that there are existing screenshots that include red outlines, and this convention is typically used for external tools beyond Mattermost. The red outline is a convention we definitely want to avoid in the product docs, going forward with Mattermost-based screen captures, because it's not inclusive from an accessibility perspective. Those with colour-based vision challenges see the red outline very differently, and those differences simply introduce noise to the image, not clarity.

• The pointer icon is more of a branding consistency issue. We haven't included pointers in screenshots across the docs site, and if we decided to introduce such a convention, we'd want the pointer icons to be aligned with the Mattermost corporate brand.

Again, given the effort needed to remove these elements, I am open to accepting this PR as-is. However, note that there are merge conflicts that need to be resolved first. Any merge conflicts you're seeing are because another contributor is currently creating brand new mobile-specific screenshots (where the image files are prepended with mobile) as part of another docs campaign. Please review all current and previous merge conflicts (please go back and review merge conflict changes you applied previously) to ensure you're not overwriting the other contributor's contributions, please.

Regarding scaling mobile screenshots: Please add the :scale: 30 attribute to the image definition to scale the image dynamically on the page.

[yesbhautik]

Given the effort it will take to remove elements from the new product screenshots (advanced tooling and AI), I would prefer not to ask you to complete that extra work, given how much you've already contributed in this docs PR.

I do want to provide context as to why I explored the effort to remove the elements:

• You're right that there are existing screenshots that include red outlines, and this convention is typically used for external tools beyond Mattermost. The red outline is a convention we definitely want to avoid in the product docs, going forward with Mattermost-based screen captures, because it's not inclusive from an accessibility perspective. Those with colour-based vision challenges see the red outline very differently, and those differences simply introduce noise to the image, not clarity.
• The pointer icon is more of a branding consistency issue. We haven't included pointers in screenshots across the docs site, and if we decided to introduce such a convention, we'd want the pointer icons to be aligned with the Mattermost corporate brand.

Again, given the effort needed to remove these elements, I am open to accepting this PR as-is.

Alright, no worries. Marge this PR after clearance if conflicts & image reducing the mobile screenshot scale. Just create new issue for removing RED OUTLINES & HAND ICONS over the all images, I will move forward into when I get free. Currently, I started working on #3872.

[yesbhautik]

Any merge conflicts you're seeing are because another contributor is currently creating brand new mobile-specific screenshots (where the image files are prepended with mobile) as part of another docs campaign. Please review all current and previous merge conflicts (please go back and review merge conflict changes you applied previously) to ensure you're not overwriting the other contributor's contributions, please.

I tried to find previous merge but unable to find it. Can you, please, provide me refer me direct link to PR/merge?

[yesbhautik]

Hello, @cwarnermm. The issue with the mobile screenshot size scaling has been resolved.

Regarding the conflicts, I am getting some error in Web editor. Please find the attached screenshot. Could you resolve this minor conflict issue?

[cwarnermm]

@yesbhautik - I may be mis-remembering that there were additional merge conflict resolutions that need to be revisited on this PR. If this is the first time you're encountering merge conflicts, then I can confirm that I'm mixing up this PR with others :)

For the current merge conflicts, I need you to revert any screenshot you've modified that starts with mobile in the filename. These screenshots were very recently captured and added to the docs code base and don't need to be modified at this time.

[yesbhautik]

If this is the first time you're encountering merge conflicts

Come on, I have worked with merge conflicts, but I am getting confused here. Also, I was unable to find conflicts details & reason.

No worries. Still tired.

[cwarnermm]

@yesbhautik - Please revert/remove the following image updates from this PR:

• source/images/mobile-bookmark-add-choice.png
• source/images/mobile-bookmark-add-details.png
• source/images/mobile-bookmark-add.png

And any other image update you've made whose filename starts with mobile- as they directly conflict with another contributor's updates.

Also - I didn't intend to suggest that you weren't familiar with merge conflict workflows. I was intending to say that if you and I haven't talked about merge conflicts until now in the context of this PR, that's entirely a mistake I've made by mixing up this PR with another PR.

[yesbhautik]

@cwarnermm I have replaced my images with old images as it was.

[github-actions]

Newest code from yesbhautik has been published to preview environment for Git SHA a9619bb