Merge branches 'develop' and 't3chguy/qrcode' of github.com:matrix-org/matrix-react-sdk into t3chguy/qrcode

 Conflicts:

	package.json

CHANGELOG.md

@@ -1,3 +1,348 @@
+Changes in [2.5.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0) (2020-05-05)
+===================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0-rc.6...v2.5.0)
+
+ * Upgrade to JS SDK 6.0.0
+ * EventIndex: Reduce the logging the event index is producing.
+   [\#4551](https://github.com/matrix-org/matrix-react-sdk/pull/4551)
+ *  Differentiate copy for own untrusted device dialog
+   [\#4550](https://github.com/matrix-org/matrix-react-sdk/pull/4550)
+ * More detailed progress for key backup progress
+   [\#4545](https://github.com/matrix-org/matrix-react-sdk/pull/4545)
+ *  Increase rageshake size limit to 5mb
+   [\#4544](https://github.com/matrix-org/matrix-react-sdk/pull/4544)
+
+Changes in [2.5.0-rc.6](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0-rc.6) (2020-05-01)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0-rc.5...v2.5.0-rc.6)
+
+ * Upgrade to JS SDK 6.0.0-rc.2
+ * Wait for user to be verified in e2e setup
+   [\#4538](https://github.com/matrix-org/matrix-react-sdk/pull/4538)
+ * Add device name to unverified session toast
+   [\#4536](https://github.com/matrix-org/matrix-react-sdk/pull/4536)
+
+Changes in [2.5.0-rc.5](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0-rc.5) (2020-04-30)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0-rc.4...v2.5.0-rc.5)
+
+ * Upgrade to JS SDK 6.0.0-rc.1
+ * Fix device verification toasts not disappearing
+   [\#4533](https://github.com/matrix-org/matrix-react-sdk/pull/4533)
+ * Allow resetting storage from the access dialog
+   [\#4526](https://github.com/matrix-org/matrix-react-sdk/pull/4526)
+ * Update toast copy again
+   [\#4530](https://github.com/matrix-org/matrix-react-sdk/pull/4530)
+ * Reduce maximum width of toasts & allow multiple lines
+   [\#4528](https://github.com/matrix-org/matrix-react-sdk/pull/4528)
+ * Treat sessions that are there when we log in as old
+   [\#4527](https://github.com/matrix-org/matrix-react-sdk/pull/4527)
+ * Update (bulk) unverified device toast copy
+   [\#4523](https://github.com/matrix-org/matrix-react-sdk/pull/4523)
+ * Make new device toasts appear above review toasts
+   [\#4520](https://github.com/matrix-org/matrix-react-sdk/pull/4520)
+ * Separate toasts for existing & new device verification
+   [\#4517](https://github.com/matrix-org/matrix-react-sdk/pull/4517)
+ * Aggregate device verify toasts
+   [\#4516](https://github.com/matrix-org/matrix-react-sdk/pull/4516)
+ * Fix set up encryption toast to use "set up" as action
+   [\#4515](https://github.com/matrix-org/matrix-react-sdk/pull/4515)
+ * Fix internal link styling in Security Settings
+   [\#4512](https://github.com/matrix-org/matrix-react-sdk/pull/4512)
+ *  Don't enable e2ee when inviting a 3pid
+   [\#4513](https://github.com/matrix-org/matrix-react-sdk/pull/4513)
+ * only clear on continuations where the clear isn't done by SenderProfile
+   [\#4505](https://github.com/matrix-org/matrix-react-sdk/pull/4505)
+ * cap width of editable item list item to leave space for its X button
+   [\#4504](https://github.com/matrix-org/matrix-react-sdk/pull/4504)
+ * Add a link from settings / devices to your user profile
+   [\#4499](https://github.com/matrix-org/matrix-react-sdk/pull/4499)
+ * Make icon change in SetupEncryptionDialog
+   [\#4490](https://github.com/matrix-org/matrix-react-sdk/pull/4490)
+ * Remove invite only padlocks feature flag for release
+   [\#4488](https://github.com/matrix-org/matrix-react-sdk/pull/4488)
+ * Fix incorrect toast if security setup skipped
+   [\#4489](https://github.com/matrix-org/matrix-react-sdk/pull/4489)
+ * Revert "Update emojibase for fixed emoji codepoints and Emoji 13 support"
+   [\#4483](https://github.com/matrix-org/matrix-react-sdk/pull/4483)
+ * Fix recovery link on login verification flow
+   [\#4480](https://github.com/matrix-org/matrix-react-sdk/pull/4480)
+
+Changes in [2.5.0-rc.4](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0-rc.4) (2020-04-23)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0-rc.3...v2.5.0-rc.4)
+
+ * Upgrade to JS SDK 5.3.1-rc.4
+ * Take encrypted message search out of labs for release
+   [\#4468](https://github.com/matrix-org/matrix-react-sdk/pull/4468)
+ * Update login security copy and design to match Figma [to release]
+   [\#4474](https://github.com/matrix-org/matrix-react-sdk/pull/4474)
+ * Fix i18n of SSO UIA copy in Deactivate Account Dialog on release
+   [\#4473](https://github.com/matrix-org/matrix-react-sdk/pull/4473)
+ * Skip auth flow test for signing upload when password present
+   [\#4465](https://github.com/matrix-org/matrix-react-sdk/pull/4465)
+ * Fix: wait until cross-signing keys are fetched to show verify button
+   [\#4457](https://github.com/matrix-org/matrix-react-sdk/pull/4457)
+ * Handle load error in create secret storage dialog
+   [\#4454](https://github.com/matrix-org/matrix-react-sdk/pull/4454)
+ * Don't recheck DeviceListener until after initial sync is finished
+   [\#4450](https://github.com/matrix-org/matrix-react-sdk/pull/4450)
+ * EventIndex: Filter out events that don't have a propper content value.
+   [\#4447](https://github.com/matrix-org/matrix-react-sdk/pull/4447)
+
+Changes in [2.5.0-rc.3](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0-rc.3) (2020-04-17)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0-rc.2...v2.5.0-rc.3)
+
+ * Upgrade to JS SDK 5.3.1-rc.3
+
+Changes in [2.5.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0-rc.2) (2020-04-16)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.5.0-rc.1...v2.5.0-rc.2)
+
+ * Upgrade to JS SDK 5.3.1-rc.2
+ * [Release] Convert cross-signing flag to a setting
+   [\#4429](https://github.com/matrix-org/matrix-react-sdk/pull/4429)
+ * Iterate cross-signing copy
+   [\#4426](https://github.com/matrix-org/matrix-react-sdk/pull/4426)
+ * Fix: ensure twemoji font is loaded when showing SAS emojis
+   [\#4423](https://github.com/matrix-org/matrix-react-sdk/pull/4423)
+
+Changes in [2.5.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.5.0-rc.1) (2020-04-15)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.4.0-rc.1...v2.5.0-rc.1)
+
+ * Upgrade to JS SDK 5.3.1-rc.1
+ * null-guard MatrixClientPeg in RoomViewStore
+   [\#4415](https://github.com/matrix-org/matrix-react-sdk/pull/4415)
+ * Fix: prevent spurious notifications from indexer
+   [\#4414](https://github.com/matrix-org/matrix-react-sdk/pull/4414)
+ * Login block on initialSync with spinners
+   [\#4413](https://github.com/matrix-org/matrix-react-sdk/pull/4413)
+ * Allow network dropdown to be scrollable and fix context menu padding calc
+   [\#4408](https://github.com/matrix-org/matrix-react-sdk/pull/4408)
+ * Remove end-to-end message info option when cross-signing is used
+   [\#4412](https://github.com/matrix-org/matrix-react-sdk/pull/4412)
+ * Minimize widgets by default
+   [\#4378](https://github.com/matrix-org/matrix-react-sdk/pull/4378)
+ * Add comments to highlight where we'll need m.widget support
+   [\#4380](https://github.com/matrix-org/matrix-react-sdk/pull/4380)
+ * Fix: dont try to enable 4S if cross-signing is disabled
+   [\#4407](https://github.com/matrix-org/matrix-react-sdk/pull/4407)
+ * Fix: don't confuse user with spinner during complete security step
+   [\#4406](https://github.com/matrix-org/matrix-react-sdk/pull/4406)
+ *  Fix: avoid potential crash during certain verification paths
+   [\#4405](https://github.com/matrix-org/matrix-react-sdk/pull/4405)
+ * Add riot-desktop shortcuts for forward/back matching browsers&slack
+   [\#4392](https://github.com/matrix-org/matrix-react-sdk/pull/4392)
+ * Convert LoggedInView to an ES6 PureComponent Class & TypeScript
+   [\#4398](https://github.com/matrix-org/matrix-react-sdk/pull/4398)
+ * Fix width of MVideoBody in FilePanel
+   [\#4396](https://github.com/matrix-org/matrix-react-sdk/pull/4396)
+ * Remove unused react-addons-css-transition-group
+   [\#4397](https://github.com/matrix-org/matrix-react-sdk/pull/4397)
+ * Fix emoji tooltip flickering
+   [\#4395](https://github.com/matrix-org/matrix-react-sdk/pull/4395)
+ * Pass along key backup for bootstrap
+   [\#4374](https://github.com/matrix-org/matrix-react-sdk/pull/4374)
+ * Fix create room dialog e2ee private room setting
+   [\#4403](https://github.com/matrix-org/matrix-react-sdk/pull/4403)
+ * Sort emoji by shortcodes for autocomplete primarily for :-1 and :+1
+   [\#4391](https://github.com/matrix-org/matrix-react-sdk/pull/4391)
+ * Fix invalid commands when figuring out whether to set isTyping
+   [\#4390](https://github.com/matrix-org/matrix-react-sdk/pull/4390)
+ * op/deop return error if trying to affect an unknown user
+   [\#4389](https://github.com/matrix-org/matrix-react-sdk/pull/4389)
+ * Composer pills respect showPillAvatar setting
+   [\#4384](https://github.com/matrix-org/matrix-react-sdk/pull/4384)
+ * Only send typing notification when composing commands which send messages
+   [\#4385](https://github.com/matrix-org/matrix-react-sdk/pull/4385)
+ * Reverse order of they match/they don't match buttons
+   [\#4386](https://github.com/matrix-org/matrix-react-sdk/pull/4386)
+ * Use singular text on 'delete sessions' button for SSO
+   [\#4383](https://github.com/matrix-org/matrix-react-sdk/pull/4383)
+ * Pass widget data through from sticker picker
+   [\#4377](https://github.com/matrix-org/matrix-react-sdk/pull/4377)
+ * Obliterate widgets when they are minimized
+   [\#4376](https://github.com/matrix-org/matrix-react-sdk/pull/4376)
+ * Fix image thumbnail width when read receipts are hidden
+   [\#4370](https://github.com/matrix-org/matrix-react-sdk/pull/4370)
+ * Add toggle for e2ee when creating private room
+   [\#4362](https://github.com/matrix-org/matrix-react-sdk/pull/4362)
+ * Fix logging for failed searches
+   [\#4372](https://github.com/matrix-org/matrix-react-sdk/pull/4372)
+ * Ensure UI is updated when cross-signing gets disabled
+   [\#4369](https://github.com/matrix-org/matrix-react-sdk/pull/4369)
+ * Retry the request for the master key from SSSS on login
+   [\#4371](https://github.com/matrix-org/matrix-react-sdk/pull/4371)
+ * Upgrade deps
+   [\#4365](https://github.com/matrix-org/matrix-react-sdk/pull/4365)
+ * App load tweaks, i18n and localStorage
+   [\#4367](https://github.com/matrix-org/matrix-react-sdk/pull/4367)
+ * Fix encoding of widget arguments
+   [\#4366](https://github.com/matrix-org/matrix-react-sdk/pull/4366)
+
+Changes in [2.4.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.4.0-rc.1) (2020-04-08)
+=============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.3.1...v2.4.0-rc.1)
+
+ * Upgrade to JS SDK to 5.3.0-rc.1
+ * EventIndex: Log if we had all events in a checkpoint but are continuing.
+   [\#4363](https://github.com/matrix-org/matrix-react-sdk/pull/4363)
+ * Update from Weblate
+   [\#4364](https://github.com/matrix-org/matrix-react-sdk/pull/4364)
+ * Support deactivating your account with SSO
+   [\#4356](https://github.com/matrix-org/matrix-react-sdk/pull/4356)
+ * Add debug status for cached backup key format
+   [\#4359](https://github.com/matrix-org/matrix-react-sdk/pull/4359)
+ * Fix composer placeholder not updating
+   [\#4361](https://github.com/matrix-org/matrix-react-sdk/pull/4361)
+ * Fix sas verification buttons to match figma
+   [\#4358](https://github.com/matrix-org/matrix-react-sdk/pull/4358)
+ * Don't show fallback text for verification requests
+   [\#4345](https://github.com/matrix-org/matrix-react-sdk/pull/4345)
+ * Fix share dialog correctly
+   [\#4360](https://github.com/matrix-org/matrix-react-sdk/pull/4360)
+ * Use singular copy when only deleting one device
+   [\#4357](https://github.com/matrix-org/matrix-react-sdk/pull/4357)
+ * Deem m.sticker events as actionable for reacting
+   [\#4288](https://github.com/matrix-org/matrix-react-sdk/pull/4288)
+ * Don't show spinner over encryption setup dialogs
+   [\#4354](https://github.com/matrix-org/matrix-react-sdk/pull/4354)
+ * Support Jitsi information from client .well-known
+   [\#4348](https://github.com/matrix-org/matrix-react-sdk/pull/4348)
+ * Add new default home page fallback
+   [\#4350](https://github.com/matrix-org/matrix-react-sdk/pull/4350)
+ * Check more account data in toast listener
+   [\#4351](https://github.com/matrix-org/matrix-react-sdk/pull/4351)
+ * Don't try to send presence updates until the client is started
+   [\#4353](https://github.com/matrix-org/matrix-react-sdk/pull/4353)
+ * Fix copy button on code blocks when there is no code tag just pre
+   [\#4352](https://github.com/matrix-org/matrix-react-sdk/pull/4352)
+ * Clear sessionStorage on sign out
+   [\#4346](https://github.com/matrix-org/matrix-react-sdk/pull/4346)
+ * Re-request room keys after auth
+   [\#4341](https://github.com/matrix-org/matrix-react-sdk/pull/4341)
+ * Update emojibase for fixed emoji codepoints and Emoji 13 support
+   [\#4344](https://github.com/matrix-org/matrix-react-sdk/pull/4344)
+ * App load order tweaks for code splitting
+   [\#4343](https://github.com/matrix-org/matrix-react-sdk/pull/4343)
+ * Fix alignment of e2e icon in userinfo and expose full displayname in title
+   [\#4312](https://github.com/matrix-org/matrix-react-sdk/pull/4312)
+ * Adjust copy & UX for self-verification
+   [\#4342](https://github.com/matrix-org/matrix-react-sdk/pull/4342)
+ * QR code reciprocation
+   [\#4334](https://github.com/matrix-org/matrix-react-sdk/pull/4334)
+ * Fix Hangul typing does not work properly
+   [\#4339](https://github.com/matrix-org/matrix-react-sdk/pull/4339)
+ * Fix: dismiss setup encryption toast if cross-signing is ready
+   [\#4336](https://github.com/matrix-org/matrix-react-sdk/pull/4336)
+ * Fix read marker visibility for grouped events
+   [\#4340](https://github.com/matrix-org/matrix-react-sdk/pull/4340)
+ * Make all 'font-size's and 'line-height's rem
+   [\#4305](https://github.com/matrix-org/matrix-react-sdk/pull/4305)
+ * Fix spurious extra devices on registration
+   [\#4337](https://github.com/matrix-org/matrix-react-sdk/pull/4337)
+ * Fix the edit messager composer
+   [\#4333](https://github.com/matrix-org/matrix-react-sdk/pull/4333)
+ * Fix Room Settings Dialog Notifications tab icon
+   [\#4321](https://github.com/matrix-org/matrix-react-sdk/pull/4321)
+ * Fix various cases of React warnings by silencing them
+   [\#4331](https://github.com/matrix-org/matrix-react-sdk/pull/4331)
+ * Only apply padding to standard textual buttons (kind buttons)
+   [\#4332](https://github.com/matrix-org/matrix-react-sdk/pull/4332)
+ * Use console.log in place of console.warn for less warnings
+   [\#4330](https://github.com/matrix-org/matrix-react-sdk/pull/4330)
+ * Revert componentDidMount changes on breadcrumbs
+   [\#4329](https://github.com/matrix-org/matrix-react-sdk/pull/4329)
+ * Use new method for checking secret storage key
+   [\#4309](https://github.com/matrix-org/matrix-react-sdk/pull/4309)
+ * Label and use UNSAFE_componentWillMount to minimize warnings
+   [\#4315](https://github.com/matrix-org/matrix-react-sdk/pull/4315)
+ * Fix a number of minor code quality issues
+   [\#4314](https://github.com/matrix-org/matrix-react-sdk/pull/4314)
+ * Use componentDidMount in place of componentWillMount where possible
+   [\#4313](https://github.com/matrix-org/matrix-react-sdk/pull/4313)
+ * EventIndex: Mark the initial checkpoints for a full crawl.
+   [\#4325](https://github.com/matrix-org/matrix-react-sdk/pull/4325)
+ * Fix UserInfo e2e buttons to match Figma
+   [\#4320](https://github.com/matrix-org/matrix-react-sdk/pull/4320)
+ * Only auto-scroll to RoomTile when clicking on RoomTile or via shortcuts
+   [\#4316](https://github.com/matrix-org/matrix-react-sdk/pull/4316)
+ * Support SSO for interactive authentication
+   [\#4292](https://github.com/matrix-org/matrix-react-sdk/pull/4292)
+ * Fix /invite Slash Command
+   [\#4328](https://github.com/matrix-org/matrix-react-sdk/pull/4328)
+ * Fix jitsi popout URL
+   [\#4326](https://github.com/matrix-org/matrix-react-sdk/pull/4326)
+ * Use our own jitsi widget for the popout URL
+   [\#4323](https://github.com/matrix-org/matrix-react-sdk/pull/4323)
+ * Fix popout support for jitsi widgets
+   [\#4319](https://github.com/matrix-org/matrix-react-sdk/pull/4319)
+ * Fix: legacy verify user throwing error
+   [\#4318](https://github.com/matrix-org/matrix-react-sdk/pull/4318)
+ * Document settingDefaults
+   [\#3046](https://github.com/matrix-org/matrix-react-sdk/pull/3046)
+ * Fix Ctrl+/ for Finnish keyboard where it includes Shift
+   [\#4317](https://github.com/matrix-org/matrix-react-sdk/pull/4317)
+ * Rework SlashCommands to better expose aliases
+   [\#4302](https://github.com/matrix-org/matrix-react-sdk/pull/4302)
+ * Fix EventListSummary when RR rendering is disabled
+   [\#4311](https://github.com/matrix-org/matrix-react-sdk/pull/4311)
+ * Update link to css location.
+   [\#4299](https://github.com/matrix-org/matrix-react-sdk/pull/4299)
+ * Fix peeking keeping two timeline update mechanisms in play
+   [\#4310](https://github.com/matrix-org/matrix-react-sdk/pull/4310)
+ * Pass new secret storage key to bootstrap path
+   [\#4308](https://github.com/matrix-org/matrix-react-sdk/pull/4308)
+ * Show red shield for users that become unverified
+   [\#4303](https://github.com/matrix-org/matrix-react-sdk/pull/4303)
+ * Accessibility fixed for Event List Summary and Composer Format Bar
+   [\#4295](https://github.com/matrix-org/matrix-react-sdk/pull/4295)
+ * Support $riot: Templates for SSO/CAS urls in the welcome.html page
+   [\#4279](https://github.com/matrix-org/matrix-react-sdk/pull/4279)
+ * Added the /html command
+   [\#4296](https://github.com/matrix-org/matrix-react-sdk/pull/4296)
+ * EventIndex: Better logging on how many events are added.
+   [\#4301](https://github.com/matrix-org/matrix-react-sdk/pull/4301)
+ * Field: mark id as optional in propTypes
+   [\#4307](https://github.com/matrix-org/matrix-react-sdk/pull/4307)
+ * Fix view community link icon contrast
+   [\#4254](https://github.com/matrix-org/matrix-react-sdk/pull/4254)
+ * Remove underscore from Jitsi conference names
+   [\#4304](https://github.com/matrix-org/matrix-react-sdk/pull/4304)
+ * Refactor shield display logic; changed rules for DMs
+   [\#4290](https://github.com/matrix-org/matrix-react-sdk/pull/4290)
+ * Fix: bring back global thin scrollbars
+   [\#4300](https://github.com/matrix-org/matrix-react-sdk/pull/4300)
+ * Keyboard shortcuts: Escape cancel reply and fix Ctrl+K
+   [\#4297](https://github.com/matrix-org/matrix-react-sdk/pull/4297)
+ * Field: make id optional, generate one if not provided
+   [\#4298](https://github.com/matrix-org/matrix-react-sdk/pull/4298)
+ * Fix ugly scrollbars in TabbedView (settings), emojipicker and widgets
+   [\#4293](https://github.com/matrix-org/matrix-react-sdk/pull/4293)
+ * Rename secret storage force-reset variable to avoid confusion
+   [\#4274](https://github.com/matrix-org/matrix-react-sdk/pull/4274)
+ * Fix: can't dismiss unverified session toast when encryption hasn't been
+   upgraded
+   [\#4291](https://github.com/matrix-org/matrix-react-sdk/pull/4291)
+ * Blank out UserInfo avatar when changing between members
+   [\#4289](https://github.com/matrix-org/matrix-react-sdk/pull/4289)
+ * Add cancel button to verification panel
+   [\#4283](https://github.com/matrix-org/matrix-react-sdk/pull/4283)
+ * Show ongoing verification request straight away when navigating to member
+   [\#4284](https://github.com/matrix-org/matrix-react-sdk/pull/4284)
+ * Fix: allow scrolling while window is not focused & remove scrollbar hack
+   [\#4276](https://github.com/matrix-org/matrix-react-sdk/pull/4276)
+ * Show whether backup key is cached
+   [\#4287](https://github.com/matrix-org/matrix-react-sdk/pull/4287)
+ * Rename unverified session toast
+   [\#4285](https://github.com/matrix-org/matrix-react-sdk/pull/4285)
+ * Fix: pick last active DM for verification request
+   [\#4286](https://github.com/matrix-org/matrix-react-sdk/pull/4286)
+ * Fix formatBar not hidden after highlight and backspacing some text
+   [\#4269](https://github.com/matrix-org/matrix-react-sdk/pull/4269)
+
 Changes in [2.3.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v2.3.1) (2020-04-01)
 ===================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v2.3.0...v2.3.1)

README.md

@@ -133,8 +133,10 @@ Development
 
 Ensure you have the latest LTS version of Node.js installed.
 
-Using `yarn` instead of `npm` is recommended. Please see the Yarn [install
-guide](https://yarnpkg.com/docs/install/) if you do not have it already.
+Using `yarn` instead of `npm` is recommended. Please see the Yarn 1 [install
+guide](https://classic.yarnpkg.com/docs/install) if you do not have it
+already. This project has not yet been migrated to Yarn 2, so please ensure
+`yarn --version` shows a version from the 1.x series.
 
 `matrix-react-sdk` depends on `matrix-js-sdk`. To make use of changes in the
 latter and to ensure tests run against the develop branch of `matrix-js-sdk`,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "2.3.1",
+  "version": "2.5.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -64,8 +64,8 @@
     "create-react-class": "^15.6.0",
     "diff-dom": "^4.1.3",
     "diff-match-patch": "^1.0.4",
-    "emojibase-data": "^5.0.1",
-    "emojibase-regex": "^4.0.1",
+    "emojibase-data": "^4.0.2",
+    "emojibase-regex": "^3.0.0",
     "escape-html": "^1.0.3",
     "file-saver": "^1.3.3",
     "filesize": "3.5.6",
@@ -82,13 +82,13 @@
     "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
     "minimist": "^1.2.0",
     "pako": "^1.0.5",
+    "parse5": "^5.1.1",
     "png-chunks-extract": "^1.0.0",
     "project-name-generator": "^2.1.7",
     "prop-types": "^15.5.8",
     "qrcode": "^1.4.4",
     "qs": "^6.6.0",
     "react": "^16.9.0",
-    "react-addons-css-transition-group": "15.6.2",
     "react-beautiful-dnd": "^4.0.1",
     "react-dom": "^16.9.0",
     "react-focus-lock": "^2.2.1",
@@ -117,6 +117,7 @@
     "@babel/register": "^7.7.4",
     "@peculiar/webcrypto": "^1.0.22",
     "@types/classnames": "^2.2.10",
+    "@types/modernizr": "^3.5.3",
     "@types/qrcode": "^1.3.4",
     "@types/react": "16.9",
     "babel-eslint": "^10.0.3",

res/css/_components.scss

@@ -133,12 +133,14 @@
 @import "./views/messages/_MNoticeBody.scss";
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";
+@import "./views/messages/_MVideoBody.scss";
 @import "./views/messages/_MessageActionBar.scss";
 @import "./views/messages/_MessageTimestamp.scss";
 @import "./views/messages/_MjolnirBody.scss";
 @import "./views/messages/_ReactionsRow.scss";
 @import "./views/messages/_ReactionsRowButton.scss";
 @import "./views/messages/_ReactionsRowButtonTooltip.scss";
+@import "./views/messages/_RedactedBody.scss";
 @import "./views/messages/_RoomAvatarEvent.scss";
 @import "./views/messages/_SenderProfile.scss";
 @import "./views/messages/_TextualEvent.scss";

res/css/_font-sizes.scss

@@ -14,6 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+$font-1px: 0.067rem;
+$font-2px: 0.133rem;
+$font-3px: 0.200rem;
+$font-4px: 0.267rem;
+$font-5px: 0.333rem;
+$font-6px: 0.400rem;
+$font-7px: 0.467rem;
 $font-8px: 0.533rem;
 $font-9px: 0.600rem;
 $font-10px: 0.667rem;
@@ -27,7 +34,7 @@ $font-16px: 1.067rem;
 $font-17px: 1.133rem;
 $font-18px: 1.200rem;
 $font-19px: 1.267rem;
-$font-20px: 1.333rem;
+$font-20px: 1.3333333rem;
 $font-21px: 1.400rem;
 $font-22px: 1.467rem;
 $font-23px: 1.533rem;
@@ -60,4 +67,5 @@ $font-49px: 3.267rem;
 $font-50px: 3.333rem;
 $font-51px: 3.400rem;
 $font-52px: 3.467rem;
+$font-88px: 5.887rem;
 $font-400px: 26.667rem;

res/css/structures/_RoomSubList.scss

@@ -74,7 +74,7 @@ limitations under the License.
 
 .mx_RoomSubList_badge > div {
     flex: 0 0 auto;
-    border-radius: 8px;
+    border-radius: $font-16px;
     font-weight: 600;
     font-size: $font-12px;
     padding: 0 5px;

res/css/structures/_TagPanel.scss

@@ -69,7 +69,7 @@ limitations under the License.
     height: 100%;
 }
 .mx_TagPanel .mx_TagPanel_tagTileContainer > div {
-    height: 40px;
+    height: $font-40px;
     padding: 10px 0 9px 0;
 }
 
@@ -110,13 +110,13 @@ limitations under the License.
 
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
     content: '';
-    height: 56px;
+    height: calc(100% + 16px);
     background-color: $accent-color;
     width: 5px;
     position: absolute;
     left: -15px;
     border-radius: 0 3px 3px 0;
-    top: -8px; // (56 - 40)/2
+    top: -8px; // (16px / 2)
 }
 
 .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {

res/css/structures/_ToastContainer.scss

@@ -91,9 +91,8 @@ limitations under the License.
         }
 
         .mx_Toast_description {
-            max-width: 400px;
+            max-width: 272px;
             overflow: hidden;
-            white-space: nowrap;
             text-overflow: ellipsis;
             margin: 4px 0 11px 0;
             font-size: $font-12px;

res/css/structures/auth/_CompleteSecurity.scss

@@ -26,6 +26,50 @@ limitations under the License.
     position: relative;
 }
 
+.mx_CompleteSecurity_clients {
+    width: max-content;
+    margin: 36px auto 0;
+
+    .mx_CompleteSecurity_clients_desktop, .mx_CompleteSecurity_clients_mobile {
+        position: relative;
+        width: 160px;
+        text-align: center;
+        padding-top: 64px;
+        display: inline-block;
+
+        &::before {
+            content: '';
+            position: absolute;
+            height: 48px;
+            width: 48px;
+            left: 56px;
+            top: 0;
+            background-color: $muted-fg-color;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+        }
+    }
+
+    .mx_CompleteSecurity_clients_desktop {
+        margin-right: 56px;
+    }
+
+    .mx_CompleteSecurity_clients_desktop::before {
+        mask-image: url('$(res)/img/feather-customised/monitor.svg');
+    }
+
+    .mx_CompleteSecurity_clients_mobile::before {
+        mask-image: url('$(res)/img/feather-customised/smartphone.svg');
+    }
+
+    p {
+        margin-top: 16px;
+        font-size: $font-12px;
+        color: $muted-fg-color;
+        text-align: center;
+    }
+}
+
 .mx_CompleteSecurity_heroIcon {
     width: 128px;
     height: 128px;
@@ -44,6 +88,7 @@ limitations under the License.
 .mx_CompleteSecurity_actionRow {
     display: flex;
     justify-content: flex-end;
+    margin-top: $font-28px;
 
     .mx_AccessibleButton {
         margin-inline-start: 18px;

res/css/structures/auth/_Login.scss

@@ -89,3 +89,13 @@ limitations under the License.
 .mx_Login_underlinedServerName {
     border-bottom: 1px dashed $accent-color;
 }
+
+div.mx_AccessibleButton_kind_link.mx_Login_forgot {
+    // style it as a link
+    font-size: inherit;
+    padding: 0;
+
+    &.mx_AccessibleButton_disabled {
+        cursor: not-allowed;
+    }
+}

res/css/views/auth/_AuthBody.scss

@@ -119,6 +119,24 @@ limitations under the License.
     margin-right: 0;
 }
 
+.mx_AuthBody_paddedFooter {
+    height: 80px; // height of the submit button + register link
+    padding-top: 28px;
+    text-align: center;
+
+    .mx_AuthBody_paddedFooter_title {
+        margin-top: 16px;
+        font-size: $font-15px;
+        line-height: $font-24px;
+    }
+
+    .mx_AuthBody_paddedFooter_subtitle {
+        margin-top: 8px;
+        font-size: $font-10px;
+        line-height: $font-14px;
+    }
+}
+
 .mx_AuthBody_changeFlow {
     display: block;
     text-align: center;

res/css/views/avatars/_MemberStatusMessageAvatar.scss

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_MessageComposer_avatar .mx_BaseAvatar {
     padding: 2px;
     border: 1px solid transparent;
-    border-radius: 15px;
+    border-radius: 100%;
 }
 
 .mx_MessageComposer_avatar .mx_BaseAvatar_initial {

res/css/views/context_menus/_MessageContextMenu.scss

@@ -19,6 +19,7 @@ limitations under the License.
 }
 
 .mx_MessageContextMenu_field {
+    display: block;
     padding: 3px 6px 3px 6px;
     cursor: pointer;
     white-space: nowrap;

res/css/views/context_menus/_TopLeftMenu.scss

@@ -72,10 +72,10 @@ limitations under the License.
         .mx_AccessibleButton::after {
             mask-repeat: no-repeat;
             mask-position: 0 center;
-            mask-size: 16px;
+            mask-size: $font-16px;
             position: absolute;
-            width: 16px;
-            height: 16px;
+            width: $font-16px;
+            height: $font-16px;
             content: "";
             top: 5px;
             left: 14px;

res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss

@@ -32,3 +32,9 @@ limitations under the License.
     padding: 10px;
 }
 
+.mx_RestoreKeyBackupDialog_content > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 110px; /* Empirically measured */
+}

res/css/views/directory/_NetworkDropdown.scss

@@ -35,6 +35,8 @@ limitations under the License.
     border-radius: 4px;
     border: 1px solid $dialog-close-fg-color;
     background-color: $primary-bg-color;
+    max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
+    overflow-y: auto;
 }
 
 .mx_NetworkDropdown_menu_network {
@@ -51,15 +53,16 @@ limitations under the License.
         font-weight: 600;
         line-height: $font-20px;
         margin-bottom: 4px;
+        position: relative;
 
         // remove server button
         .mx_AccessibleButton {
             position: absolute;
             display: inline;
-            right: 12px;
+            right: 10px;
             height: 16px;
             width: 16px;
-            margin-top: 4px;
+            margin-top: 2px;
 
             &::after {
                 content: "";

res/css/views/elements/_Dropdown.scss

@@ -33,6 +33,10 @@ limitations under the License.
     user-select: none;
 }
 
+.mx_Dropdown_input.mx_AccessibleButton_disabled {
+    cursor: not-allowed;
+}
+
 .mx_Dropdown_input:focus {
     border-color: $input-focused-border-color;
 }
@@ -63,6 +67,8 @@ limitations under the License.
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1;
+    display: inline-flex;
+    align-items: center;
 }
 
 .mx_Dropdown_option div {
@@ -71,12 +77,18 @@ limitations under the License.
     white-space: nowrap;
 }
 
-.mx_Dropdown_option img {
+.mx_Dropdown_option img,
+.mx_Dropdown_option .mx_Dropdown_option_emoji {
     margin: 5px;
     width: 16px;
     vertical-align: middle;
 }
 
+.mx_Dropdown_option_emoji {
+    font-size: $font-16px;
+    line-height: $font-16px;
+}
+
 input.mx_Dropdown_option,
 input.mx_Dropdown_option:focus {
     font-weight: normal;

res/css/views/elements/_EditableItemList.scss

@@ -53,6 +53,9 @@ limitations under the License.
 .mx_EditableItem_item {
     flex: auto 1 0;
     order: 1;
+    width: calc(100% - 14px); // leave space for the remove button
+    overflow-x: hidden;
+    text-overflow: ellipsis;
 }
 
 .mx_EditableItemList_label {

res/css/views/elements/_ImageView.scss

@@ -37,7 +37,7 @@ limitations under the License.
     order: 2;
     /* min-width hack needed for FF */
     min-width: 0px;
-    height: 90%;
+    max-height: 90%;
     flex: 15 15 0;
     display: flex;
     align-items: center;

res/css/views/elements/_RichText.scss

@@ -6,16 +6,33 @@
 .mx_RoomPill,
 .mx_GroupPill,
 .mx_AtRoomPill {
-    border-radius: 16px;
-    display: inline-block;
-    height: 20px;
-    line-height: $font-20px;
-    padding-left: 5px;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    border-radius: $font-16px;
+    line-height: $font-15px;
+    padding-left: 0;
 }
 
 a.mx_Pill {
-    word-break: break-all;
-    display: inline;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: calc(100% - 1ch);
+}
+
+.mx_Pill {
+    padding: $font-1px;
+    padding-right: 0.4em;
+    vertical-align: text-top;
+    line-height: $font-17px;
+}
+
+/* More specific to override `.markdown-body a` color */
+.mx_EventTile_content .markdown-body a.mx_GroupPill,
+.mx_GroupPill {
+    color: $accent-fg-color;
+    background-color: $rte-group-pill-color;
 }
 
 /* More specific to override `.markdown-body a` text-decoration */
@@ -28,7 +45,6 @@ a.mx_Pill {
 .mx_UserPill {
     color: $primary-fg-color;
     background-color: $other-user-pill-bg-color;
-    padding-right: 5px;
 }
 
 .mx_UserPill_selected {
@@ -42,7 +58,6 @@ a.mx_Pill {
 .mx_MessageComposer_input .mx_AtRoomPill {
     color: $accent-fg-color;
     background-color: $mention-user-pill-bg-color;
-    padding-right: 5px;
 }
 
 /* More specific to override `.markdown-body a` color */
@@ -52,15 +67,6 @@ a.mx_Pill {
 .mx_GroupPill {
     color: $accent-fg-color;
     background-color: $rte-room-pill-color;
-    padding-right: 5px;
-}
-
-/* More specific to override `.markdown-body a` color */
-.mx_EventTile_content .markdown-body a.mx_GroupPill,
-.mx_GroupPill {
-    color: $accent-fg-color;
-    background-color: $rte-group-pill-color;
-    padding-right: 5px;
 }
 
 .mx_EventTile_body .mx_UserPill,
@@ -74,8 +80,10 @@ a.mx_Pill {
 .mx_GroupPill .mx_BaseAvatar,
 .mx_AtRoomPill .mx_BaseAvatar {
     position: relative;
-    left: -3px;
-    top: 2px;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 10rem;
+    margin-right: 0.24rem;
 }
 
 .mx_Markdown_BOLD {

res/css/views/elements/_ToggleSwitch.scss

@@ -16,11 +16,13 @@ limitations under the License.
 
 .mx_ToggleSwitch {
     transition: background-color 0.20s ease-out 0.1s;
-    width: 48px;
-    height: 24px;
-    border-radius: 14px;
+
+    width: $font-44px;
+    height: $font-20px;
+    border-radius: 1.5rem;
+    padding: 2px;
+
     background-color: $togglesw-off-color;
-    position: relative;
     opacity: 0.5;
 }
 
@@ -31,23 +33,18 @@ limitations under the License.
 
 .mx_ToggleSwitch.mx_ToggleSwitch_on {
     background-color: $togglesw-on-color;
+
+    > .mx_ToggleSwitch_ball {
+        left: calc(100% - $font-20px);
+    }
 }
 
 .mx_ToggleSwitch_ball {
-    transition: left 0.15s ease-out 0.1s;
-    margin: 2px;
-    width: 20px;
-    height: 20px;
-    border-radius: 20px;
+    position: relative;
+    width: $font-20px;
+    height: $font-20px;
+    border-radius: $font-20px;
     background-color: $togglesw-ball-color;
-    position: absolute;
-    top: 0;
-}
-
-.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
-    left: 23px; // 48px switch - 20px ball - 5px padding = 23px
-}
-
-.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
-    left: 2px;
+    transition: left 0.15s ease-out 0.1s;
+    left: 0;
 }

res/css/views/messages/_MVideoBody.scss

@@ -0,0 +1,22 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+span.mx_MVideoBody {
+    video.mx_MVideoBody {
+        max-width: 100%;
+        height: auto;
+    }
+}

res/css/views/messages/_ReactionsRowButton.scss

@@ -34,12 +34,17 @@ limitations under the License.
         background-color: $reaction-row-button-selected-bg-color;
         border-color: $reaction-row-button-selected-border-color;
     }
-}
 
-.mx_ReactionsRowButton_content {
-    max-width: 100px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    padding-right: 4px;
+    // ignore mouse events for all children, treat it as one entire hoverable entity
+    * {
+        pointer-events: none;
+    }
+
+    .mx_ReactionsRowButton_content {
+        max-width: 100px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-right: 4px;
+    }
 }

res/css/views/messages/_RedactedBody.scss

@@ -0,0 +1,36 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RedactedBody {
+    white-space: pre-wrap;
+    color: $muted-fg-color;
+    vertical-align: middle;
+
+    padding-left: 20px;
+    position: relative;
+
+    &::before {
+        height: 14px;
+        width: 14px;
+        background-color: $muted-fg-color;
+        mask-image: url('$(res)/img/feather-customised/trash.custom.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 0;
+    }
+}

res/css/views/right_panel/_UserInfo.scss

@@ -98,8 +98,8 @@ limitations under the License.
         position: absolute;
         top: 0;
         left: 0;
-        width: 100%;
-        height: 100%;
+        width: 100% !important;
+        height: 100% !important;
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar_initial {
@@ -109,7 +109,7 @@ limitations under the License.
         justify-content: center;
 
         // override the calculated sizes so that the letter isn't HUGE
-        font-size: 56px !important;
+        font-size: 6rem !important;
         width: 100% !important;
         transition: font-size 0.5s;
     }

res/css/views/rooms/_Autocomplete.scss

@@ -31,9 +31,10 @@
 }
 
 .mx_Autocomplete_Completion_pill {
-    border-radius: 17px;
-    height: 34px;
-    padding: 0px 5px;
+    box-sizing: border-box;
+    border-radius: 2rem;
+    height: $font-34px;
+    padding: 0.4rem;
     display: flex;
     user-select: none;
     cursor: pointer;
@@ -42,7 +43,7 @@
 }
 
 .mx_Autocomplete_Completion_pill > * {
-    margin: 0 3px;
+    margin-right: 0.3rem;
 }
 
 /* styling for common completion elements */

res/css/views/rooms/_BasicMessageComposer.scss

@@ -46,22 +46,19 @@ limitations under the License.
 
         &.mx_BasicMessageComposer_input_shouldShowPillAvatar {
             span.mx_UserPill, span.mx_RoomPill {
-                padding-left: 21px;
                 position: relative;
 
                 // avatar psuedo element
                 &::before {
-                    position: absolute;
-                    left: 2px;
-                    top: 2px;
                     content: var(--avatar-letter);
-                    width: 16px;
-                    height: 16px;
+                    width: $font-16px;
+                    height: $font-16px;
+                    margin-right: 0.24rem;
                     background: var(--avatar-background), $avatar-bg-color;
                     color: $avatar-initial-color;
                     background-repeat: no-repeat;
-                    background-size: 16px;
-                    border-radius: 8px;
+                    background-size: $font-16px;
+                    border-radius: $font-16px;
                     text-align: center;
                     font-weight: normal;
                     line-height: $font-16px;

res/css/views/rooms/_EntityTile.scss

@@ -69,8 +69,6 @@ limitations under the License.
     padding-right: 12px;
     padding-top: 4px;
     padding-bottom: 4px;
-    width: 36px;
-    height: 36px;
     position: relative;
 }
 

res/css/views/rooms/_EventTile.scss

@@ -45,7 +45,7 @@ limitations under the License.
 }
 
 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
-    top: 8px;
+    top: $font-8px;
     left: 65px;
 }
 
@@ -110,21 +110,23 @@ limitations under the License.
     user-select: none;
 }
 
-.mx_EventTile_line, .mx_EventTile_reply {
+.mx_EventTile_continuation .mx_EventTile_line {
     clear: both;
+}
+
+.mx_EventTile_line, .mx_EventTile_reply {
     position: relative;
     padding-left: 65px; /* left gutter */
-    padding-top: 4px;
-    padding-bottom: 2px;
+    padding-top: 3px;
+    padding-bottom: 3px;
     border-radius: 4px;
-    min-height: 24px;
     line-height: $font-22px;
 }
 
 .mx_RoomView_timeline_rr_enabled,
 // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
 .mx_EventListSummary {
-    .mx_EventTile_line, .mx_EventTile_reply {
+    .mx_EventTile_line {
         /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
         margin-right: 110px;
     }
@@ -242,34 +244,6 @@ limitations under the License.
     color: $event-notsent-color;
 }
 
-.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody,
-.mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
-    --lozenge-color: $event-redacted-fg-color;
-    --lozenge-border-color: $event-redacted-border-color;
-    display: block;
-    height: 22px;
-    width: 250px;
-    border-radius: 11px;
-    background:
-        repeating-linear-gradient(
-            -45deg,
-            var(--lozenge-color),
-            var(--lozenge-color) 3px,
-            transparent 3px,
-            transparent 6px
-        );
-    box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
-}
-
-.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody {
-    opacity: 0.4;
-}
-
-div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
-    --lozenge-color: $event-notsent-color;
-    --lozenge-border-color: $event-notsent-color;
-}
-
 .mx_EventTile_contextual {
     opacity: 0.4;
 }
@@ -311,6 +285,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 .mx_EventTile_readAvatars .mx_BaseAvatar {
     position: absolute;
     display: inline-block;
+    height: $font-14px;
+    width: $font-14px;
 }
 
 .mx_EventTile_readAvatarRemainder {
@@ -661,3 +637,23 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
         }
     }
 }
+
+.mx_EventTile_tileError {
+    color: red;
+    text-align: center;
+
+    // Remove some of the default tile padding so that the error is centered
+    margin-right: 0;
+    .mx_EventTile_line {
+        padding-left: 0;
+        margin-right: 0;
+    }
+
+    .mx_EventTile_line span {
+        padding: 4px 8px;
+    }
+
+    a {
+        margin-left: 1em;
+    }
+}

res/css/views/rooms/_RoomHeader.scss

@@ -173,8 +173,6 @@ limitations under the License.
 
 .mx_RoomHeader_avatar {
     flex: 0;
-    width: 28px;
-    height: 28px;
     margin: 0 7px;
     position: relative;
 }

res/css/views/rooms/_RoomRecoveryReminder.scss

@@ -33,11 +33,6 @@ limitations under the License.
     margin-bottom: 1em;
 }
 
-.mx_RoomRecoveryReminder_button {
-    @mixin mx_DialogButton;
-    margin: 0 10px;
-}
-
 .mx_RoomRecoveryReminder_secondary {
     font-size: 90%;
     margin-top: 1em;

res/css/views/rooms/_RoomTile.scss

@@ -20,10 +20,24 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     cursor: pointer;
-    height: 34px;
+    height: $font-34px;
     margin: 0;
     padding: 0 8px 0 10px;
     position: relative;
+
+    .mx_RoomTile_menuButton {
+        display: none;
+        flex: 0 0 16px;
+        height: 16px;
+        background-image: url('$(res)/img/icon_context.svg');
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+
+    .mx_UserOnlineDot {
+        display: block;
+        margin-right: 5px;
+    }
 }
 
 .mx_RoomTile:focus {
@@ -31,15 +45,6 @@ limitations under the License.
     background-color: $roomtile-focused-bg-color;
 }
 
-.mx_RoomTile_menuButton {
-    display: none;
-    flex: 0 0 16px;
-    height: 16px;
-    background-image: url('$(res)/img/icon_context.svg');
-    background-repeat: no-repeat;
-    background-position: center;
-}
-
 .mx_RoomTile_tooltip {
     display: inline-block;
     position: relative;
@@ -151,7 +156,10 @@ limitations under the License.
     }
 
     .mx_RoomTile_menuButton {
-        display: none;  //no design for this for now
+        display: none; // no design for this for now
+    }
+    .mx_UserOnlineDot {
+        display: none; // no design for this for now
     }
 }
 
@@ -164,6 +172,9 @@ limitations under the License.
     .mx_RoomTile_menuButton {
         display: block;
     }
+    .mx_UserOnlineDot {
+        display: none;
+    }
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge,

res/css/views/rooms/_UserOnlineDot.scss

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_UserOnlineDot {
     border-radius: 50%;
     background-color: $accent-color;
-    height: 5px;
-    width: 5px;
+    height: 6px;
+    width: 6px;
     display: inline-block;
 }

res/css/views/settings/_AvatarSetting.scss

@@ -15,13 +15,13 @@ limitations under the License.
 */
 
 .mx_AvatarSetting_avatar {
-    width: 88px;
-    height: 88px;
+    width: $font-88px;
+    height: $font-88px;
     margin-left: 13px;
     position: relative;
 
     & > * {
-        width: 88px;
+        width: $font-88px;
         box-sizing: border-box;
     }
 
@@ -63,7 +63,7 @@ limitations under the License.
     & > img,
     .mx_AvatarSetting_avatarPlaceholder {
         display: block;
-        height: 88px;
+        height: $font-88px;
         border-radius: 4px;
     }
 

res/css/views/settings/tabs/_SettingsTab.scss

@@ -63,7 +63,7 @@ limitations under the License.
     display: inline-block;
     font-size: $font-14px;
     color: $primary-fg-color;
-    max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
+    max-width: calc(100% - $font-48px); // Force word wrap instead of colliding with the switch
     box-sizing: border-box;
     padding-right: 10px;
 }

res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss

@@ -23,6 +23,12 @@ limitations under the License.
     margin-top: 0;
 }
 
+.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
+.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
+    // Move the spinner to the left side of the container (default center)
+    justify-content: left;
+}
+
 .mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
 .mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
 .mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,

res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss

@@ -55,3 +55,12 @@ limitations under the License.
 .mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
     margin-right: 10px;
 }
+
+.mx_SecurityUserSettingsTab {
+    .mx_SettingsTab_section {
+        .mx_AccessibleButton_kind_link {
+            padding: 0;
+            font-size: inherit;
+        }
+    }
+}

res/img/feather-customised/monitor.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V15C22 16.1046 21.1046 17 20 17H4C2.89543 17 2 16.1046 2 15V5Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 21H16" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 17V21" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

res/img/feather-customised/smartphone.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4C5 2.89543 5.89543 2 7 2H17C18.1046 2 19 2.89543 19 4V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V4Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="12" cy="18" r="1" fill="#2E2F32"/>
+</svg>

res/img/feather-customised/trash.custom.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.25 5.5H5.16667H21.75" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5 5.5L15 1H9L7.5 5.5" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.75 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.25 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>