mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2025-12-05 01:10:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Michael Telatynski
2025-06-10 14:01:27 +01:00
committed by GitHub
parent 5b51fe48af
commit c51823db5e
15 changed files with 799 additions and 566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/config.md
View File

@@ -130,37 +130,32 @@ complete re-branding/private labeling, a more personalised experience can be ach
6. `mobile_builds`: Optional. Like `desktop_builds`, except for the mobile apps. Also described in more detail down below.
7. `mobile_guide_toast`: When `true` (default), users accessing the Element Web instance from a mobile device will be prompted to
download the app instead.
8. `mobile_guide_app_variant`: Optional. The mobile app that the user is prompted to download from the `/mobile_guide` page. When omitted
the mobile guide will be configured with the Classic apps. Allowed values are as follows:
1. `classic`: Element Android/iOS.
2. `x`: Element X Android/iOS.
3. `pro`: Element Pro Android/iOS.
9. `update_base_url`: For the desktop app only, the URL where to acquire update packages. If specified, must be a path to a directory
8. `update_base_url`: For the desktop app only, the URL where to acquire update packages. If specified, must be a path to a directory
containing `macos` and `win32` directories, with the update packages within. Defaults to `https://packages.element.io/desktop/update/`
in production.
10. `map_style_url`: Map tile server style URL for location sharing. e.g. `https://api.maptiler.com/maps/streets/style.json?key=YOUR_KEY_GOES_HERE`
This setting is ignored if your homeserver provides `/.well-known/matrix/client` in its well-known location, and the JSON file
at that location has a key `m.tile_server` (or the unstable version `org.matrix.msc3488.tile_server`). In this case, the
configuration found in the well-known location is used instead.
11. `welcome_user_id`: **DEPRECATED** An optional user ID to start a DM with after creating an account. Defaults to nothing (no DM created).
12. `custom_translations_url`: An optional URL to allow overriding of translatable strings. The JSON file must be in a format of
9. `map_style_url`: Map tile server style URL for location sharing. e.g. `https://api.maptiler.com/maps/streets/style.json?key=YOUR_KEY_GOES_HERE`
This setting is ignored if your homeserver provides `/.well-known/matrix/client` in its well-known location, and the JSON file
at that location has a key `m.tile_server` (or the unstable version `org.matrix.msc3488.tile_server`). In this case, the
configuration found in the well-known location is used instead.
10. `welcome_user_id`: **DEPRECATED** An optional user ID to start a DM with after creating an account. Defaults to nothing (no DM created).
11. `custom_translations_url`: An optional URL to allow overriding of translatable strings. The JSON file must be in a format of
`{"affected|translation|key": {"languageCode": "new string"}}`. See https://github.com/matrix-org/matrix-react-sdk/pull/7886 for details.
13. `branding`: Options for configuring various assets used within the app. Described in more detail down below.
14. `embedded_pages`: Further optional URLs for various assets used within the app. Described in more detail down below.
15. `disable_3pid_login`: When `false` (default), **enables** the options to log in with email address or phone number. Set to
12. `branding`: Options for configuring various assets used within the app. Described in more detail down below.
13. `embedded_pages`: Further optional URLs for various assets used within the app. Described in more detail down below.
14. `disable_3pid_login`: When `false` (default), **enables** the options to log in with email address or phone number. Set to
`true` to hide these options.
16. `disable_login_language_selector`: When `false` (default), **enables** the language selector on the login pages. Set to `true`
15. `disable_login_language_selector`: When `false` (default), **enables** the language selector on the login pages. Set to `true`
to hide this dropdown.
17. `disable_guests`: When `false` (default), **enable** guest-related functionality (peeking/previewing rooms, etc) for unregistered
16. `disable_guests`: When `false` (default), **enable** guest-related functionality (peeking/previewing rooms, etc) for unregistered
users. Set to `true` to disable this functionality.
18. `user_notice`: Optional notice to show to the user, e.g. for sunsetting a deployment and pushing users to move in their own time.
17. `user_notice`: Optional notice to show to the user, e.g. for sunsetting a deployment and pushing users to move in their own time.
Takes a configuration object as below:
1. `title`: Required. Title to show at the top of the notice.
2. `description`: Required. The description to use for the notice.
3. `show_once`: Optional. If true then the notice will only be shown once per device.
19. `help_url`: The URL to point users to for help with the app, defaults to `https://element.io/help`.
20. `help_encryption_url`: The URL to point users to for help with encryption, defaults to `https://element.io/help#encryption`.
21. `force_verification`: If true, users must verify new logins (eg. with another device / their recovery key)
18. `help_url`: The URL to point users to for help with the app, defaults to `https://element.io/help`.
19. `help_encryption_url`: The URL to point users to for help with encryption, defaults to `https://element.io/help#encryption`.
20. `force_verification`: If true, users must verify new logins (eg. with another device / their recovery key)
### `desktop_builds` and `mobile_builds`

33
playwright/e2e/mobile-guide/mobile-guide.spec.ts
View File

