Update the mobile_guide page to the new design. #30006

pixlwave · 2025-05-22T16:18:25Z

This PR updates the mobile_guide page to match the new design that we're going to roll out on mobile.element.io (we would like both pages to look the same). It makes the following changes:

Splits out the SVGs into a mobile_guide/assets directory (for easy sync with mobile.element.io) and the CSS into an index.css page (adding a new copy rule for the SVGs).
Adds a mobile_guide_app_variant to config.json (please let me know if there's a better name or if I missed any steps when adding this).
Uses the new config option to configure the page to show the right downloads/deep-link for Element/Element X/Element Pro (defaults to Element).
Updates the structure of the page to match the new designs.
- This includes removing the button to continue on the web, as this wasn't in the design. I'm unsure if there's a need for this I might be missing, I was able to load the site in desktop mode without tapping it which seemed reasonable enough to me for the handful of users who might want to try this?

Element Classic	Element X	Element Pro

Checklist

Tests written for new code (and old code if feasible).
New or updated public/exported symbols have accurate TSDoc documentation.
Linter and other CI checks pass.
I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

- Extract the CSS & SVGs from the page for easier sync with mobile.element.io - Update the webpack config to copy the extracted SVGs (webpack magic handles the CSS). - Initial implementation of the updated design (still more updates to come). - Allow the page to be configured for Element Classic, X and Pro. fixup

pixlwave · 2025-05-22T16:32:01Z

Ok, I don't understand, when I run locally with yarn build && yarn start I had to reference the assets as mobile_guide/assets/*.svg but I see on the Netlify deployment above it is now attempting to fetch mobile_guide/mobile_guide/assets/*.svg. How come it behaves differently there to on my local machine?

pixlwave · 2025-05-22T16:34:48Z

src/vector/mobile_guide/index.css

+}
+
+body {
+    background: #fff;


I haven't switched to using var(--cpd-color-*) yet as I'd like to figure out the best way to make this page easy to copy over to mobile.element.io.

Looks like cpd tokens are already used though? https://github.com/element-hq/element-web/pull/30006/files#diff-f0093dff0cc8dae8e989db7405ba31f0c31e3d52f1596e80f87c3d29c9319157R18

Ok, I've gone through your comments and used all the tokens I could adding comments for the ones that I couldn't:

Specifically I couldn't find an equivalent for the header/p text colour so I added a comment to that :D

Scratch that last bit, I was told to use text secondary from Compound, updated.

src/vector/mobile_guide/index.css

pixlwave · 2025-05-28T09:40:57Z

Ok, I don't understand, when I run locally with yarn build && yarn start I had to reference the assets as mobile_guide/assets/*.svg but I see on the Netlify deployment above it is now attempting to fetch mobile_guide/mobile_guide/assets/*.svg. How come it behaves differently there to on my local machine?

Fixed using <%= require().default %>

- Make the linter happy. - Let web pack handle the asset sources.

src/vector/mobile_guide/index.html

Puts the link at the top for now.

pixlwave · 2025-06-04T17:11:58Z

@pixlwave test looks great, to build the screenshots run yarn test:playwright:screenshots mobile-guide.spec.ts then commit the resulting new files

Thank you! Got it working eventually even if it was a bit of a journey (ended up in a Linux VM 🙈). The axe definitely does have a load of violations though 😔

t3chguy · 2025-06-04T17:36:49Z

We might need to fix them, @daniellekirkwood is currently working on a VPAT which commits us to making sure things we build are accessible

pixlwave · 2025-06-05T10:30:32Z

Alright, accessibility errors fixed! Caveat:

pixlwave · 2025-06-06T07:52:33Z

Thank you! Do I need to do anything else to get this merged? Also, please do squash-merge given the history is so noisy on this one :)

t3chguy · 2025-06-10T12:44:26Z

May need reverting as it breaks Windows builds https://github.com/element-hq/element-web/actions/runs/15559495760/job/43808032961

cc @pixlwave

This reverts commit 0e74871.

…0104)

…30006)" (element-hq#30104) This reverts commit c51823d.

Co-authored-by: Michael Telatynski <[email protected]>

…0006)" (element-hq#30104)