@@ -1,33 +0,0 @@
/*
Copyright 2025 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { test, expect } from "../../element-web-test";
import { MobileAppVariant } from "../../../src/vector/mobile_guide/mobile-apps";
const variants = [MobileAppVariant.Classic, MobileAppVariant.X, MobileAppVariant.Pro];
test.describe("Mobile Guide Screenshots", { tag: "@screenshot" }, () => {
for (const variant of variants) {
test.use({
config: {
default_server_config: {
"m.homeserver": {
base_url: "https://matrix.server.invalid",
server_name: "server.invalid",
},
},
mobile_guide_app_variant: variant,
},
viewport: { width: 390, height: 844 }, // iPhone 16e
});
test(`should match the homepage screenshot for variant: ${variant}`, async ({ page, axe }) => {
await page.goto("/mobile_guide/");
await expect(page).toMatchScreenshot(`mobile-guide-${variant}.png`);
await expect(axe).toHaveNoViolations();
});
}
});

BIN
playwright/snapshots/mobile-guide/mobile-guide.spec.ts/mobile-guide-classic-linux.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 70 KiB

BIN
playwright/snapshots/mobile-guide/mobile-guide.spec.ts/mobile-guide-pro-linux.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 70 KiB

BIN
playwright/snapshots/mobile-guide/mobile-guide.spec.ts/mobile-guide-x-linux.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 70 KiB

1
src/IConfigOptions.ts
View File

@@ -81,7 +81,6 @@ export interface IConfigOptions {
};
mobile_guide_toast?: boolean;
mobile_guide_app_variant?: "classic" | "x" | "pro";
default_theme?: "light" | "dark" | string; // custom themes are strings
default_country_code?: string; // ISO 3166 alpha2 country code

46
src/vector/mobile_guide/assets/app-store-badge.svg
View File

@@ -1,46 +0,0 @@
<svg id="livetype" xmlns="http://www.w3.org/2000/svg" width="119.66407" height="40" viewBox="0 0 119.66407 40">
<title>Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917</title>
<g>
<g>
<g>
<path d="M110.13477,0H9.53468c-.3667,0-.729,0-1.09473.002-.30615.002-.60986.00781-.91895.0127A13.21476,13.21476,0,0,0,5.5171.19141a6.66509,6.66509,0,0,0-1.90088.627A6.43779,6.43779,0,0,0,1.99757,1.99707,6.25844,6.25844,0,0,0,.81935,3.61816a6.60119,6.60119,0,0,0-.625,1.90332,12.993,12.993,0,0,0-.1792,2.002C.00587,7.83008.00489,8.1377,0,8.44434V31.5586c.00489.3105.00587.6113.01515.9219a12.99232,12.99232,0,0,0,.1792,2.0019,6.58756,6.58756,0,0,0,.625,1.9043A6.20778,6.20778,0,0,0,1.99757,38.001a6.27445,6.27445,0,0,0,1.61865,1.1787,6.70082,6.70082,0,0,0,1.90088.6308,13.45514,13.45514,0,0,0,2.0039.1768c.30909.0068.6128.0107.91895.0107C8.80567,40,9.168,40,9.53468,40H110.13477c.3594,0,.7246,0,1.084-.002.3047,0,.6172-.0039.9219-.0107a13.279,13.279,0,0,0,2-.1768,6.80432,6.80432,0,0,0,1.9082-.6308,6.27742,6.27742,0,0,0,1.6172-1.1787,6.39482,6.39482,0,0,0,1.1816-1.6143,6.60413,6.60413,0,0,0,.6191-1.9043,13.50643,13.50643,0,0,0,.1856-2.0019c.0039-.3106.0039-.6114.0039-.9219.0078-.3633.0078-.7246.0078-1.0938V9.53613c0-.36621,0-.72949-.0078-1.09179,0-.30664,0-.61426-.0039-.9209a13.5071,13.5071,0,0,0-.1856-2.002,6.6177,6.6177,0,0,0-.6191-1.90332,6.46619,6.46619,0,0,0-2.7988-2.7998,6.76754,6.76754,0,0,0-1.9082-.627,13.04394,13.04394,0,0,0-2-.17676c-.3047-.00488-.6172-.01074-.9219-.01269-.3594-.002-.7246-.002-1.084-.002Z" style="fill: #a6a6a6"/>
<path d="M8.44483,39.125c-.30468,0-.602-.0039-.90429-.0107a12.68714,12.68714,0,0,1-1.86914-.1631,5.88381,5.88381,0,0,1-1.65674-.5479,5.40573,5.40573,0,0,1-1.397-1.0166,5.32082,5.32082,0,0,1-1.02051-1.3965,5.72186,5.72186,0,0,1-.543-1.6572,12.41351,12.41351,0,0,1-.1665-1.875c-.00634-.2109-.01464-.9131-.01464-.9131V8.44434S.88185,7.75293.8877,7.5498a12.37039,12.37039,0,0,1,.16553-1.87207,5.7555,5.7555,0,0,1,.54346-1.6621A5.37349,5.37349,0,0,1,2.61183,2.61768,5.56543,5.56543,0,0,1,4.01417,1.59521a5.82309,5.82309,0,0,1,1.65332-.54394A12.58589,12.58589,0,0,1,7.543.88721L8.44532.875H111.21387l.9131.0127a12.38493,12.38493,0,0,1,1.8584.16259,5.93833,5.93833,0,0,1,1.6709.54785,5.59374,5.59374,0,0,1,2.415,2.41993,5.76267,5.76267,0,0,1,.5352,1.64892,12.995,12.995,0,0,1,.1738,1.88721c.0029.2832.0029.5874.0029.89014.0079.375.0079.73193.0079,1.09179V30.4648c0,.3633,0,.7178-.0079,1.0752,0,.3252,0,.6231-.0039.9297a12.73126,12.73126,0,0,1-.1709,1.8535,5.739,5.739,0,0,1-.54,1.67,5.48029,5.48029,0,0,1-1.0156,1.3857,5.4129,5.4129,0,0,1-1.3994,1.0225,5.86168,5.86168,0,0,1-1.668.5498,12.54218,12.54218,0,0,1-1.8692.1631c-.2929.0068-.5996.0107-.8974.0107l-1.084.002Z"/>
</g>
<g id="_Group_" data-name="&lt;Group&gt;">
<g id="_Group_2" data-name="&lt;Group&gt;">
<g id="_Group_3" data-name="&lt;Group&gt;">
<path id="_Path_" data-name="&lt;Path&gt;" d="M24.76888,20.30068a4.94881,4.94881,0,0,1,2.35656-4.15206,5.06566,5.06566,0,0,0-3.99116-2.15768c-1.67924-.17626-3.30719,1.00483-4.1629,1.00483-.87227,0-2.18977-.98733-3.6085-.95814a5.31529,5.31529,0,0,0-4.47292,2.72787c-1.934,3.34842-.49141,8.26947,1.3612,10.97608.9269,1.32535,2.01018,2.8058,3.42763,2.7533,1.38706-.05753,1.9051-.88448,3.5794-.88448,1.65876,0,2.14479.88448,3.591.8511,1.48838-.02416,2.42613-1.33124,3.32051-2.66914a10.962,10.962,0,0,0,1.51842-3.09251A4.78205,4.78205,0,0,1,24.76888,20.30068Z" style="fill: #fff"/>
<path id="_Path_2" data-name="&lt;Path&gt;" d="M22.03725,12.21089a4.87248,4.87248,0,0,0,1.11452-3.49062,4.95746,4.95746,0,0,0-3.20758,1.65961,4.63634,4.63634,0,0,0-1.14371,3.36139A4.09905,4.09905,0,0,0,22.03725,12.21089Z" style="fill: #fff"/>
</g>
</g>
<g>
<path d="M42.30227,27.13965h-4.7334l-1.13672,3.35645H34.42727l4.4834-12.418h2.083l4.4834,12.418H43.438ZM38.0591,25.59082h3.752l-1.84961-5.44727h-.05176Z" style="fill: #fff"/>
<path d="M55.15969,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438h-1.8584V21.44238H48.4302v1.50586h.03418a3.21162,3.21162,0,0,1,2.88281-1.60059C53.645,21.34766,55.15969,23.16406,55.15969,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C52.30227,29.01563,53.24953,27.81934,53.24953,25.96973Z" style="fill: #fff"/>
<path d="M65.12453,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438h-1.8584V21.44238H58.395v1.50586h.03418A3.21162,3.21162,0,0,1,61.312,21.34766C63.60988,21.34766,65.12453,23.16406,65.12453,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C62.26711,29.01563,63.21438,27.81934,63.21438,25.96973Z" style="fill: #fff"/>
<path d="M71.71047,27.03613c.1377,1.23145,1.334,2.04,2.96875,2.04,1.56641,0,2.69336-.80859,2.69336-1.91895,0-.96387-.67969-1.541-2.28906-1.93652l-1.60937-.3877c-2.28027-.55078-3.33887-1.61719-3.33887-3.34766,0-2.14258,1.86719-3.61426,4.51855-3.61426,2.624,0,4.42285,1.47168,4.4834,3.61426h-1.876c-.1123-1.23926-1.13672-1.9873-2.63379-1.9873s-2.52148.75684-2.52148,1.8584c0,.87793.6543,1.39453,2.25488,1.79l1.36816.33594c2.54785.60254,3.60645,1.626,3.60645,3.44238,0,2.32324-1.85059,3.77832-4.79395,3.77832-2.75391,0-4.61328-1.4209-4.7334-3.667Z" style="fill: #fff"/>
<path d="M83.34621,19.2998v2.14258h1.72168v1.47168H83.34621v4.99121c0,.77539.34473,1.13672,1.10156,1.13672a5.80752,5.80752,0,0,0,.61133-.043v1.46289a5.10351,5.10351,0,0,1-1.03223.08594c-1.833,0-2.54785-.68848-2.54785-2.44434V22.91406H80.16262V21.44238H81.479V19.2998Z" style="fill: #fff"/>
<path d="M86.065,25.96973c0-2.84863,1.67773-4.63867,4.29395-4.63867,2.625,0,4.29492,1.79,4.29492,4.63867,0,2.85645-1.66113,4.63867-4.29492,4.63867C87.72609,30.6084,86.065,28.82617,86.065,25.96973Zm6.69531,0c0-1.9541-.89551-3.10742-2.40137-3.10742s-2.40039,1.16211-2.40039,3.10742c0,1.96191.89453,3.10645,2.40039,3.10645S92.76027,27.93164,92.76027,25.96973Z" style="fill: #fff"/>
<path d="M96.18606,21.44238h1.77246v1.541h.043a2.1594,2.1594,0,0,1,2.17773-1.63574,2.86616,2.86616,0,0,1,.63672.06934v1.73828a2.59794,2.59794,0,0,0-.835-.1123,1.87264,1.87264,0,0,0-1.93652,2.083v5.37012h-1.8584Z" style="fill: #fff"/>
<path d="M109.3843,27.83691c-.25,1.64355-1.85059,2.77148-3.89844,2.77148-2.63379,0-4.26855-1.76465-4.26855-4.5957,0-2.83984,1.64355-4.68164,4.19043-4.68164,2.50488,0,4.08008,1.7207,4.08008,4.46582v.63672h-6.39453v.1123a2.358,2.358,0,0,0,2.43555,2.56445,2.04834,2.04834,0,0,0,2.09082-1.27344Zm-6.28223-2.70215h4.52637a2.1773,2.1773,0,0,0-2.2207-2.29785A2.292,2.292,0,0,0,103.10207,25.13477Z" style="fill: #fff"/>
</g>
</g>
</g>
<g id="_Group_4" data-name="&lt;Group&gt;">
<g>
<path d="M37.82619,8.731a2.63964,2.63964,0,0,1,2.80762,2.96484c0,1.90625-1.03027,3.002-2.80762,3.002H35.67092V8.731Zm-1.22852,5.123h1.125a1.87588,1.87588,0,0,0,1.96777-2.146,1.881,1.881,0,0,0-1.96777-2.13379h-1.125Z" style="fill: #fff"/>
<path d="M41.68068,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C44.57522,13.99463,45.01369,13.42432,45.01369,12.44434Z" style="fill: #fff"/>
<path d="M51.57326,14.69775h-.92187l-.93066-3.31641h-.07031l-.92676,3.31641h-.91309l-1.24121-4.50293h.90137l.80664,3.436h.06641l.92578-3.436h.85254l.92578,3.436h.07031l.80273-3.436h.88867Z" style="fill: #fff"/>
<path d="M53.85354,10.19482H54.709v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915h-.88867V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
<path d="M59.09377,8.437h.88867v6.26074h-.88867Z" style="fill: #fff"/>
<path d="M61.21779,12.44434a2.13346,2.13346,0,1,1,4.24756,0,2.1338,2.1338,0,1,1-4.24756,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C64.11232,13.99463,64.5508,13.42432,64.5508,12.44434Z" style="fill: #fff"/>
<path d="M66.4009,13.42432c0-.81055.60352-1.27783,1.6748-1.34424l1.21973-.07031v-.38867c0-.47559-.31445-.74414-.92187-.74414-.49609,0-.83984.18213-.93848.50049h-.86035c.09082-.77344.81836-1.26953,1.83984-1.26953,1.12891,0,1.76563.562,1.76563,1.51318v3.07666h-.85547v-.63281h-.07031a1.515,1.515,0,0,1-1.35254.707A1.36026,1.36026,0,0,1,66.4009,13.42432Zm2.89453-.38477v-.37646l-1.09961.07031c-.62012.0415-.90137.25244-.90137.64941,0,.40527.35156.64111.835.64111A1.0615,1.0615,0,0,0,69.29543,13.03955Z" style="fill: #fff"/>
<path d="M71.34816,12.44434c0-1.42285.73145-2.32422,1.86914-2.32422a1.484,1.484,0,0,1,1.38086.79h.06641V8.437h.88867v6.26074h-.85156v-.71143h-.07031a1.56284,1.56284,0,0,1-1.41406.78564C72.0718,14.772,71.34816,13.87061,71.34816,12.44434Zm.918,0c0,.95508.4502,1.52979,1.20313,1.52979.749,0,1.21191-.583,1.21191-1.52588,0-.93848-.46777-1.52979-1.21191-1.52979C72.72121,10.91846,72.26613,11.49707,72.26613,12.44434Z" style="fill: #fff"/>
<path d="M79.23,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C82.12453,13.99463,82.563,13.42432,82.563,12.44434Z" style="fill: #fff"/>
<path d="M84.66945,10.19482h.85547v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915H87.605V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
<path d="M93.51516,9.07373v1.1416h.97559v.74854h-.97559V13.2793c0,.47168.19434.67822.63672.67822a2.96657,2.96657,0,0,0,.33887-.02051v.74023a2.9155,2.9155,0,0,1-.4834.04541c-.98828,0-1.38184-.34766-1.38184-1.21582v-2.543h-.71484v-.74854h.71484V9.07373Z" style="fill: #fff"/>
<path d="M95.70461,8.437h.88086v2.48145h.07031a1.3856,1.3856,0,0,1,1.373-.80664,1.48339,1.48339,0,0,1,1.55078,1.67871v2.90723H98.69v-2.688c0-.71924-.335-1.0835-.96289-1.0835a1.05194,1.05194,0,0,0-1.13379,1.1416v2.62988h-.88867Z" style="fill: #fff"/>
<path d="M104.76125,13.48193a1.828,1.828,0,0,1-1.95117,1.30273A2.04531,2.04531,0,0,1,100.73,12.46045a2.07685,2.07685,0,0,1,2.07617-2.35254c1.25293,0,2.00879.856,2.00879,2.27V12.688h-3.17969v.0498a1.1902,1.1902,0,0,0,1.19922,1.29,1.07934,1.07934,0,0,0,1.07129-.5459Zm-3.126-1.45117h2.27441a1.08647,1.08647,0,0,0-1.1084-1.1665A1.15162,1.15162,0,0,0,101.63527,12.03076Z" style="fill: #fff"/>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

53
src/vector/mobile_guide/assets/bottom-gradient.svg
View File

@@ -1,53 +0,0 @@
<svg width="375" height="178" viewBox="0 0 375 178" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_382_1634)">
<rect width="375" height="178" fill="white"/>
<g filter="url(#filter0_f_382_1634)">
<ellipse cx="187.5" cy="645.488" rx="403.5" ry="612.805" fill="url(#paint0_linear_382_1634)"/>
</g>
<g filter="url(#filter1_f_382_1634)">
<ellipse cx="187.5" cy="650.529" rx="385.3" ry="585.164" fill="#101317"/>
</g>
</g>
<defs>
<filter id="filter0_f_382_1634" x="-248.683" y="-6.48499e-05" width="872.367" height="1290.98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="16.3415" result="effect1_foregroundBlur_382_1634"/>
</filter>
<filter id="filter1_f_382_1634" x="-230.483" y="32.6826" width="835.966" height="1235.69" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="16.3415" result="effect1_foregroundBlur_382_1634"/>
</filter>
<linearGradient id="paint0_linear_382_1634" x1="141.636" y1="133.796" x2="141.636" y2="32.6829" gradientUnits="userSpaceOnUse">
<stop stop-color="#062993"/>
<stop offset="0.040404" stop-color="#02389D"/>
<stop offset="0.0808081" stop-color="#0045A6"/>
<stop offset="0.121212" stop-color="#0051AD"/>
<stop offset="0.161616" stop-color="#005DB4"/>
<stop offset="0.20202" stop-color="#0069BA"/>
<stop offset="0.242424" stop-color="#0075BB"/>
<stop offset="0.282828" stop-color="#0081BB"/>
<stop offset="0.323232" stop-color="#008CB9"/>
<stop offset="0.363636" stop-color="#0098B7"/>
<stop offset="0.40404" stop-color="#00A3B3"/>
<stop offset="0.444444" stop-color="#00AEAD"/>
<stop offset="0.484848" stop-color="#00B8A4"/>
<stop offset="0.525253" stop-color="#00C2A0"/>
<stop offset="0.565657" stop-color="#00CC99"/>
<stop offset="0.606061" stop-color="#3AD396"/>
<stop offset="0.646465" stop-color="#5DD898"/>
<stop offset="0.686869" stop-color="#79DD99"/>
<stop offset="0.727273" stop-color="#92E29B"/>
<stop offset="0.767677" stop-color="#A8E69F"/>
<stop offset="0.808081" stop-color="#BBEAA5"/>
<stop offset="0.848485" stop-color="#CDEEAE"/>
<stop offset="0.888889" stop-color="#DCF2B9"/>
<stop offset="0.929293" stop-color="#EAF6C7"/>
<stop offset="0.969697" stop-color="#F5FBD5"/>
</linearGradient>
<clipPath id="clip0_382_1634">
<rect width="375" height="178" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

8
src/vector/mobile_guide/assets/element-logo.svg
View File

@@ -1,8 +0,0 @@
<svg width="149" height="32" viewBox="0 0 149 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3571 32C25.1936 32 32.3571 24.8366 32.3571 16C32.3571 7.16344 25.1936 0 16.3571 0C7.5205 0 0.357056 7.16344 0.357056 16C0.357056 24.8366 7.5205 32 16.3571 32Z" fill="#0DBD8B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4318 7.45512C13.4318 6.80928 13.9565 6.28573 14.6037 6.28573C18.9901 6.28573 22.546 9.83425 22.546 14.2116C22.546 14.8574 22.0214 15.381 21.3742 15.381C20.727 15.381 20.2023 14.8574 20.2023 14.2116C20.2023 11.1259 17.6957 8.62452 14.6037 8.62452C13.9565 8.62452 13.4318 8.10096 13.4318 7.45512Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.8996 13.0422C25.5467 13.0422 26.0714 13.5658 26.0714 14.2116C26.0714 18.589 22.5155 22.1375 18.129 22.1375C17.4819 22.1375 16.9572 21.6139 16.9572 20.9681C16.9572 20.3223 17.4819 19.7987 18.129 19.7987C21.2211 19.7987 23.7277 17.2973 23.7277 14.2116C23.7277 13.5658 24.2524 13.0422 24.8996 13.0422Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3008 24.5448C19.3008 25.1906 18.7762 25.7142 18.129 25.7142C13.7426 25.7142 10.1867 22.1656 10.1867 17.7883C10.1867 17.1425 10.7113 16.6189 11.3585 16.6189C12.0057 16.6189 12.5303 17.1425 12.5303 17.7883C12.5303 20.8739 15.0369 23.3754 18.129 23.3754C18.7762 23.3754 19.3008 23.8989 19.3008 24.5448Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.81455 18.9578C7.16737 18.9578 6.64272 18.4342 6.64272 17.7884C6.64272 13.411 10.1986 9.86251 14.5851 9.86251C15.2323 9.86251 15.7569 10.3861 15.7569 11.0319C15.7569 11.6777 15.2323 12.2013 14.5851 12.2013C11.493 12.2013 8.98638 14.7027 8.98638 17.7884C8.98638 18.4342 8.46173 18.9578 7.81455 18.9578Z" fill="white"/>
<path d="M56.3571 17.2858H45.0714C45.2048 18.4667 45.6333 19.4096 46.3571 20.1144C47.0809 20.8001 48.0333 21.1429 49.2143 21.1429C49.9952 21.1429 50.7 20.9525 51.3286 20.5715C51.9571 20.1905 52.4048 19.6763 52.6714 19.0286H56.1C55.6429 20.5334 54.7857 21.7525 53.5286 22.6858C52.2905 23.6001 50.8238 24.0572 49.1286 24.0572C46.919 24.0572 45.1286 23.3239 43.7571 21.8572C42.4048 20.3905 41.7286 18.5334 41.7286 16.2858C41.7286 14.0953 42.4143 12.2572 43.7857 10.7715C45.1571 9.28578 46.9286 8.54293 49.1 8.54293C51.2714 8.54293 53.0238 9.27626 54.3571 10.7429C55.7095 12.1905 56.3857 14.0191 56.3857 16.2286L56.3571 17.2858ZM49.1 11.3144C48.0333 11.3144 47.1476 11.6286 46.4429 12.2572C45.7381 12.8858 45.3 13.7239 45.1286 14.7715H53.0143C52.8619 13.7239 52.4429 12.8858 51.7571 12.2572C51.0714 11.6286 50.1857 11.3144 49.1 11.3144ZM58.7254 19.2858V2.28578H62.1254V19.3429C62.1254 20.1048 62.5445 20.4858 63.3826 20.4858L63.9826 20.4572V23.6858C63.6588 23.7429 63.3159 23.7715 62.954 23.7715C61.4873 23.7715 60.4112 23.4001 59.7254 22.6572C59.0588 21.9144 58.7254 20.7905 58.7254 19.2858ZM79.817 17.2858H68.5312C68.6646 18.4667 69.0932 19.4096 69.817 20.1144C70.5408 20.8001 71.4932 21.1429 72.6741 21.1429C73.4551 21.1429 74.1598 20.9525 74.7884 20.5715C75.417 20.1905 75.8646 19.6763 76.1312 19.0286H79.5598C79.1027 20.5334 78.2455 21.7525 76.9884 22.6858C75.7503 23.6001 74.2836 24.0572 72.5884 24.0572C70.3789 24.0572 68.5884 23.3239 67.217 21.8572C65.8646 20.3905 65.1884 18.5334 65.1884 16.2858C65.1884 14.0953 65.8741 12.2572 67.2455 10.7715C68.617 9.28578 70.3884 8.54293 72.5598 8.54293C74.7312 8.54293 76.4836 9.27626 77.817 10.7429C79.1693 12.1905 79.8455 14.0191 79.8455 16.2286L79.817 17.2858ZM72.5598 11.3144C71.4932 11.3144 70.6074 11.6286 69.9027 12.2572C69.1979 12.8858 68.7598 13.7239 68.5884 14.7715H76.4741C76.3217 13.7239 75.9027 12.8858 75.217 12.2572C74.5312 11.6286 73.6455 11.3144 72.5598 11.3144ZM95.1567 15.2001V23.7144H91.7567V14.8286C91.7567 12.581 90.8234 11.4572 88.9567 11.4572C87.9472 11.4572 87.1376 11.781 86.5281 12.4286C85.9376 13.0763 85.6424 13.962 85.6424 15.0858V23.7144H82.2424V8.88578H85.3853V10.8572C85.7472 10.1905 86.2996 9.63816 87.0424 9.20007C87.7853 8.76197 88.7091 8.54293 89.8138 8.54293C91.871 8.54293 93.3567 9.32388 94.271 10.8858C95.5281 9.32388 97.2043 8.54293 99.2996 8.54293C101.033 8.54293 102.366 9.08578 103.3 10.1715C104.233 11.2382 104.7 12.6477 104.7 14.4001V23.7144H101.3V14.8286C101.3 12.581 100.366 11.4572 98.4996 11.4572C97.471 11.4572 96.6519 11.7905 96.0424 12.4572C95.4519 13.1048 95.1567 14.0191 95.1567 15.2001ZM121.608 17.2858H110.323C110.456 18.4667 110.884 19.4096 111.608 20.1144C112.332 20.8001 113.284 21.1429 114.465 21.1429C115.246 21.1429 115.951 20.9525 116.58 20.5715C117.208 20.1905 117.656 19.6763 117.923 19.0286H121.351C120.894 20.5334 120.037 21.7525 118.78 22.6858C117.542 23.6001 116.075 24.0572 114.38 24.0572C112.17 24.0572 110.38 23.3239 109.008 21.8572C107.656 20.3905 106.98 18.5334 106.98 16.2858C106.98 14.0953 107.665 12.2572 109.037 10.7715C110.408 9.28578 112.18 8.54293 114.351 8.54293C116.523 8.54293 118.275 9.27626 119.608 10.7429C120.961 12.1905 121.637 14.0191 121.637 16.2286L121.608 17.2858ZM114.351 11.3144C113.284 11.3144 112.399 11.6286 111.694 12.2572C110.989 12.8858 110.551 13.7239 110.38 14.7715H118.265C118.113 13.7239 117.694 12.8858 117.008 12.2572C116.323 11.6286 115.437 11.3144 114.351 11.3144ZM127.177 8.88578V10.8572C127.519 10.2096 128.081 9.66674 128.862 9.22864C129.662 8.7715 130.624 8.54293 131.748 8.54293C133.5 8.54293 134.853 9.07626 135.805 10.1429C136.777 11.2096 137.262 12.6286 137.262 14.4001V23.7144H133.862V14.8286C133.862 13.781 133.615 12.962 133.119 12.3715C132.643 11.762 131.91 11.4572 130.919 11.4572C129.834 11.4572 128.977 11.781 128.348 12.4286C127.738 13.0763 127.434 13.9715 127.434 15.1144V23.7144H124.034V8.88578H127.177ZM147.192 20.6858V23.6286C146.773 23.7429 146.182 23.8001 145.421 23.8001C142.525 23.8001 141.078 22.3429 141.078 19.4286V11.6001H138.821V8.88578H141.078V5.02864H144.478V8.88578H147.249V11.6001H144.478V19.0858C144.478 20.2477 145.03 20.8286 146.135 20.8286L147.192 20.6858Z" fill="black"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 5.8 KiB

23
src/vector/mobile_guide/assets/google-play-badge.svg
View File

@@ -1,23 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 135 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,0,-1)">
<g>
<path d="M130,41L4.999,41C2.249,41 0,38.75 0,36L0,6C0,3.25 2.249,1 4.999,1L130,1C132.75,1 135,3.25 135,6L135,36C135,38.75 132.75,41 130,41Z" style="fill:rgb(3,4,4);fill-rule:nonzero;"/>
<path d="M130,1L4.999,1C2.249,1 0,3.25 0,6L0,36C0,38.75 2.249,41 4.999,41L130,41C132.75,41 135,38.75 135,36L135,6C135,3.25 132.75,1 130,1ZM130,1.8C132.316,1.8 134.2,3.685 134.2,6L134.2,36C134.2,38.316 132.316,40.201 130,40.201L4.999,40.201C2.684,40.201 0.8,38.316 0.8,36L0.8,6C0.8,3.685 2.684,1.8 4.999,1.8L130,1.8Z" style="fill:rgb(167,165,166);fill-rule:nonzero;"/>
<path d="M47.376,10.791L44.468,10.791L44.468,11.512L46.647,11.512C46.588,12.098 46.353,12.559 45.96,12.894C45.566,13.229 45.063,13.397 44.468,13.397C43.814,13.397 43.261,13.171 42.809,12.718C42.365,12.257 42.138,11.688 42.138,11C42.138,10.313 42.365,9.743 42.809,9.282C43.261,8.83 43.814,8.604 44.468,8.604C44.803,8.604 45.122,8.662 45.415,8.788C45.708,8.914 45.943,9.09 46.127,9.316L46.68,8.763C46.429,8.478 46.11,8.26 45.717,8.101C45.323,7.942 44.912,7.866 44.468,7.866C43.596,7.866 42.859,8.168 42.256,8.771C41.652,9.375 41.351,10.12 41.351,11C41.351,11.88 41.652,12.626 42.256,13.229C42.859,13.833 43.596,14.134 44.468,14.134C45.381,14.134 46.11,13.841 46.672,13.246C47.166,12.752 47.418,12.081 47.418,11.243C47.418,11.101 47.401,10.95 47.376,10.791Z" style="fill:white;fill-rule:nonzero;"/>
<path d="M48.524,8L48.524,14L52.027,14L52.027,13.263L49.295,13.263L49.295,11.361L51.758,11.361L51.758,10.64L49.295,10.64L49.295,8.738L52.027,8.738L52.027,8L48.524,8Z" style="fill:white;fill-rule:nonzero;"/>
<path d="M56.953,8.738L56.953,8L52.83,8L52.83,8.738L54.506,8.738L54.506,14L55.277,14L55.277,8.738L56.953,8.738Z" style="fill:white;fill-rule:nonzero;"/>
<rect x="59.937" y="8" width="0.771" height="6" style="fill:white;fill-rule:nonzero;"/>
<path d="M65.803,8.738L65.803,8L61.68,8L61.68,8.738L63.356,8.738L63.356,14L64.127,14L64.127,8.738L65.803,8.738Z" style="fill:white;fill-rule:nonzero;"/>
<path d="M73.605,8.78C73.01,8.168 72.281,7.866 71.409,7.866C70.538,7.866 69.808,8.168 69.213,8.771C68.618,9.366 68.325,10.112 68.325,11C68.325,11.889 68.618,12.634 69.213,13.229C69.808,13.833 70.538,14.134 71.409,14.134C72.272,14.134 73.01,13.833 73.605,13.229C74.2,12.634 74.493,11.889 74.493,11C74.493,10.12 74.2,9.375 73.605,8.78ZM69.767,9.282C70.211,8.83 70.755,8.604 71.409,8.604C72.063,8.604 72.607,8.83 73.043,9.282C73.487,9.727 73.705,10.305 73.705,11C73.705,11.696 73.487,12.274 73.043,12.718C72.607,13.171 72.063,13.397 71.409,13.397C70.755,13.397 70.211,13.171 69.767,12.718C69.331,12.266 69.113,11.696 69.113,11C69.113,10.305 69.331,9.735 69.767,9.282Z" style="fill:white;fill-rule:nonzero;"/>
<path d="M76.345,10.263L76.312,9.106L76.345,9.106L79.396,14L80.2,14L80.2,8L79.429,8L79.429,11.512L79.463,12.668L79.429,12.668L76.513,8L75.575,8L75.575,14L76.345,14L76.345,10.263Z" style="fill:white;fill-rule:nonzero;"/>
<path d="M47.376,10.791L44.468,10.791L44.468,11.512L46.647,11.512C46.588,12.098 46.353,12.559 45.96,12.894C45.566,13.229 45.063,13.397 44.468,13.397C43.814,13.397 43.261,13.171 42.809,12.718C42.365,12.257 42.138,11.688 42.138,11C42.138,10.313 42.365,9.743 42.809,9.282C43.261,8.83 43.814,8.604 44.468,8.604C44.803,8.604 45.122,8.662 45.415,8.788C45.708,8.914 45.943,9.09 46.127,9.316L46.68,8.763C46.429,8.478 46.11,8.26 45.717,8.101C45.323,7.942 44.912,7.866 44.468,7.866C43.596,7.866 42.859,8.168 42.256,8.771C41.652,9.375 41.351,10.12 41.351,11C41.351,11.88 41.652,12.626 42.256,13.229C42.859,13.833 43.596,14.134 44.468,14.134C45.381,14.134 46.11,13.841 46.672,13.246C47.166,12.752 47.418,12.081 47.418,11.243C47.418,11.101 47.401,10.95 47.376,10.791ZM48.524,8L48.524,14L52.027,14L52.027,13.263L49.295,13.263L49.295,11.361L51.758,11.361L51.758,10.64L49.295,10.64L49.295,8.738L52.027,8.738L52.027,8L48.524,8ZM56.953,8.738L56.953,8L52.831,8L52.831,8.738L54.507,8.738L54.507,14L55.277,14L55.277,8.738L56.953,8.738ZM60.708,8L59.937,8L59.937,14L60.708,14L60.708,8ZM65.803,8.738L65.803,8L61.68,8L61.68,8.738L63.356,8.738L63.356,14L64.127,14L64.127,8.738L65.803,8.738ZM73.605,8.78C73.01,8.168 72.281,7.866 71.409,7.866C70.537,7.866 69.808,8.168 69.213,8.771C68.618,9.366 68.325,10.112 68.325,11C68.325,11.889 68.618,12.634 69.213,13.229C69.808,13.833 70.537,14.134 71.409,14.134C72.272,14.134 73.01,13.833 73.605,13.229C74.2,12.634 74.493,11.889 74.493,11C74.493,10.12 74.2,9.375 73.605,8.78ZM69.767,9.282C70.211,8.83 70.755,8.604 71.409,8.604C72.063,8.604 72.607,8.83 73.043,9.282C73.487,9.727 73.705,10.305 73.705,11C73.705,11.696 73.487,12.274 73.043,12.718C72.607,13.171 72.063,13.397 71.409,13.397C70.755,13.397 70.211,13.171 69.767,12.718C69.331,12.266 69.113,11.696 69.113,11C69.113,10.305 69.331,9.735 69.767,9.282ZM76.346,10.263L76.312,9.106L76.346,9.106L79.396,14L80.2,14L80.2,8L79.429,8L79.429,11.512L79.463,12.668L79.429,12.668L76.513,8L75.575,8L75.575,14L76.346,14L76.346,10.263Z" style="fill:none;stroke:white;stroke-width:0.2px;"/>
<path d="M106.936,31.001L108.802,31.001L108.802,18.499L106.936,18.499L106.936,31.001ZM123.743,23.002L121.604,28.422L121.54,28.422L119.32,23.002L117.31,23.002L120.64,30.578L118.741,34.791L120.687,34.791L125.818,23.002L123.743,23.002ZM113.16,29.581C112.55,29.581 111.697,29.275 111.697,28.519C111.697,27.554 112.759,27.184 113.675,27.184C114.495,27.184 114.882,27.361 115.38,27.602C115.235,28.76 114.238,29.581 113.16,29.581ZM113.386,22.729C112.035,22.729 110.636,23.324 110.057,24.643L111.713,25.334C112.067,24.643 112.726,24.418 113.418,24.418C114.383,24.418 115.364,24.997 115.38,26.026L115.38,26.155C115.042,25.962 114.318,25.672 113.434,25.672C111.648,25.672 109.831,26.653 109.831,28.487C109.831,30.16 111.295,31.237 112.935,31.237C114.189,31.237 114.882,30.674 115.315,30.015L115.38,30.015L115.38,30.98L117.182,30.98L117.182,26.187C117.182,23.967 115.524,22.729 113.386,22.729ZM101.854,24.524L99.2,24.524L99.2,20.239L101.854,20.239C103.249,20.239 104.041,21.394 104.041,22.382C104.041,23.351 103.249,24.524 101.854,24.524ZM101.806,18.499L97.334,18.499L97.334,31.001L99.2,31.001L99.2,26.264L101.806,26.264C103.874,26.264 105.907,24.767 105.907,22.382C105.907,19.997 103.874,18.499 101.806,18.499ZM77.424,29.583C76.135,29.583 75.056,28.503 75.056,27.022C75.056,25.523 76.135,24.428 77.424,24.428C78.697,24.428 79.696,25.523 79.696,27.022C79.696,28.503 78.697,29.583 77.424,29.583ZM79.567,23.703L79.502,23.703C79.083,23.203 78.278,22.752 77.263,22.752C75.136,22.752 73.187,24.621 73.187,27.022C73.187,29.406 75.136,31.258 77.263,31.258C78.278,31.258 79.083,30.807 79.502,30.292L79.567,30.292L79.567,30.904C79.567,32.531 78.697,33.401 77.295,33.401C76.152,33.401 75.443,32.58 75.153,31.887L73.526,32.563C73.993,33.691 75.233,35.077 77.295,35.077C79.487,35.077 81.339,33.788 81.339,30.646L81.339,23.01L79.567,23.01L79.567,23.703ZM82.628,31.001L84.497,31.001L84.497,18.499L82.628,18.499L82.628,31.001ZM87.251,26.876C87.204,25.233 88.525,24.396 89.475,24.396C90.216,24.396 90.844,24.766 91.054,25.297L87.251,26.876ZM93.051,25.459C92.697,24.508 91.618,22.752 89.411,22.752C87.219,22.752 85.399,24.476 85.399,27.005C85.399,29.39 87.204,31.258 89.62,31.258C91.569,31.258 92.697,30.066 93.165,29.374L91.714,28.407C91.231,29.116 90.571,29.583 89.62,29.583C88.669,29.583 87.993,29.148 87.558,28.294L93.245,25.942L93.051,25.459ZM47.743,24.057L47.743,25.861L52.061,25.861C51.932,26.876 51.594,27.617 51.078,28.133C50.45,28.761 49.467,29.454 47.743,29.454C45.085,29.454 43.007,27.312 43.007,24.653C43.007,21.995 45.085,19.852 47.743,19.852C49.177,19.852 50.224,20.416 50.998,21.141L52.27,19.868C51.191,18.837 49.757,18.048 47.743,18.048C44.102,18.048 41.041,21.012 41.041,24.653C41.041,28.294 44.102,31.258 47.743,31.258C49.708,31.258 51.191,30.614 52.351,29.406C53.543,28.213 53.914,26.538 53.914,25.185C53.914,24.766 53.881,24.379 53.817,24.057L47.743,24.057ZM58.822,29.583C57.533,29.583 56.421,28.52 56.421,27.005C56.421,25.475 57.533,24.428 58.822,24.428C60.111,24.428 61.223,25.475 61.223,27.005C61.223,28.52 60.111,29.583 58.822,29.583ZM58.822,22.752C56.47,22.752 54.553,24.541 54.553,27.005C54.553,29.454 56.47,31.258 58.822,31.258C61.174,31.258 63.091,29.454 63.091,27.005C63.091,24.541 61.174,22.752 58.822,22.752ZM68.135,29.583C66.847,29.583 65.735,28.52 65.735,27.005C65.735,25.475 66.847,24.428 68.135,24.428C69.424,24.428 70.536,25.475 70.536,27.005C70.536,28.52 69.424,29.583 68.135,29.583ZM68.135,22.752C65.783,22.752 63.866,24.541 63.866,27.005C63.866,29.454 65.783,31.258 68.135,31.258C70.488,31.258 72.405,29.454 72.405,27.005C72.405,24.541 70.488,22.752 68.135,22.752Z" style="fill:white;fill-rule:nonzero;"/>
<path d="M20.717,20.425L10.07,31.725C10.071,31.727 10.071,31.729 10.072,31.731C10.398,32.959 11.519,33.862 12.849,33.862C13.381,33.862 13.88,33.718 14.308,33.466L14.342,33.446L26.326,26.531L20.717,20.425Z" style="fill:rgb(235,67,53);fill-rule:nonzero;"/>
<path d="M31.488,18.501L31.478,18.494L26.304,15.494L20.475,20.681L26.324,26.529L31.471,23.56C32.373,23.073 32.985,22.122 32.985,21.025C32.985,19.936 32.381,18.989 31.488,18.501Z" style="fill:rgb(250,188,19);fill-rule:nonzero;"/>
<path d="M10.07,10.278C10.006,10.514 9.972,10.761 9.972,11.018L9.972,30.985C9.972,31.242 10.005,31.49 10.07,31.725L21.083,20.714L10.07,10.278Z" style="fill:rgb(84,125,191);fill-rule:nonzero;"/>
<path d="M20.795,21.001L26.306,15.492L14.335,8.552C13.9,8.291 13.393,8.141 12.849,8.141C11.519,8.141 10.397,9.046 10.07,10.275L10.07,10.278L20.795,21.001Z" style="fill:rgb(48,168,81);fill-rule:nonzero;"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 9.9 KiB

183
src/vector/mobile_guide/index.css
View File

@@ -1,183 +0,0 @@
/*
Copyright 2025 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
html {
min-height: 100%;
position: relative;
}
body {
background: var(--cpd-color-bg-canvas-default);
max-width: 680px;
margin: var(--cpd-space-0x) auto;
padding-bottom: 178px; /* Match the height of mx_BottomGradient */
font-family: var(--cpd-font-family-sans);
font-size: var(--cpd-font-size-body-lg); /* Design says 16px, this is 17px */
color: var(--cpd-color-text-primary);
}
hr {
border: none;
height: var(--cpd-border-width-1);
background-color: var(
--cpd-color-bg-subtle-primary /* Design uses Border token from "Compound Marketing" set, but this matches. */
);
color: var(
--cpd-color-bg-subtle-primary /* Design uses Border token from "Compound Marketing" set, but this matches. */
);
margin: 0;
}
p {
margin: var(--cpd-space-1x) var(--cpd-space-0x);
padding: var(--cpd-space-0x);
}
.mx_Button {
border: 0;
border-radius: 100px;
min-width: 80px;
background-color: var(--cpd-color-bg-action-primary-rest);
color: var(--cpd-color-text-on-solid-primary);
cursor: pointer;
padding: 12px 22px;
word-break: break-word;
text-decoration: none;
}
#deep_link_button {
margin-top: 12px;
display: inline-block;
width: auto;
box-sizing: border-box;
}
.mx_StoreLinks {
margin: 15px 0 12px 0;
}
.mx_StoreBadge {
text-decoration: none !important;
margin: 16px 16px 16px 0px;
}
#f_droid_link {
color: var(--cpd-color-text-action-accent);
font-weight: bold;
text-decoration: none;
}
#f_droid_link:visited {
color: var(--cpd-color-text-action-accent);
}
.mx_HomePage_header {
color: var(--cpd-color-text-secondary);
align-items: center;
justify-content: center;
text-align: center;
padding-top: 48px;
padding-bottom: 48px;
}
.mx_HomePage_header #header_title {
margin-top: 8px;
margin-bottom: 0px;
}
.mx_HomePage h3 {
margin-top: 30px;
}
.mx_HomePage_col {
display: flex;
flex-direction: row;
}
.mx_HomePage_row {
flex: 1 1 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.mx_HomePage_container {
margin: 10px 20px;
}
.mx_HomePage_errorContainer {
display: none; /* shown in JS if needed */
margin: 20px;
border: var(--cpd-border-width-1) solid var(--cpd-color-border-critical-primary);
background-color: var(--cpd-color-bg-critical-subtle);
padding: 5px;
}
.mx_HomePage_container h1,
.mx_HomePage_container h2,
.mx_HomePage_container h3,
.mx_HomePage_container h4 {
font-weight: var(--cpd-font-weight-semibold);
font-size: var(--cpd-font-size-body-lg); /* Design says 16px, this is 17px */
margin-bottom: 8px;
margin-top: 4px;
}
.mx_Spacer {
margin-top: 48px;
}
.mx_DesktopLink {
color: var(--cpd-color-text-action-accent);
font-weight: var(--cpd-font-weight-semibold);
text-decoration: none;
}
/*
* The bottom gradient is a full-width background image that stretches horizontally across the page.
* It is positioned pinned to the bottom of the viewport unless the content is taller than the viewport,
* in which case it will be pinned to the bottom of the content.
*/
.mx_BottomGradient {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
height: 178px; /* Match the height of assets/bottom-gradient.svg so the gradient only stretches horizontally */
background-image: url("assets/bottom-gradient.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: -1;
margin-left: calc(50% - 50vw); /* Center the gradient regardless of body width */
}
.mx_HomePage_step_number {
display: flex;
align-items: flex-start;
margin-right: 8px;
}
.mx_HomePage_step_number span {
display: flex;
align-items: center;
justify-content: center;
width: var(--cpd-space-6x);
height: var(--cpd-space-6x);
border-radius: 50%;
border: var(--cpd-border-width-1) solid var(--cpd-color-bg-subtle-primary); /* Not a border token, but matches the Design (Border token from the "Compound Marketing" set). */
background-color: transparent;
color: var(--cpd-color-text-secondary);
font-size: var(--cpd-font-size-body-md); /* Design says 14px, this is 15px */
}
#step2_description {
color: var(--cpd-color-text-secondary);
}

852
src/vector/mobile_guide/index.html
View File

File diff suppressed because one or more lines are too long

35
src/vector/mobile_guide/index.ts
View File

@@ -5,14 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import "./index.css";
import "@fontsource/inter/400.css";
import "@fontsource/inter/600.css";
import { logger } from "matrix-js-sdk/src/logger";
import { getVectorConfig } from "../getconfig";
import { type MobileAppVariant, mobileApps, updateMobilePage } from "./mobile-apps.ts";
function onBackToElementClick(): void {
// Cookie should expire in 4 hours
@@ -43,19 +38,18 @@ function renderConfigError(message: string): void {
}
async function initPage(): Promise<void> {
document.getElementById("back_to_element_button")!.onclick = onBackToElementClick;
const config = await getVectorConfig("..");
// We manually parse the config similar to how validateServerConfig works because
// calling that function pulls in roughly 4mb of JS we don't use.
const wkConfig = config?.["default_server_config"]; // overwritten later under some conditions
let serverName = config?.["default_server_name"];
const serverName = config?.["default_server_name"];
const defaultHsUrl = config?.["default_hs_url"];
const defaultIsUrl = config?.["default_is_url"];
const appVariant = (config?.["mobile_guide_app_variant"] ?? "classic") as MobileAppVariant;
const metadata = mobileApps[appVariant];
const incompatibleOptions = [wkConfig, serverName, defaultHsUrl].filter((i) => !!i);
if (defaultHsUrl && (wkConfig || serverName)) {
return renderConfigError(
@@ -72,7 +66,6 @@ async function initPage(): Promise<void> {
if (!serverName && typeof wkConfig?.["m.homeserver"]?.["base_url"] === "string") {
hsUrl = wkConfig["m.homeserver"]["base_url"];
serverName = wkConfig["m.homeserver"]["server_name"];
if (typeof wkConfig["m.identity_server"]?.["base_url"] === "string") {
isUrl = wkConfig["m.identity_server"]["base_url"];
@@ -117,21 +110,21 @@ async function initPage(): Promise<void> {
if (hsUrl && !hsUrl.endsWith("/")) hsUrl += "/";
if (isUrl && !isUrl.endsWith("/")) isUrl += "/";
let deepLinkUrl = `https://mobile.element.io${metadata.deepLinkPath}`;
if (hsUrl !== "https://matrix.org/") {
let url = "https://mobile.element.io?hs_url=" + encodeURIComponent(hsUrl);
if (metadata.usesLegacyDeepLink) {
deepLinkUrl += `?hs_url=${encodeURIComponent(hsUrl)}`;
if (isUrl) {
deepLinkUrl += `&is_url=${encodeURIComponent(isUrl)}`;
document.getElementById("custom_is")!.style.display = "block";
document.getElementById("is_url")!.style.display = "block";
document.getElementById("is_url")!.innerText = isUrl;
url += "&is_url=" + encodeURIComponent(isUrl ?? "");
}
} else if (serverName) {
deepLinkUrl += `?account_provider=${serverName}`;
(document.getElementById("configure_element_button") as HTMLAnchorElement).href = url;
document.getElementById("step1_heading")!.innerHTML = "1: Install the app";
document.getElementById("step2_container")!.style.display = "block";
document.getElementById("hs_url")!.innerText = hsUrl;
}
// Not part of updateMobilePage as the link is only shown on mobile_guide and not on mobile.element.io
document.getElementById("back_to_element_button")!.onclick = onBackToElementClick;
updateMobilePage(metadata, deepLinkUrl, serverName ?? hsUrl);
}
void initPage();

88
src/vector/mobile_guide/mobile-apps.ts
View File

@@ -1,88 +0,0 @@
/*
Copyright 2025 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
/*
* Shared code that is used by the mobile guide and the mobile.element.io site.
*/
export enum MobileAppVariant {
Classic = "classic",
X = "x",
Pro = "pro",
}
export interface MobileAppMetadata {
name: string;
appleAppId: string;
appStoreUrl: string;
playStoreUrl: string;
fDroidUrl?: string;
deepLinkPath: string;
usesLegacyDeepLink: boolean;
isProApp: boolean;
}
export const mobileApps: Record<MobileAppVariant, MobileAppMetadata> = {
[MobileAppVariant.Classic]: {
name: "Element",
appleAppId: "id1083446067",
appStoreUrl: "https://apps.apple.com/app/element-messenger/id1083446067",
playStoreUrl: "https://play.google.com/store/apps/details?id=im.vector.app",
fDroidUrl: "https://f-droid.org/packages/im.vector.app",
deepLinkPath: "",
usesLegacyDeepLink: true,
isProApp: false,
},
[MobileAppVariant.X]: {
name: "Element X",
appleAppId: "id1631335820",
appStoreUrl: "https://apps.apple.com/app/element-x-secure-chat-call/id1631335820",
playStoreUrl: "https://play.google.com/store/apps/details?id=io.element.android.x",
fDroidUrl: "https://f-droid.org/packages/io.element.android.x",
deepLinkPath: "/element",
usesLegacyDeepLink: false,
isProApp: false,
},
[MobileAppVariant.Pro]: {
name: "Element Pro",
appleAppId: "id6502951615",
appStoreUrl: "https://apps.apple.com/app/element-pro-for-work/id6502951615",
playStoreUrl: "https://play.google.com/store/apps/details?id=io.element.enterprise",
deepLinkPath: "/element-pro",
usesLegacyDeepLink: false,
isProApp: true,
},
};
export function updateMobilePage(metadata: MobileAppMetadata, deepLinkUrl: string, server: string | undefined): void {
const appleMeta = document.querySelector('meta[name="apple-itunes-app"]') as Element;
appleMeta.setAttribute("content", `app-id=${metadata.appleAppId}`);
if (server) {
(document.getElementById("header_title") as HTMLHeadingElement).innerText = `Join ${server} on Element`;
}
(document.getElementById("app_store_link") as HTMLAnchorElement).href = metadata.appStoreUrl;
(document.getElementById("play_store_link") as HTMLAnchorElement).href = metadata.playStoreUrl;
if (metadata.fDroidUrl) {
(document.getElementById("f_droid_link") as HTMLAnchorElement).href = metadata.fDroidUrl;
} else {
document.getElementById("f_droid_section")!.style.display = "none";
}
const step1Heading = document.getElementById("step1_heading")!;
step1Heading.innerHTML = step1Heading!.innerHTML.replace("Element", metadata.name);
// Step 2 is only shown on the mobile guide, not on mobile.element.io
if (document.getElementById("step2_container")) {
document.getElementById("step2_container")!.style.display = "block";
if (metadata.isProApp) {
document.getElementById("step2_description")!.innerHTML = "Use your work email to join";
}
(document.getElementById("deep_link_button") as HTMLAnchorElement).href = deepLinkUrl;
}
}

6
webpack.config.js
View File

@@ -679,12 +679,6 @@ module.exports = (env, argv) => {
context: path.resolve(__dirname, "node_modules/@element-hq/element-call-embedded/dist"),
to: path.join(__dirname, "webapp", "widgets", "element-call"),
},
// Mobile guide assets
{
from: "assets/**",
context: path.resolve(__dirname, "src/vector/mobile_guide"),
to: "mobile_guide",
},
],
}),