…t X by default. (#30172) * Reapply "Update the mobile_guide page to the new design. (#30006)" (#30104) This reverts commit c51823d. * Use Element X as the default mobile_guide_app_variant when omitted. * Fix a build error on Windows. Additionally revert "Remove unnecessary <%= require %> usages" and let webpack handle all of the assets (without a manual copy rule). * Exclude mobile_guide from coverage gate It has playwright tests * Revert the re-introduction of <%= require %> * Fix snapshot tests on mobile_guide. --------- Co-authored-by: Michael Telatynski <[email protected]>

pixlwave added 5 commits May 22, 2025 12:11

Control the mobile_guide app variant with config.json.

c2c59a6

Remove the manual instructions on the mobile_guide.

cc90764

Remove the back to Element link on mobile_guide

c8031e8

Finish implementing the design updates on mobile_guide.

405f687

github-actions bot deployed to Netlify May 22, 2025 16:20 View deployment

pixlwave added the T-Enhancement label May 22, 2025

github-actions bot deployed to EndToEndTests May 22, 2025 16:30 View deployment

pixlwave marked this pull request as ready for review May 22, 2025 16:32

pixlwave requested a review from a team as a code owner May 22, 2025 16:32

pixlwave requested review from t3chguy and MidhunSureshR May 22, 2025 16:32

pixlwave commented May 22, 2025

View reviewed changes

src/vector/mobile_guide/index.css Outdated Show resolved Hide resolved

Split out code used on both mobile.element.io and the mobile_guide.

c634434

github-actions bot deployed to Netlify May 23, 2025 11:42 View deployment

github-actions bot deployed to EndToEndTests May 23, 2025 11:53 View deployment

github-actions bot deployed to Netlify May 28, 2025 09:35 View deployment

Fix some issues on the PR.

e160afb

- Make the linter happy. - Let web pack handle the asset sources.

pixlwave force-pushed the doug/mobile-guide branch from e324df6 to e160afb Compare May 28, 2025 09:43

MidhunSureshR reviewed May 28, 2025

View reviewed changes

src/vector/mobile_guide/index.html Show resolved Hide resolved

src/vector/mobile_guide/index.html Outdated Show resolved Hide resolved

github-actions bot deployed to Netlify May 28, 2025 09:45 View deployment

github-actions bot deployed to EndToEndTests May 28, 2025 09:57 View deployment

Remove unnecessary <%= require %> usages

8f5e877

github-actions bot deployed to Netlify May 28, 2025 10:45 View deployment

github-actions bot deployed to EndToEndTests May 28, 2025 10:56 View deployment

pixlwave added 2 commits May 28, 2025 12:39

Remove unused @media section.

992468c

Revert "Remove the back to Element link on mobile_guide"

aafa714

Puts the link at the top for now.

github-actions bot deployed to EndToEndTests June 4, 2025 15:52 View deployment

pixlwave force-pushed the doug/mobile-guide branch from 51d19ce to 0a7b23f Compare June 4, 2025 17:10

github-actions bot deployed to Netlify June 4, 2025 17:13 View deployment

Add screenshot tests on mobile_guide.

be4f9bc

pixlwave force-pushed the doug/mobile-guide branch from 0a7b23f to be4f9bc Compare June 4, 2025 17:20

github-actions bot deployed to Netlify June 4, 2025 17:23 View deployment

github-actions bot deployed to EndToEndTests June 4, 2025 17:37 View deployment

Fix accessibility errors on mobile_guide.

14140be

github-actions bot deployed to Netlify June 5, 2025 10:26 View deployment

Fix a lint error.

b9643f5

github-actions bot deployed to Netlify June 5, 2025 10:32 View deployment

github-actions bot deployed to EndToEndTests June 5, 2025 10:43 View deployment

t3chguy approved these changes Jun 5, 2025

View reviewed changes

Merge branch 'develop' into doug/mobile-guide

498a9f1

github-actions bot deployed to Netlify June 9, 2025 06:43 View deployment

github-actions bot deployed to EndToEndTests June 9, 2025 06:53 View deployment

t3chguy merged commit 0e74871 into element-hq:develop Jun 10, 2025
29 of 30 checks passed

t3chguy added a commit that referenced this pull request Jun 10, 2025

Revert "Update the mobile_guide page to the new design. (#30006)"

9605fdc

This reverts commit 0e74871.

t3chguy mentioned this pull request Jun 10, 2025

Revert "Update the mobile_guide page to the new design." #30104

Merged

t3chguy added a commit that referenced this pull request Jun 10, 2025

Revert "Update the mobile_guide page to the new design. (#30006)" (#3…

c51823d

…0104)

pixlwave added a commit to pixlwave/element-web that referenced this pull request Jun 19, 2025

Reapply "Update the mobile_guide page to the new design. (element-hq#…

2e6b385

…30006)" (element-hq#30104) This reverts commit c51823d.

pixlwave mentioned this pull request Jun 19, 2025

Update the mobile_guide page to the new design and link out to Element X by default. #30172

Merged

snowping pushed a commit to Novaloop-AG/element-web that referenced this pull request Jun 22, 2025

Update the mobile_guide page to the new design. (element-hq#30006)

c7cc142

Co-authored-by: Michael Telatynski <[email protected]>

snowping pushed a commit to Novaloop-AG/element-web that referenced this pull request Jun 22, 2025

Revert "Update the mobile_guide page to the new design. (element-hq#3…

5d9e164

…0006)" (element-hq#30104)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Update the mobile_guide page to the new design. #30006

Update the mobile_guide page to the new design. #30006

pixlwave commented May 22, 2025 •

edited

Loading

Uh oh!

pixlwave commented May 22, 2025

Uh oh!

pixlwave May 22, 2025

Uh oh!

t3chguy May 29, 2025

Uh oh!

pixlwave May 30, 2025

Uh oh!

pixlwave May 30, 2025

Uh oh!

Uh oh!

pixlwave commented May 28, 2025

Uh oh!

Uh oh!

Uh oh!

pixlwave commented Jun 4, 2025

Uh oh!

t3chguy commented Jun 4, 2025

Uh oh!

pixlwave commented Jun 5, 2025

Uh oh!

pixlwave commented Jun 6, 2025

Uh oh!

Uh oh!

t3chguy commented Jun 10, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Update the mobile_guide page to the new design. #30006

Update the mobile_guide page to the new design. #30006

Conversation

pixlwave commented May 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Uh oh!

pixlwave commented May 22, 2025

Uh oh!

pixlwave May 22, 2025

Choose a reason for hiding this comment

Uh oh!

t3chguy May 29, 2025

Choose a reason for hiding this comment

Uh oh!

pixlwave May 30, 2025

Choose a reason for hiding this comment

Uh oh!

pixlwave May 30, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

pixlwave commented May 28, 2025

Uh oh!

Uh oh!

Uh oh!

pixlwave commented Jun 4, 2025

Uh oh!

t3chguy commented Jun 4, 2025

Uh oh!

pixlwave commented Jun 5, 2025

Uh oh!

pixlwave commented Jun 6, 2025

Uh oh!

Uh oh!

t3chguy commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

pixlwave commented May 22, 2025 •

edited

Loading

t3chguy commented Jun 10, 2025 •

edited

Loading