Merge branch 'develop' into matthew/e2e_backups

.eslintignore.errorfiles

@@ -6,39 +6,57 @@ src/autocomplete/EmojiProvider.js
 src/autocomplete/UserProvider.js
 src/CallHandler.js
 src/component-index.js
-src/components/structures/ContextualMenu.js
+src/components/structures/BottomLeftMenu.js
+src/components/structures/CompatibilityPage.js
 src/components/structures/CreateRoom.js
+src/components/structures/HomePage.js
+src/components/structures/LeftPanel.js
 src/components/structures/LoggedInView.js
 src/components/structures/login/ForgotPassword.js
 src/components/structures/login/Login.js
 src/components/structures/login/Registration.js
+src/components/structures/LoginBox.js
 src/components/structures/MessagePanel.js
 src/components/structures/NotificationPanel.js
+src/components/structures/RoomDirectory.js
 src/components/structures/RoomStatusBar.js
+src/components/structures/RoomSubList.js
 src/components/structures/RoomView.js
 src/components/structures/ScrollPanel.js
+src/components/structures/SearchBox.js
 src/components/structures/TimelinePanel.js
 src/components/structures/UploadBar.js
+src/components/structures/ViewSource.js
 src/components/views/avatars/BaseAvatar.js
+src/components/views/avatars/GroupAvatar.js
 src/components/views/avatars/MemberAvatar.js
 src/components/views/create_room/RoomAlias.js
+src/components/views/dialogs/BugReportDialog.js
+src/components/views/dialogs/ChangelogDialog.js
 src/components/views/dialogs/ChatCreateOrReuseDialog.js
 src/components/views/dialogs/DeactivateAccountDialog.js
+src/components/views/dialogs/SetPasswordDialog.js
 src/components/views/dialogs/UnknownDeviceDialog.js
+src/components/views/directory/NetworkDropdown.js
 src/components/views/elements/AddressSelector.js
 src/components/views/elements/DeviceVerifyButtons.js
 src/components/views/elements/DirectorySearchBox.js
 src/components/views/elements/EditableText.js
+src/components/views/elements/ImageView.js
+src/components/views/elements/InlineSpinner.js
 src/components/views/elements/MemberEventListSummary.js
+src/components/views/elements/Spinner.js
 src/components/views/elements/TintableSvg.js
 src/components/views/elements/UserSelector.js
+src/components/views/globals/MatrixToolbar.js
+src/components/views/globals/NewVersionBar.js
+src/components/views/globals/UpdateCheckBar.js
 src/components/views/login/CountryDropdown.js
 src/components/views/login/InteractiveAuthEntryComponents.js
 src/components/views/login/PasswordLogin.js
 src/components/views/login/RegistrationForm.js
 src/components/views/login/ServerConfig.js
 src/components/views/messages/MFileBody.js
-src/components/views/messages/MImageBody.js
 src/components/views/messages/RoomAvatarEvent.js
 src/components/views/messages/TextualBody.js
 src/components/views/room_settings/AliasSettings.js
@@ -55,12 +73,14 @@ src/components/views/rooms/MemberList.js
 src/components/views/rooms/MemberTile.js
 src/components/views/rooms/MessageComposer.js
 src/components/views/rooms/MessageComposerInput.js
-src/components/views/rooms/ReadReceiptMarker.js
+src/components/views/rooms/RoomDropTarget.js
 src/components/views/rooms/RoomList.js
 src/components/views/rooms/RoomPreviewBar.js
 src/components/views/rooms/RoomSettings.js
 src/components/views/rooms/RoomTile.js
+src/components/views/rooms/RoomTooltip.js
 src/components/views/rooms/SearchableEntityList.js
+src/components/views/rooms/SearchBar.js
 src/components/views/rooms/SearchResultTile.js
 src/components/views/rooms/TopUnreadMessagesBar.js
 src/components/views/rooms/UserTile.js
@@ -69,6 +89,8 @@ src/components/views/settings/ChangeAvatar.js
 src/components/views/settings/ChangeDisplayName.js
 src/components/views/settings/ChangePassword.js
 src/components/views/settings/DevicesPanel.js
+src/components/views/settings/IntegrationsManager.js
+src/components/views/settings/Notifications.js
 src/ContentMessages.js
 src/HtmlUtils.js
 src/ImageUtils.js
@@ -78,9 +100,16 @@ src/Login.js
 src/Markdown.js
 src/MatrixClientPeg.js
 src/Modal.js
+src/notifications/ContentRules.js
+src/notifications/NotificationUtils.js
+src/notifications/PushRuleVectorState.js
+src/notifications/StandardActions.js
+src/notifications/VectorPushRulesDefinitions.js
 src/Notifier.js
 src/PlatformPeg.js
 src/Presence.js
+src/rageshake/rageshake.js
+src/rageshake/submit-rageshake.js
 src/ratelimitedfunc.js
 src/RichText.js
 src/Roles.js
@@ -89,10 +118,12 @@ src/ScalarAuthClient.js
 src/UiEffects.js
 src/Unread.js
 src/utils/DecryptFile.js
+src/utils/DirectoryUtils.js
 src/utils/DMRoomMap.js
 src/utils/FormattingUtils.js
 src/utils/MultiInviter.js
 src/utils/Receipt.js
+src/VectorConferenceHandler.js
 src/Velociraptor.js
 src/VelocityBounce.js
 src/WhoIsTyping.js
@@ -102,8 +133,9 @@ test/components/structures/MessagePanel-test.js
 test/components/structures/ScrollPanel-test.js
 test/components/structures/TimelinePanel-test.js
 test/components/views/dialogs/InteractiveAuthDialog-test.js
-test/components/views/elements/MemberEventListSummary-test.js
 test/components/views/login/RegistrationForm-test.js
 test/components/views/rooms/MessageComposerInput-test.js
 test/mock-clock.js
+test/notifications/ContentRules-test.js
+test/notifications/PushRuleVectorState-test.js
 test/stores/RoomViewStore-test.js

.eslintrc.js

@@ -41,7 +41,8 @@ module.exports = {
         "react/jsx-uses-react": "error",
 
         // bind or arrow function in props causes performance issues
-        "react/jsx-no-bind": ["error", {
+        // (but we currently use them in some places)
+        "react/jsx-no-bind": ["warn", {
             "ignoreRefs": true,
         }],
         "react/jsx-key": ["error"],
@@ -50,7 +51,12 @@ module.exports = {
         // <Element prop={ consideredError} prop={notConsideredError} />
         //
         // https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/jsx-curly-spacing.md
-        "react/jsx-curly-spacing": ["error", {"when": "never", "children": {"when": "always"}}],
+        //
+        // Disabled for now - if anything we'd like to *enforce* spacing in JSX
+        // curly brackets for legibility, but in practice it's not clear that the
+        // consistency particularly improves legibility here. --Matthew
+        //
+        // "react/jsx-curly-spacing": ["error", {"when": "never", "children": {"when": "always"}}],
 
         // Assert spacing before self-closing JSX tags, and no spacing before or
         // after the closing slash, and no spacing after the opening bracket of
@@ -88,7 +94,6 @@ module.exports = {
         "valid-jsdoc": ["warn"],
         "new-cap": ["warn"],
         "key-spacing": ["warn"],
-        "arrow-parens": ["warn"],
         "prefer-const": ["warn"],
 
         // crashes currently: https://github.com/eslint/eslint/issues/6274

.travis-test-riot.sh

@@ -9,16 +9,9 @@ set -ev
 RIOT_WEB_DIR=riot-web
 REACT_SDK_DIR=`pwd`
 
-curbranch="${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH}"
+scripts/fetchdep.sh vector-im riot-web
-echo "Determined branch to be $curbranch"
-
-git clone https://github.com/vector-im/riot-web.git \
-    "$RIOT_WEB_DIR"
-
 cd "$RIOT_WEB_DIR"
 
-git checkout "$curbranch" || git checkout develop
-
 mkdir node_modules
 npm install
 

.travis.yml

@@ -3,7 +3,10 @@ dist: trusty
 
 # we don't need sudo, so can run in a container, which makes startup much
 # quicker.
-sudo: false
+#
+# unfortunately we do temporarily require sudo as a workaround for
+# https://github.com/travis-ci/travis-ci/issues/8836
+sudo: required
 
 language: node_js
 node_js:
@@ -12,6 +15,5 @@ addons:
     chrome: stable
 install:
     - npm install
-    - (cd node_modules/matrix-js-sdk && npm install)
 script:
     ./scripts/travis.sh

CHANGELOG.md

@@ -1,3 +1,678 @@
+Changes in [0.12.5](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.5) (2018-05-17)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.4...v0.12.5)
+
+ * Fix image size jumping regression
+   [\#1909](https://github.com/matrix-org/matrix-react-sdk/pull/1909)
+
+Changes in [0.12.4](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.4) (2018-05-16)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.4-rc.6...v0.12.4)
+
+ * No changes from rc.5
+
+Changes in [0.12.4-rc.6](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.4-rc.6) (2018-05-15)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.4-rc.5...v0.12.4-rc.6)
+
+ * Wait for deletion of widgets as well addition
+   [\#1907](https://github.com/matrix-org/matrix-react-sdk/pull/1907)
+
+Changes in [0.12.4-rc.5](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.4-rc.5) (2018-05-15)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.4-rc.4...v0.12.4-rc.5)
+
+ * Wait for echo from server when adding user widgets
+   [\#1905](https://github.com/matrix-org/matrix-react-sdk/pull/1905)
+
+Changes in [0.12.4-rc.4](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.4-rc.4) (2018-05-14)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.4-rc.3...v0.12.4-rc.4)
+
+ * Update from Weblate.
+   [\#1904](https://github.com/matrix-org/matrix-react-sdk/pull/1904)
+ * Correctly identify sticker picker widgets
+   [\#1894](https://github.com/matrix-org/matrix-react-sdk/pull/1894)
+ * Quick fix for sticker picker position
+   [\#1903](https://github.com/matrix-org/matrix-react-sdk/pull/1903)
+ * Remove redundant logging (currently shown on every render when no sti…
+   [\#1901](https://github.com/matrix-org/matrix-react-sdk/pull/1901)
+ * Fix stickers briefly being 2x the size
+   [\#1899](https://github.com/matrix-org/matrix-react-sdk/pull/1899)
+ * Send required properties when making requests to widgets over postMessage
+   [\#1891](https://github.com/matrix-org/matrix-react-sdk/pull/1891)
+ * Fix room widget second load infini spinner
+   [\#1897](https://github.com/matrix-org/matrix-react-sdk/pull/1897)
+ * Update widget state when account data changes
+   [\#1896](https://github.com/matrix-org/matrix-react-sdk/pull/1896)
+ * Remove margins when in a ReplyThread to stop them taking so much space
+   [\#1882](https://github.com/matrix-org/matrix-react-sdk/pull/1882)
+ * Add setting to enable widget screenshots (if widgets declare support)
+   [\#1892](https://github.com/matrix-org/matrix-react-sdk/pull/1892)
+ * T3chguy/replies html tag
+   [\#1889](https://github.com/matrix-org/matrix-react-sdk/pull/1889)
+ * Instant Sticker Picker
+   [\#1888](https://github.com/matrix-org/matrix-react-sdk/pull/1888)
+ * Update widget 'widgetData' key to 'data' to match spec.
+   [\#1887](https://github.com/matrix-org/matrix-react-sdk/pull/1887)
+ * Fix 'state_key' field name.
+   [\#1886](https://github.com/matrix-org/matrix-react-sdk/pull/1886)
+ * Improve appearance of short-lived app loading spinner
+   [\#1885](https://github.com/matrix-org/matrix-react-sdk/pull/1885)
+ * Take feature_sticker_messagse out of labs
+   [\#1883](https://github.com/matrix-org/matrix-react-sdk/pull/1883)
+ * Fix issue incorrect positioning with widget loading indicator
+   [\#1884](https://github.com/matrix-org/matrix-react-sdk/pull/1884)
+ * Users should always be able to edit their user/non-room  widgets
+   [\#1879](https://github.com/matrix-org/matrix-react-sdk/pull/1879)
+
+Changes in [0.12.4-rc.3](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.4-rc.3) (2018-05-11)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.4-rc.2...v0.12.4-rc.3)
+
+ * Instant Sticker Picker :zap:
+   [\#1888](https://github.com/matrix-org/matrix-react-sdk/pull/1888)
+
+Changes in [0.12.4-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.4-rc.2) (2018-05-09)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.4-rc.1...v0.12.4-rc.2)
+
+ * Improve appearance of short-lived widget loading spinner
+ * Make sticker picker fully-fledged feature
+ * Fix incorrect positioning with widget loading indicator
+
+Changes in [0.12.4-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.4-rc.1) (2018-05-09)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.3...v0.12.4-rc.1)
+
+ * Update from Weblate.
+   [\#1881](https://github.com/matrix-org/matrix-react-sdk/pull/1881)
+ * Pin lolex at 2.3.2 to avoid bug causing tests to fail
+   [\#1880](https://github.com/matrix-org/matrix-react-sdk/pull/1880)
+ * Replies: un-break click-to-mention on SenderProfile for reply&preview
+   [\#1878](https://github.com/matrix-org/matrix-react-sdk/pull/1878)
+ * Add tests for RoomList
+   [\#1877](https://github.com/matrix-org/matrix-react-sdk/pull/1877)
+ * Fix crash when browser doesn't report page change measurement
+   [\#1874](https://github.com/matrix-org/matrix-react-sdk/pull/1874)
+ * fix thinko when changing from ClientPeg to context in static method (DUH)
+   [\#1875](https://github.com/matrix-org/matrix-react-sdk/pull/1875)
+ * Fix Replies :D
+   [\#1873](https://github.com/matrix-org/matrix-react-sdk/pull/1873)
+ * Update eslint-plugin-react
+   [\#1871](https://github.com/matrix-org/matrix-react-sdk/pull/1871)
+ * relax lint for jsx-curly-spacing and arrow-parens
+   [\#1872](https://github.com/matrix-org/matrix-react-sdk/pull/1872)
+ * Use develop js-sdk in jenkins build
+   [\#1870](https://github.com/matrix-org/matrix-react-sdk/pull/1870)
+ * Replies
+   [\#1741](https://github.com/matrix-org/matrix-react-sdk/pull/1741)
+ * Use the right js-sdk branch when testing
+   [\#1869](https://github.com/matrix-org/matrix-react-sdk/pull/1869)
+ * Prevent error responses wedging group request concurrency limit
+   [\#1867](https://github.com/matrix-org/matrix-react-sdk/pull/1867)
+ * Refresh group rooms and members when selecting a tag
+   [\#1868](https://github.com/matrix-org/matrix-react-sdk/pull/1868)
+ * Refactor GroupStores into one global GroupStore
+   [\#1866](https://github.com/matrix-org/matrix-react-sdk/pull/1866)
+ * Switch back to using blob URLs for rendering e2e attachments
+   [\#1864](https://github.com/matrix-org/matrix-react-sdk/pull/1864)
+ * Hide inline encryption icons except when hovering over a message
+   [\#1845](https://github.com/matrix-org/matrix-react-sdk/pull/1845)
+ *  UI fixes in SessionRestoreErrorDialog
+   [\#1860](https://github.com/matrix-org/matrix-react-sdk/pull/1860)
+ *  Fix UX issues with bug report dialog
+   [\#1863](https://github.com/matrix-org/matrix-react-sdk/pull/1863)
+ * fix ugly img errors and correctly render SVG thumbnails
+   [\#1865](https://github.com/matrix-org/matrix-react-sdk/pull/1865)
+ * Fix error handling on session restore
+   [\#1859](https://github.com/matrix-org/matrix-react-sdk/pull/1859)
+ * Add tests for GroupView
+   [\#1862](https://github.com/matrix-org/matrix-react-sdk/pull/1862)
+ * Update version of hoek
+   [\#1861](https://github.com/matrix-org/matrix-react-sdk/pull/1861)
+ *  Fix bug that caused crash when analytics HS/IS whitelists not specified
+   [\#1858](https://github.com/matrix-org/matrix-react-sdk/pull/1858)
+ * Fix Analytics to not import DEFAULTS, therefore avoiding NPE
+   [\#1857](https://github.com/matrix-org/matrix-react-sdk/pull/1857)
+ * Null check piwik config before using it
+   [\#1856](https://github.com/matrix-org/matrix-react-sdk/pull/1856)
+ * Track actual window location origin and hash
+   [\#1853](https://github.com/matrix-org/matrix-react-sdk/pull/1853)
+ * Replace document.origin with window.location.origin
+   [\#1855](https://github.com/matrix-org/matrix-react-sdk/pull/1855)
+ * Optionally hide widget popout button.
+   [\#1854](https://github.com/matrix-org/matrix-react-sdk/pull/1854)
+ * Add a button to 'pop out' widgets in to their own tab.
+   [\#1851](https://github.com/matrix-org/matrix-react-sdk/pull/1851)
+
+Changes in [0.12.3](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.3) (2018-04-30)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.3-rc.3...v0.12.3)
+
+ * No changes since rc.3
+
+Changes in [0.12.3-rc.3](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.3-rc.3) (2018-04-26)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.3-rc.2...v0.12.3-rc.3)
+
+ * Replace document.origin with window.location.origin
+   [\#1855](https://github.com/matrix-org/matrix-react-sdk/pull/1855)
+
+Changes in [0.12.3-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.3-rc.2) (2018-04-25)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.3-rc.1...v0.12.3-rc.2)
+
+ * Fix npm packaging
+
+Changes in [0.12.3-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.3-rc.1) (2018-04-25)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.2...v0.12.3-rc.1)
+
+ * Update from Weblate.
+   [\#1852](https://github.com/matrix-org/matrix-react-sdk/pull/1852)
+ * Support origin lock in cross-origin renderer
+   [\#1849](https://github.com/matrix-org/matrix-react-sdk/pull/1849)
+ * s/contian/contain/g
+   [\#1850](https://github.com/matrix-org/matrix-react-sdk/pull/1850)
+ * Don't autocomplete users for single "@"
+   [\#1848](https://github.com/matrix-org/matrix-react-sdk/pull/1848)
+ * Update from Weblate.
+   [\#1844](https://github.com/matrix-org/matrix-react-sdk/pull/1844)
+ * Bind onImageError in constructor
+   [\#1846](https://github.com/matrix-org/matrix-react-sdk/pull/1846)
+ * Use mxid as sender name on set display name
+   [\#1841](https://github.com/matrix-org/matrix-react-sdk/pull/1841)
+ * Fix rageshake
+   [\#1840](https://github.com/matrix-org/matrix-react-sdk/pull/1840)
+ * Add UI for displaying room avatars full size
+   [\#1843](https://github.com/matrix-org/matrix-react-sdk/pull/1843)
+ * Update from Weblate.
+   [\#1842](https://github.com/matrix-org/matrix-react-sdk/pull/1842)
+ * move everything not explicitly riot (or status) branded into matrix-react-
+   sdk
+   [\#1836](https://github.com/matrix-org/matrix-react-sdk/pull/1836)
+ * Null check node before we pass it to velocity
+   [\#1838](https://github.com/matrix-org/matrix-react-sdk/pull/1838)
+ * Remove presence management
+   [\#1676](https://github.com/matrix-org/matrix-react-sdk/pull/1676)
+ * Null check stylesheet href
+   [\#1835](https://github.com/matrix-org/matrix-react-sdk/pull/1835)
+ * TopUnreadMessagesBar a11y
+   [\#1819](https://github.com/matrix-org/matrix-react-sdk/pull/1819)
+ * Use correct 1-1 room avatar after users leave
+   [\#593](https://github.com/matrix-org/matrix-react-sdk/pull/593)
+ * Use GeminiScrollbarWrapper in Flair settings of UserSettings
+   [\#1833](https://github.com/matrix-org/matrix-react-sdk/pull/1833)
+ * Add 500ms delay to show `membershipBusy` for longer
+   [\#1832](https://github.com/matrix-org/matrix-react-sdk/pull/1832)
+ * Improve group join/leave feedback
+   [\#1831](https://github.com/matrix-org/matrix-react-sdk/pull/1831)
+ * Update from Weblate.
+   [\#1830](https://github.com/matrix-org/matrix-react-sdk/pull/1830)
+ * Bump source-map-loader version to avoid bug /w inline base64 maps
+   [\#1829](https://github.com/matrix-org/matrix-react-sdk/pull/1829)
+ * Make stickers/messages continuations of each other
+   [\#1828](https://github.com/matrix-org/matrix-react-sdk/pull/1828)
+ * Update to match is_openly_joinable API
+   [\#1827](https://github.com/matrix-org/matrix-react-sdk/pull/1827)
+ * Fix to prevent guests from seeing features
+   [\#1826](https://github.com/matrix-org/matrix-react-sdk/pull/1826)
+ * Fix broken ForgotPassword component
+   [\#1825](https://github.com/matrix-org/matrix-react-sdk/pull/1825)
+ * Fix warning "Unknown prop `wrappedRef` on <div> tag..."
+   [\#1824](https://github.com/matrix-org/matrix-react-sdk/pull/1824)
+ * Add radio button for setting group is_joinable
+   [\#1817](https://github.com/matrix-org/matrix-react-sdk/pull/1817)
+ * Fix widget grant / revoke permission binding
+   [\#1823](https://github.com/matrix-org/matrix-react-sdk/pull/1823)
+ * Sticker picker styling
+   [\#1822](https://github.com/matrix-org/matrix-react-sdk/pull/1822)
+ * Bi-directional widget postMessaging API (stickerpacks) [WIP]
+   [\#1672](https://github.com/matrix-org/matrix-react-sdk/pull/1672)
+ * Add null-guard to prevent RoomAvatar NPE when room is null
+   [\#1821](https://github.com/matrix-org/matrix-react-sdk/pull/1821)
+ * Don't notify for bad encrypted messages
+   [\#1818](https://github.com/matrix-org/matrix-react-sdk/pull/1818)
+ * Join this community button
+   [\#1815](https://github.com/matrix-org/matrix-react-sdk/pull/1815)
+ * Reword group setting delay
+   [\#1816](https://github.com/matrix-org/matrix-react-sdk/pull/1816)
+ * Track duration of page changes
+   [\#1814](https://github.com/matrix-org/matrix-react-sdk/pull/1814)
+ * Wrap GeminiScrollbar in a component, enabled forceGemini
+   [\#1810](https://github.com/matrix-org/matrix-react-sdk/pull/1810)
+ * Add display name to the read receipt view
+   [\#1742](https://github.com/matrix-org/matrix-react-sdk/pull/1742)
+ * Fix broken import preventing people tag
+   [\#1811](https://github.com/matrix-org/matrix-react-sdk/pull/1811)
+ * Add /devtools to Autocomplete and run gen-i18n
+   [\#1778](https://github.com/matrix-org/matrix-react-sdk/pull/1778)
+ * Fix PresenceLabel in MemberInfo
+   [\#1809](https://github.com/matrix-org/matrix-react-sdk/pull/1809)
+ * Fix room tile badge not disappearing when receiving a read receipt
+   [\#1807](https://github.com/matrix-org/matrix-react-sdk/pull/1807)
+ * Option to remove the presence feature by HS
+   [\#1806](https://github.com/matrix-org/matrix-react-sdk/pull/1806)
+ * Dialog a11y
+   [\#1652](https://github.com/matrix-org/matrix-react-sdk/pull/1652)
+ * Change wording of debug log submission
+   [\#1740](https://github.com/matrix-org/matrix-react-sdk/pull/1740)
+ * Fix TextualBody.js to remove NodeList.forEach()
+   [\#1768](https://github.com/matrix-org/matrix-react-sdk/pull/1768)
+ * Use undocumented piwik cmd to disable heartbeattimer
+   [\#1770](https://github.com/matrix-org/matrix-react-sdk/pull/1770)
+ * Enable autocompletion for non-English languages.
+   [\#1800](https://github.com/matrix-org/matrix-react-sdk/pull/1800)
+
+Changes in [0.12.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.2) (2018-04-12)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.1...v0.12.2)
+
+ * Null check stylesheet href
+  [\#1835](https://github.com/matrix-org/matrix-react-sdk/pull/1835)
+ * Remove the presence management labs feature
+
+Changes in [0.12.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.1) (2018-04-11)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.0...v0.12.1)
+
+ * Use correct js-sdk version
+
+Changes in [0.12.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.0) (2018-04-11)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.0-rc.7...v0.12.0)
+
+ * Further improve group joining/leaving feedback
+  [\#1832](https://github.com/matrix-org/matrix-react-sdk/pull/1832)
+ * Cosmetic changes to Communities button
+
+Changes in [0.12.0-rc.7](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.0-rc.7) (2018-04-10)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.0-rc.6...v0.12.0-rc.7)
+
+ * Reword group setting delay
+  [\#1816](https://github.com/matrix-org/matrix-react-sdk/pull/1816)
+ * Improve group joining/leaving feedback
+  [\#1831](https://github.com/matrix-org/matrix-react-sdk/pull/1831)
+ 
+Changes in [0.12.0-rc.6](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.0-rc.6) (2018-04-09)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.0-rc.5...v0.12.0-rc.6)
+
+ * Fix group join button not appearing
+
+Changes in [0.12.0-rc.5](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.0-rc.5) (2018-04-09)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.0-rc.4...v0.12.0-rc.5)
+
+ * Added radio button to set group join policy
+ * Fix to prevent guests from accessing lab features
+ * Fix broken forgot password page
+ * Fix crash when joining a room after peeking
+
+Changes in [0.12.0-rc.4](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.0-rc.4) (2018-03-22)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.0-rc.3...v0.12.0-rc.4)
+
+ * Fix broken import preventing people tag
+   [\#1811](https://github.com/matrix-org/matrix-react-sdk/pull/1811)
+
+Changes in [0.12.0-rc.3](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.0-rc.3) (2018-03-20)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.0-rc.2...v0.12.0-rc.3)
+
+ * Fix room tile badge not disappearing when receiving a read receipt
+   [\#1807](https://github.com/matrix-org/matrix-react-sdk/pull/1807)
+
+Changes in [0.12.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.0-rc.2) (2018-03-19)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.12.0-rc.1...v0.12.0-rc.2)
+
+ * Take TagPanel out of labs
+   [\#1805](https://github.com/matrix-org/matrix-react-sdk/pull/1805)
+
+Changes in [0.12.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.12.0-rc.1) (2018-03-19)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.11.4...v0.12.0-rc.1)
+
+ * Remove the message on migrating crypto data
+   [\#1803](https://github.com/matrix-org/matrix-react-sdk/pull/1803)
+ * Update from Weblate.
+   [\#1804](https://github.com/matrix-org/matrix-react-sdk/pull/1804)
+ * Improve room list performance when receiving messages
+   [\#1801](https://github.com/matrix-org/matrix-react-sdk/pull/1801)
+ * Add change delay warning in GroupView settings
+   [\#1802](https://github.com/matrix-org/matrix-react-sdk/pull/1802)
+ * Only use `dangerouslySetInnerHTML` for HTML messages
+   [\#1799](https://github.com/matrix-org/matrix-react-sdk/pull/1799)
+ * Limit group requests to 3 at once
+   [\#1798](https://github.com/matrix-org/matrix-react-sdk/pull/1798)
+ * Show GroupMemberList after inviting a group member
+   [\#1796](https://github.com/matrix-org/matrix-react-sdk/pull/1796)
+ * Fix syntax fail
+   [\#1794](https://github.com/matrix-org/matrix-react-sdk/pull/1794)
+ * Use TintableSvg for TagPanel clear filter button
+   [\#1793](https://github.com/matrix-org/matrix-react-sdk/pull/1793)
+ * Fix missing space between "...is a" and user ID
+   [\#1792](https://github.com/matrix-org/matrix-react-sdk/pull/1792)
+ * E2E "fudge-button"
+   [\#1791](https://github.com/matrix-org/matrix-react-sdk/pull/1791)
+ * Remove spurious console.trace
+   [\#1790](https://github.com/matrix-org/matrix-react-sdk/pull/1790)
+ * Don't reset the presence timer on every dispatch
+   [\#1789](https://github.com/matrix-org/matrix-react-sdk/pull/1789)
+ * Potentially fix a memory leak in FlairStore
+   [\#1788](https://github.com/matrix-org/matrix-react-sdk/pull/1788)
+ * Implement transparent RoomTile for use in some places
+   [\#1785](https://github.com/matrix-org/matrix-react-sdk/pull/1785)
+ * Fix varying default group avatar colour for given group
+   [\#1784](https://github.com/matrix-org/matrix-react-sdk/pull/1784)
+ * Fix bug where avatar change not reflected in LLP
+   [\#1783](https://github.com/matrix-org/matrix-react-sdk/pull/1783)
+ * Workaround for atlassian/react-beautiful-dnd#273
+   [\#1782](https://github.com/matrix-org/matrix-react-sdk/pull/1782)
+ * Add setting to disable TagPanel
+   [\#1781](https://github.com/matrix-org/matrix-react-sdk/pull/1781)
+ * [DO NOT MERGE] Tests proven to fail
+   [\#1780](https://github.com/matrix-org/matrix-react-sdk/pull/1780)
+ * Fix room power level settings
+   [\#1779](https://github.com/matrix-org/matrix-react-sdk/pull/1779)
+ * fix shouldHideEvent saying an event is a leave/join when a profile ch…
+   [\#1769](https://github.com/matrix-org/matrix-react-sdk/pull/1769)
+ * Add "Did you know:..." microcopy to groups view
+   [\#1777](https://github.com/matrix-org/matrix-react-sdk/pull/1777)
+ * Give emptySubListTip a container for correct bg colour
+   [\#1753](https://github.com/matrix-org/matrix-react-sdk/pull/1753)
+ * Do proper null-checks on decypted events to fix NPEs
+   [\#1776](https://github.com/matrix-org/matrix-react-sdk/pull/1776)
+ * Reorder the RoomListStore lists on Event.decrypted
+   [\#1775](https://github.com/matrix-org/matrix-react-sdk/pull/1775)
+ * Fix bug where global "Never send to unverified..." is ignored
+   [\#1772](https://github.com/matrix-org/matrix-react-sdk/pull/1772)
+ * Fix bug that prevented tint updates
+   [\#1767](https://github.com/matrix-org/matrix-react-sdk/pull/1767)
+ * Fix group member spinner being out of flex order
+   [\#1765](https://github.com/matrix-org/matrix-react-sdk/pull/1765)
+ * Allow widget iframes to request camera and microphone permissions.
+   [\#1766](https://github.com/matrix-org/matrix-react-sdk/pull/1766)
+ * Change icon from "R" to "X"
+   [\#1764](https://github.com/matrix-org/matrix-react-sdk/pull/1764)
+ * Regenerate room lists on Room event
+   [\#1762](https://github.com/matrix-org/matrix-react-sdk/pull/1762)
+ *  Fix DMs being marked as with the current user ("me")
+   [\#1761](https://github.com/matrix-org/matrix-react-sdk/pull/1761)
+ * Make RoomListStore aware of Room.timeline events
+   [\#1756](https://github.com/matrix-org/matrix-react-sdk/pull/1756)
+ * improve origin check of ScalarMessaging postmessage API.
+   [\#1760](https://github.com/matrix-org/matrix-react-sdk/pull/1760)
+ * Implement global filter to deselect all tags
+   [\#1759](https://github.com/matrix-org/matrix-react-sdk/pull/1759)
+ * Don't show empty custom tags when filtering tags
+   [\#1758](https://github.com/matrix-org/matrix-react-sdk/pull/1758)
+ * Do not assume that tags have been removed
+   [\#1757](https://github.com/matrix-org/matrix-react-sdk/pull/1757)
+ * Change CSS class for message panel spinner
+   [\#1747](https://github.com/matrix-org/matrix-react-sdk/pull/1747)
+ * Remove RoomListStore listener
+   [\#1752](https://github.com/matrix-org/matrix-react-sdk/pull/1752)
+ * Implement GroupTile avatar dragging to TagPanel
+   [\#1751](https://github.com/matrix-org/matrix-react-sdk/pull/1751)
+ * Fix custom tags not being ordered manually
+   [\#1750](https://github.com/matrix-org/matrix-react-sdk/pull/1750)
+ * Store component state for editors
+   [\#1746](https://github.com/matrix-org/matrix-react-sdk/pull/1746)
+ * Give the login page its spinner back
+   [\#1745](https://github.com/matrix-org/matrix-react-sdk/pull/1745)
+ * Add context menu to TagTile
+   [\#1743](https://github.com/matrix-org/matrix-react-sdk/pull/1743)
+ * If a tag is unrecognised, assume manual ordering
+   [\#1748](https://github.com/matrix-org/matrix-react-sdk/pull/1748)
+ * Move RoomList state to RoomListStore
+   [\#1719](https://github.com/matrix-org/matrix-react-sdk/pull/1719)
+ * Move groups button to TagPanel
+   [\#1744](https://github.com/matrix-org/matrix-react-sdk/pull/1744)
+ * Add seconds to timestamp on hover
+   [\#1738](https://github.com/matrix-org/matrix-react-sdk/pull/1738)
+ * Do not truncate autocompleted users in composer
+   [\#1739](https://github.com/matrix-org/matrix-react-sdk/pull/1739)
+ * RoomView: guard against unmounting during peeking
+   [\#1737](https://github.com/matrix-org/matrix-react-sdk/pull/1737)
+ * Fix HS/IS URL reset when switching to Registration
+   [\#1736](https://github.com/matrix-org/matrix-react-sdk/pull/1736)
+ * Fix the reject/accept call buttons in canary (mk2)
+   [\#1734](https://github.com/matrix-org/matrix-react-sdk/pull/1734)
+ * Make ratelimitedfunc time from the function's end
+   [\#1731](https://github.com/matrix-org/matrix-react-sdk/pull/1731)
+ * Give dialogs a matrixClient context
+   [\#1735](https://github.com/matrix-org/matrix-react-sdk/pull/1735)
+ * Fix key bindings in address picker dialog
+   [\#1732](https://github.com/matrix-org/matrix-react-sdk/pull/1732)
+ * Try upgrading eslint-plugin-react
+   [\#1712](https://github.com/matrix-org/matrix-react-sdk/pull/1712)
+ * Fix display name change text
+   [\#1730](https://github.com/matrix-org/matrix-react-sdk/pull/1730)
+ * Persist contentState when sending SlashCommand via MessageComposerInput
+   [\#1721](https://github.com/matrix-org/matrix-react-sdk/pull/1721)
+ * This is actually MFileBody not MImageBody, change classname
+   [\#1726](https://github.com/matrix-org/matrix-react-sdk/pull/1726)
+ * Use invite_3pid prop of createRoom instead of manual invite after create
+   [\#1717](https://github.com/matrix-org/matrix-react-sdk/pull/1717)
+ * guard against m.room.aliases events with no keys (redaction?)
+   [\#1729](https://github.com/matrix-org/matrix-react-sdk/pull/1729)
+ * Fix not showing Invited section if all invites are 3PID
+   [\#1718](https://github.com/matrix-org/matrix-react-sdk/pull/1718)
+ * Fix Rich Replies on files
+   [\#1720](https://github.com/matrix-org/matrix-react-sdk/pull/1720)
+ * Update from Weblate.
+   [\#1728](https://github.com/matrix-org/matrix-react-sdk/pull/1728)
+ * Null guard against falsey (non-null) props.node, to make react happy
+   [\#1724](https://github.com/matrix-org/matrix-react-sdk/pull/1724)
+ * Use correct condition for getting account data after first sync
+   [\#1722](https://github.com/matrix-org/matrix-react-sdk/pull/1722)
+ * Fix order calculation logic when reordering a room
+   [\#1725](https://github.com/matrix-org/matrix-react-sdk/pull/1725)
+ * Linear Rich Quoting
+   [\#1715](https://github.com/matrix-org/matrix-react-sdk/pull/1715)
+ * Fix CreateGroupDialog issues
+   [\#1714](https://github.com/matrix-org/matrix-react-sdk/pull/1714)
+ * Show a warning if the user attempts to leave a room that is invite only
+   [\#1713](https://github.com/matrix-org/matrix-react-sdk/pull/1713)
+ * Swap RoomList to react-beautiful-dnd
+   [\#1711](https://github.com/matrix-org/matrix-react-sdk/pull/1711)
+ * don't pass back {} when we have no `org.matrix.room.color_scheme`
+   [\#1710](https://github.com/matrix-org/matrix-react-sdk/pull/1710)
+ * Don't paginate whilst decrypting events
+   [\#1700](https://github.com/matrix-org/matrix-react-sdk/pull/1700)
+ * Fall back for missing i18n plurals
+   [\#1699](https://github.com/matrix-org/matrix-react-sdk/pull/1699)
+ * Fix group store redundant requests
+   [\#1709](https://github.com/matrix-org/matrix-react-sdk/pull/1709)
+ * Ignore remote echos caused by this client
+   [\#1708](https://github.com/matrix-org/matrix-react-sdk/pull/1708)
+ * Replace TagPanel react-dnd with react-beautiful-dnd
+   [\#1705](https://github.com/matrix-org/matrix-react-sdk/pull/1705)
+ * Only set selected tags state when updating rooms
+   [\#1704](https://github.com/matrix-org/matrix-react-sdk/pull/1704)
+ * Add formatFullDateNoTime to DateUtils and stop passing 12/24h to DateSep
+   [\#1702](https://github.com/matrix-org/matrix-react-sdk/pull/1702)
+ * Fix autofocus on QuestionDialog
+   [\#1698](https://github.com/matrix-org/matrix-react-sdk/pull/1698)
+ * Iterative fixes on Rich Quoting
+   [\#1697](https://github.com/matrix-org/matrix-react-sdk/pull/1697)
+ * Fix missing negation
+   [\#1696](https://github.com/matrix-org/matrix-react-sdk/pull/1696)
+ * Add Analytics Info and add Piwik to SdkConfig.DEFAULTS
+   [\#1625](https://github.com/matrix-org/matrix-react-sdk/pull/1625)
+ * Attempt to re-register for a scalar token if ours is invalid
+   [\#1668](https://github.com/matrix-org/matrix-react-sdk/pull/1668)
+ * Normalise dialogs
+   [\#1674](https://github.com/matrix-org/matrix-react-sdk/pull/1674)
+ * Add 'send without verifying' to status bar
+   [\#1695](https://github.com/matrix-org/matrix-react-sdk/pull/1695)
+ * Implement Rich Quoting/Replies
+   [\#1660](https://github.com/matrix-org/matrix-react-sdk/pull/1660)
+ * Revert "MD-escape URLs/alises/user IDs prior to parsing markdown"
+   [\#1694](https://github.com/matrix-org/matrix-react-sdk/pull/1694)
+ * Cache isConfCallRoom
+   [\#1693](https://github.com/matrix-org/matrix-react-sdk/pull/1693)
+ * Improve performance of tag panel selection (when tags are selected)
+   [\#1687](https://github.com/matrix-org/matrix-react-sdk/pull/1687)
+ * Hide status bar on visible->hidden transition
+   [\#1680](https://github.com/matrix-org/matrix-react-sdk/pull/1680)
+ * [revived] Singularise unsent message prompt, if applicable
+   [\#1692](https://github.com/matrix-org/matrix-react-sdk/pull/1692)
+ * small refactor && warn on self-demotion
+   [\#1683](https://github.com/matrix-org/matrix-react-sdk/pull/1683)
+ * Remove use of deprecated React.PropTypes
+   [\#1677](https://github.com/matrix-org/matrix-react-sdk/pull/1677)
+ * only save RelatedGroupSettings if it was modified. Otherwise perms issue
+   [\#1691](https://github.com/matrix-org/matrix-react-sdk/pull/1691)
+ * Fix a couple more issues with granular settings
+   [\#1675](https://github.com/matrix-org/matrix-react-sdk/pull/1675)
+ * Allow argument to op slashcommand to be negative as PLs can be -ve
+   [\#1673](https://github.com/matrix-org/matrix-react-sdk/pull/1673)
+ * Update from Weblate.
+   [\#1645](https://github.com/matrix-org/matrix-react-sdk/pull/1645)
+ * make RoomDetailRow reusable for the Room Directory
+   [\#1624](https://github.com/matrix-org/matrix-react-sdk/pull/1624)
+ * Prefetch group data for all joined groups when RoomList mounts
+   [\#1686](https://github.com/matrix-org/matrix-react-sdk/pull/1686)
+ * Remove unused selectedRoom prop
+   [\#1690](https://github.com/matrix-org/matrix-react-sdk/pull/1690)
+ * Fix shift and shift-ctrl click in TagPanel
+   [\#1684](https://github.com/matrix-org/matrix-react-sdk/pull/1684)
+ * skip direct chats which either you or the target have left
+   [\#1344](https://github.com/matrix-org/matrix-react-sdk/pull/1344)
+ * Make scroll on paste in RTE compatible with https://github.com/vector-im
+   /riot-web/pull/5900
+   [\#1682](https://github.com/matrix-org/matrix-react-sdk/pull/1682)
+ * Remove extra full stop
+   [\#1685](https://github.com/matrix-org/matrix-react-sdk/pull/1685)
+ * Dedupe requests to fetch group profile data
+   [\#1666](https://github.com/matrix-org/matrix-react-sdk/pull/1666)
+ * Get Group profile from TagTile instead of TagPanel
+   [\#1667](https://github.com/matrix-org/matrix-react-sdk/pull/1667)
+ *  Fix leaking of GroupStore listeners in RoomList
+   [\#1664](https://github.com/matrix-org/matrix-react-sdk/pull/1664)
+ * Add option to also output untranslated string
+   [\#1658](https://github.com/matrix-org/matrix-react-sdk/pull/1658)
+ * Give the current theme to widgets and the integration manager
+   [\#1669](https://github.com/matrix-org/matrix-react-sdk/pull/1669)
+ * Fixes #1953 Allow multiple file uploads using drag & drop for RoomView
+   [\#1671](https://github.com/matrix-org/matrix-react-sdk/pull/1671)
+ * Fix issue with preview of phone number on register and waiting for sms code
+   confirmation code
+   [\#1670](https://github.com/matrix-org/matrix-react-sdk/pull/1670)
+ * Attempt to improve TagPanel performance
+   [\#1647](https://github.com/matrix-org/matrix-react-sdk/pull/1647)
+ * Fix one variant of a scroll jump that occurs when decrypting an m.text
+   [\#1656](https://github.com/matrix-org/matrix-react-sdk/pull/1656)
+ * Avoid NPEs by using ref method for collecting loggedInView in MatrixChat
+   [\#1665](https://github.com/matrix-org/matrix-react-sdk/pull/1665)
+ * DnD Ordered TagPanel
+   [\#1653](https://github.com/matrix-org/matrix-react-sdk/pull/1653)
+ * Update widget title on edit.
+   [\#1663](https://github.com/matrix-org/matrix-react-sdk/pull/1663)
+ * Set widget title
+   [\#1661](https://github.com/matrix-org/matrix-react-sdk/pull/1661)
+ * Display custom widget content titles
+   [\#1650](https://github.com/matrix-org/matrix-react-sdk/pull/1650)
+ * Add maximize / minimize apps drawer icons.
+   [\#1649](https://github.com/matrix-org/matrix-react-sdk/pull/1649)
+ * Warn when migrating e2e data to indexeddb
+   [\#1654](https://github.com/matrix-org/matrix-react-sdk/pull/1654)
+ * Don't Auto-show UnknownDeviceDialog
+   [\#1600](https://github.com/matrix-org/matrix-react-sdk/pull/1600)
+ * Remove logging.
+   [\#1655](https://github.com/matrix-org/matrix-react-sdk/pull/1655)
+ * Add messaging endpoint for room encryption status.
+   [\#1648](https://github.com/matrix-org/matrix-react-sdk/pull/1648)
+ * Add some missing translatable strings
+   [\#1588](https://github.com/matrix-org/matrix-react-sdk/pull/1588)
+ * Add widget -> riot postMessage API
+   [\#1640](https://github.com/matrix-org/matrix-react-sdk/pull/1640)
+ * Add some null checks
+   [\#1646](https://github.com/matrix-org/matrix-react-sdk/pull/1646)
+ * Implement shift-click and ctrl-click semantics for TP
+   [\#1641](https://github.com/matrix-org/matrix-react-sdk/pull/1641)
+ * Don't show group when clicking tag panel
+   [\#1642](https://github.com/matrix-org/matrix-react-sdk/pull/1642)
+ * Implement TagPanel (or LeftLeftPanel) for group filtering
+   [\#1639](https://github.com/matrix-org/matrix-react-sdk/pull/1639)
+ * Implement UI for using bulk device deletion API
+   [\#1638](https://github.com/matrix-org/matrix-react-sdk/pull/1638)
+ * Replace (IRC) with flair
+   [\#1637](https://github.com/matrix-org/matrix-react-sdk/pull/1637)
+ * Allow guests to view individual groups
+   [\#1635](https://github.com/matrix-org/matrix-react-sdk/pull/1635)
+ * Allow guest to see MyGroups, show ILAG when creating a group
+   [\#1636](https://github.com/matrix-org/matrix-react-sdk/pull/1636)
+ * Move group publication toggles to UserSettings
+   [\#1634](https://github.com/matrix-org/matrix-react-sdk/pull/1634)
+ * Pull the theme through the default process
+   [\#1617](https://github.com/matrix-org/matrix-react-sdk/pull/1617)
+ * Rebase ConfirmRedactDialog on QuestionDialog
+   [\#1630](https://github.com/matrix-org/matrix-react-sdk/pull/1630)
+ * Fix logging of missing substitution variables
+   [\#1629](https://github.com/matrix-org/matrix-react-sdk/pull/1629)
+ * Rename Related Groups to improve readability
+   [\#1632](https://github.com/matrix-org/matrix-react-sdk/pull/1632)
+ * Make PresenceLabel more easily translatable
+   [\#1616](https://github.com/matrix-org/matrix-react-sdk/pull/1616)
+ * Perform substitution on all parts, not just the last one
+   [\#1618](https://github.com/matrix-org/matrix-react-sdk/pull/1618)
+ * Send Access Token in Headers to help prevent it being spit out in errors
+   [\#1552](https://github.com/matrix-org/matrix-react-sdk/pull/1552)
+ * Add aria-labels to ActionButtons
+   [\#1628](https://github.com/matrix-org/matrix-react-sdk/pull/1628)
+ * MemberPresenceAvatar: fix null references
+   [\#1620](https://github.com/matrix-org/matrix-react-sdk/pull/1620)
+ * Disable presence controls if there's no presence
+   [\#1623](https://github.com/matrix-org/matrix-react-sdk/pull/1623)
+ * Fix GroupMemberList search for users without displayname
+   [\#1627](https://github.com/matrix-org/matrix-react-sdk/pull/1627)
+ * Remove redundant super class EventEmitter for FlairStore
+   [\#1626](https://github.com/matrix-org/matrix-react-sdk/pull/1626)
+ * Fix granular URL previews
+   [\#1622](https://github.com/matrix-org/matrix-react-sdk/pull/1622)
+ * Flairstore: Fix broken reference
+   [\#1619](https://github.com/matrix-org/matrix-react-sdk/pull/1619)
+ * Do something more sensible for sender profile name/aux opacity
+   [\#1615](https://github.com/matrix-org/matrix-react-sdk/pull/1615)
+ * Add eslint rule keyword-spacing
+   [\#1614](https://github.com/matrix-org/matrix-react-sdk/pull/1614)
+ * Fix various issues surrounding granular settings to date
+   [\#1613](https://github.com/matrix-org/matrix-react-sdk/pull/1613)
+ * differentiate between state events and message events
+   [\#1612](https://github.com/matrix-org/matrix-react-sdk/pull/1612)
+ * Refactor translations
+   [\#1608](https://github.com/matrix-org/matrix-react-sdk/pull/1608)
+ * Make TintableSvg links behave like normal image links
+   [\#1611](https://github.com/matrix-org/matrix-react-sdk/pull/1611)
+ * Fix linting errors.
+   [\#1610](https://github.com/matrix-org/matrix-react-sdk/pull/1610)
+ * Granular settings
+   [\#1516](https://github.com/matrix-org/matrix-react-sdk/pull/1516)
+ * Implement user-controlled presence
+   [\#1482](https://github.com/matrix-org/matrix-react-sdk/pull/1482)
+ * Edit widget icon styling
+   [\#1609](https://github.com/matrix-org/matrix-react-sdk/pull/1609)
+ * Attempt to improve textual power levels
+   [\#1607](https://github.com/matrix-org/matrix-react-sdk/pull/1607)
+ * Determine whether power level is custom once Roles have been determined
+   [\#1606](https://github.com/matrix-org/matrix-react-sdk/pull/1606)
+ * Status.im theme
+   [\#1605](https://github.com/matrix-org/matrix-react-sdk/pull/1605)
+ * Revert "Lowercase all usernames"
+   [\#1604](https://github.com/matrix-org/matrix-react-sdk/pull/1604)
+
+Changes in [0.11.4](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.11.4) (2018-02-09)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.11.3...v0.11.4)
+
+ * Add isUrlPermitted function to sanity check URLs
+
 Changes in [0.11.3](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.11.3) (2017-12-04)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.11.2...v0.11.3)

header

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2017, 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

jenkins.sh

@@ -11,8 +11,10 @@ set -x
 # install the other dependencies
 npm install
 
-# we may be using a dev branch of js-sdk in which case we need to build it
+scripts/fetchdep.sh matrix-org matrix-js-sdk
-(cd node_modules/matrix-js-sdk && npm install)
+rm -r node_modules/matrix-js-sdk || true
+ln -s ../matrix-js-sdk node_modules/matrix-js-sdk
+(cd matrix-js-sdk && npm install)
 
 # run the mocha tests
 npm run test -- --no-colors

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.10.7",
+  "version": "0.12.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -268,7 +268,7 @@
         "glob": {
           "version": "7.1.2",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=",
           "dev": true,
           "requires": {
             "fs.realpath": "1.0.0",
@@ -1203,10 +1203,7 @@
     "boom": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz",
-      "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=",
+      "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE="
-      "requires": {
-        "hoek": "4.2.0"
-      }
     },
     "brace-expansion": {
       "version": "1.1.8",
@@ -1238,6 +1235,12 @@
       "resolved": "https://registry.npmjs.org/browser-request/-/browser-request-0.3.3.tgz",
       "integrity": "sha1-ns5bWsqJopkyJC4Yv5M975h2zBc="
     },
+    "browser-stdout": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
+      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
+      "dev": true
+    },
     "browserify-aes": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-0.4.0.tgz",
@@ -1254,6 +1257,14 @@
       "dev": true,
       "requires": {
         "pako": "0.2.9"
+      },
+      "dependencies": {
+        "pako": {
+          "version": "0.2.9",
+          "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+          "integrity": "sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=",
+          "dev": true
+        }
       }
     },
     "buffer": {
@@ -1449,9 +1460,9 @@
       "dev": true
     },
     "commonmark": {
-      "version": "0.27.0",
+      "version": "0.28.1",
-      "resolved": "https://registry.npmjs.org/commonmark/-/commonmark-0.27.0.tgz",
+      "resolved": "https://registry.npmjs.org/commonmark/-/commonmark-0.28.1.tgz",
-      "integrity": "sha1-2GwmK5YoIelIPGnFR7xYhAwEezQ=",
+      "integrity": "sha1-Buq41SM4uDn6Gi11rwCF7tGxvq4=",
       "requires": {
         "entities": "1.1.1",
         "mdurl": "1.0.1",
@@ -1580,10 +1591,7 @@
         "boom": {
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/boom/-/boom-5.2.0.tgz",
-          "integrity": "sha512-Z5BTk6ZRe4tXXQlkqftmsAUANpXmuwlsF5Oov8ThoMbQRzdGTA1ngYRW160GexgOgjsFOKJz0LYhoNi+2AMBUw==",
+          "integrity": "sha512-Z5BTk6ZRe4tXXQlkqftmsAUANpXmuwlsF5Oov8ThoMbQRzdGTA1ngYRW160GexgOgjsFOKJz0LYhoNi+2AMBUw=="
-          "requires": {
-            "hoek": "4.2.0"
-          }
         }
       }
     },
@@ -1705,12 +1713,6 @@
       "integrity": "sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=",
       "dev": true
     },
-    "diff": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-1.4.0.tgz",
-      "integrity": "sha1-fyjS657nsVqX79ic5j3P2qPMur8=",
-      "dev": true
-    },
     "doctrine": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.0.0.tgz",
@@ -2139,7 +2141,7 @@
         "glob": {
           "version": "7.1.2",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=",
           "dev": true,
           "requires": {
             "fs.realpath": "1.0.0",
@@ -2183,15 +2185,26 @@
       }
     },
     "eslint-plugin-react": {
-      "version": "7.4.0",
+      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.7.0.tgz",
-      "integrity": "sha512-tvjU9u3VqmW2vVuYnE8Qptq+6ji4JltjOjJ9u7VAOxVYkUkyBZWRvNYKbDv5fN+L6wiA+4we9+qQahZ0m63XEA==",
+      "integrity": "sha512-KC7Snr4YsWZD5flu6A5c0AcIZidzW3Exbqp7OT67OaD2AppJtlBr/GuPrW/vaQM/yfZotEvKAdrxrO+v8vwYJA==",
       "dev": true,
       "requires": {
-        "doctrine": "2.0.0",
+        "doctrine": "2.1.0",
         "has": "1.0.1",
         "jsx-ast-utils": "2.0.1",
         "prop-types": "15.6.0"
+      },
+      "dependencies": {
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "dev": true,
+          "requires": {
+            "esutils": "2.0.2"
+          }
+        }
       }
     },
     "espree": {
@@ -2238,7 +2251,7 @@
     "estree-walker": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.5.0.tgz",
-      "integrity": "sha512-/bEAy+yKAZQrEWUhGmS3H9XpGqSDBtRzX0I2PgMw9kA2n1jN22uV5B5p7MFdZdvWdXCRJztXAfx6ZeRfgkEETg==",
+      "integrity": "sha1-quO1fELeuAEONJyJJGLw5xxd0ao=",
       "dev": true
     },
     "esutils": {
@@ -2554,6 +2567,22 @@
         }
       }
     },
+    "focus-trap": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-2.4.3.tgz",
+      "integrity": "sha512-sT5Ip9nyAIxWq8Apt1Fdv6yTci5GotaOtO5Ro1/+F3PizttNBcCYz8j/Qze54PPFK73KUbOqh++HUCiyNPqvhA==",
+      "requires": {
+        "tabbable": "1.1.2"
+      }
+    },
+    "focus-trap-react": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/focus-trap-react/-/focus-trap-react-3.1.2.tgz",
+      "integrity": "sha512-MoQmONoy9gRPyrC5DGezkcOMGgx7MtIOAQDHe098UtL2sA2vmucJwEmQisb+8LRXNYFHxuw5zJ1oLFeKu4Mteg==",
+      "requires": {
+        "focus-trap": "2.4.3"
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -2629,7 +2658,7 @@
     "fsevents": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.2.tgz",
-      "integrity": "sha512-Sn44E5wQW4bTHXvQmvSHwqbuiXtduD6Rrjm2ZtUEGbyrig+nUH3t/QD4M4/ZXViY556TBpRgZkHLDx3JxPwxiw==",
+      "integrity": "sha1-MoK3E/s62A7eDp/PRhG1qm/AM/Q=",
       "dev": true,
       "optional": true,
       "requires": {
@@ -3562,6 +3591,11 @@
         "assert-plus": "1.0.0"
       }
     },
+    "gfm.css": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/gfm.css/-/gfm.css-1.1.2.tgz",
+      "integrity": "sha512-KhK3rqxMj+UTLRxWnfUA5n8XZYMWfHrrcCxtWResYR2B3hWIqBM6v9FPGZSlVuX+ScLewizOvNkjYXuPs95ThQ=="
+    },
     "glob": {
       "version": "5.0.15",
       "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
@@ -3596,7 +3630,7 @@
     "globals": {
       "version": "9.18.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
-      "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==",
+      "integrity": "sha1-qjiWs+abSH8X4x7SFD1pqOMMLYo=",
       "dev": true
     },
     "globby": {
@@ -3616,7 +3650,7 @@
         "glob": {
           "version": "7.1.2",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=",
           "dev": true,
           "requires": {
             "fs.realpath": "1.0.0",
@@ -3635,12 +3669,6 @@
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
       "dev": true
     },
-    "growl": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/growl/-/growl-1.9.2.tgz",
-      "integrity": "sha1-Dqd0NxXbjY3ixe3hd14bRayFwC8=",
-      "dev": true
-    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -3709,19 +3737,24 @@
       "requires": {
         "boom": "4.3.1",
         "cryptiles": "3.1.2",
-        "hoek": "4.2.0",
         "sntp": "2.0.2"
       }
     },
-    "highlight.js": {
+    "he": {
-      "version": "8.9.1",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-8.9.1.tgz",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
-      "integrity": "sha1-uKnFSTISqTkvAiK2SclhFJfr+4g="
+      "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
+      "dev": true
     },
-    "hoek": {
+    "highlight.js": {
-      "version": "4.2.0",
+      "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
-      "integrity": "sha512-v0XCLxICi9nPfYrS9RL8HbYnXi9obYAeLbSP00BmnZwCK9+Ih9WOjoZ8YoHCoav2csqn4FOz4Orldsy2dmDwmQ=="
+      "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4="
+    },
+    "hoist-non-react-statics": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz",
+      "integrity": "sha512-6Bl6XsDT1ntE0lHbIhr4Kp2PGcleGZ66qu5Jqk8lc0Xc/IeG6gVLmwUGs/K0Us+L8VWoKgj0uWdPMataOsm31w=="
     },
     "home-or-tmp": {
       "version": "2.0.0",
@@ -3862,7 +3895,6 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
       "integrity": "sha1-nh9WrArNtr8wMwbzOL47IErmA2A=",
-      "dev": true,
       "requires": {
         "loose-envify": "1.3.1"
       }
@@ -4137,30 +4169,6 @@
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
-    "jade": {
-      "version": "0.26.3",
-      "resolved": "https://registry.npmjs.org/jade/-/jade-0.26.3.tgz",
-      "integrity": "sha1-jxDXl32NefL2/4YqgbBRPMslaGw=",
-      "dev": true,
-      "requires": {
-        "commander": "0.6.1",
-        "mkdirp": "0.3.0"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-0.6.1.tgz",
-          "integrity": "sha1-+mihT2qUXVTbvlDYzbMyDp47GgY=",
-          "dev": true
-        },
-        "mkdirp": {
-          "version": "0.3.0",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz",
-          "integrity": "sha1-G79asbqCevI1dRQ0kEJkVfSB/h4=",
-          "dev": true
-        }
-      }
-    },
     "jquery": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz",
@@ -4303,7 +4311,7 @@
         "glob": {
           "version": "7.1.2",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=",
           "dev": true,
           "requires": {
             "fs.realpath": "1.0.0",
@@ -4472,6 +4480,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
       "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
     },
+    "lodash-es": {
+      "version": "4.17.10",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.10.tgz",
+      "integrity": "sha512-iesFYPmxYYGTcmQK0sL8bX3TGHyM6b2qREaB4kamHfQyfPJP0xgoGxp19nsH16nsfquLdiyKyX3mQkfiSGV8Rg=="
+    },
     "lodash.assign": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
@@ -4547,17 +4560,28 @@
       "dev": true
     },
     "matrix-js-sdk": {
-      "version": "0.8.5",
+      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-0.8.5.tgz",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-0.10.1.tgz",
-      "integrity": "sha1-1ZAVTx53ADVyZw+p28rH5APnbk8=",
+      "integrity": "sha512-BLo+Okn2o///TyWBKtjFXvhlD32vGfr10eTE51hHx/jwaXO82VyGMzMi+IDPS4SDYUbvXI7PpamECeh9TXnV2w==",
       "requires": {
         "another-json": "0.2.0",
+        "babel-runtime": "6.26.0",
         "bluebird": "3.5.1",
         "browser-request": "0.3.3",
         "content-type": "1.0.4",
         "request": "2.83.0"
       }
     },
+    "matrix-mock-request": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/matrix-mock-request/-/matrix-mock-request-1.2.1.tgz",
+      "integrity": "sha1-2aWrqNPYJG6I/3YyWYuZwUE/QjI=",
+      "dev": true,
+      "requires": {
+        "bluebird": "3.5.1",
+        "expect": "1.20.2"
+      }
+    },
     "matrix-react-test-utils": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/matrix-react-test-utils/-/matrix-react-test-utils-0.1.1.tgz",
@@ -4579,6 +4603,11 @@
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
+    "memoize-one": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-3.1.1.tgz",
+      "integrity": "sha512-YqVh744GsMlZu6xkhGslPSqSurOv6P+kLN2J3ysBZfagLcL5FdRK/0UpgLoL8hwjjEvvAVkjJZyFP+1T6p1vgA=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -4632,7 +4661,7 @@
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=",
       "requires": {
         "brace-expansion": "1.1.8"
       }
@@ -4660,75 +4689,73 @@
       }
     },
     "mocha": {
-      "version": "2.5.3",
+      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/mocha/-/mocha-2.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-5.1.1.tgz",
-      "integrity": "sha1-FhvlvetJZ3HrmzV0UFC2IrWu/Fg=",
+      "integrity": "sha512-kKKs/H1KrMMQIEsWNxGmb4/BGsmj0dkeyotEvbrAuQ01FcWRLssUNXCEUZk6SZtyJBi6EE7SL0zDDtItw1rGhw==",
       "dev": true,
       "requires": {
-        "commander": "2.3.0",
+        "browser-stdout": "1.3.1",
-        "debug": "2.2.0",
+        "commander": "2.11.0",
-        "diff": "1.4.0",
+        "debug": "3.1.0",
-        "escape-string-regexp": "1.0.2",
+        "diff": "3.5.0",
-        "glob": "3.2.11",
+        "escape-string-regexp": "1.0.5",
-        "growl": "1.9.2",
+        "glob": "7.1.2",
-        "jade": "0.26.3",
+        "growl": "1.10.3",
+        "he": "1.1.1",
+        "minimatch": "3.0.4",
         "mkdirp": "0.5.1",
-        "supports-color": "1.2.0",
+        "supports-color": "4.4.0"
-        "to-iso-string": "0.0.2"
       },
       "dependencies": {
-        "commander": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.3.0.tgz",
-          "integrity": "sha1-/UMOiJgy7DU7ms0d4hfBHLPu+HM=",
-          "dev": true
-        },
         "debug": {
-          "version": "2.2.0",
+          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
           "dev": true,
           "requires": {
-            "ms": "0.7.1"
+            "ms": "2.0.0"
           }
         },
-        "escape-string-regexp": {
+        "diff": {
-          "version": "1.0.2",
+          "version": "3.5.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.2.tgz",
+          "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
-          "integrity": "sha1-Tbwv5nTnGUnK8/smlc5/LcHZqNE=",
+          "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
           "dev": true
         },
         "glob": {
-          "version": "3.2.11",
+          "version": "7.1.2",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha1-Spc/Y1uRkPcV0QmH1cAP0oFevj0=",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
           "dev": true,
           "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
             "inherits": "2.0.3",
-            "minimatch": "0.3.0"
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
           }
         },
-        "minimatch": {
+        "growl": {
-          "version": "0.3.0",
+          "version": "1.10.3",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.3.tgz",
-          "integrity": "sha1-J12O2qxPG7MyZHIInnlJyDlGmd0=",
+          "integrity": "sha512-hKlsbA5Vu3xsh1Cg3J7jSmX/WaW6A5oBeqzM88oNbCRQFz+zUaXm6yxS4RVytp1scBoJzSYl4YAEOQIt6O8V1Q==",
-          "dev": true,
+          "dev": true
-          "requires": {
-            "lru-cache": "2.2.4",
-            "sigmund": "1.0.1"
-          }
         },
-        "ms": {
+        "has-flag": {
-          "version": "0.7.1",
+          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
-          "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
+          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
           "dev": true
         },
         "supports-color": {
-          "version": "1.2.0",
+          "version": "4.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.4.0.tgz",
-          "integrity": "sha1-/x7R5hFp0Gs88tWI4YixjYhH4X4=",
+          "integrity": "sha512-rKC3+DyXWgK0ZLKwmRsrkyHVZAjNkfzeehuFWdGGcqGDTZFH73+RH6S/RDAAxl9GusSjZSUWYLmT9N5pzXFOXQ==",
-          "dev": true
+          "dev": true,
+          "requires": {
+            "has-flag": "2.0.0"
+          }
         }
       }
     },
@@ -4979,10 +5006,9 @@
       }
     },
     "pako": {
-      "version": "0.2.9",
+      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz",
-      "integrity": "sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=",
+      "integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg=="
-      "dev": true
     },
     "parallelshell": {
       "version": "3.0.2",
@@ -5205,10 +5231,23 @@
       "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
       "dev": true
     },
+    "raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw==",
+      "requires": {
+        "performance-now": "2.1.0"
+      }
+    },
+    "raf-schd": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-2.1.1.tgz",
+      "integrity": "sha512-ngcBQygUeE3kHlOaBSqgWKv7BT9kx5kQ6fAwFJRNRT7TD54M+hx1kpNHb8sONRskcYQedJg2RC2xKlAHRUQBig=="
+    },
     "randomatic": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz",
-      "integrity": "sha512-D5JUjPyJbaJDkuAazpVnSfVkLlpeO3wDlPROTMLGKG1zMFNFRgrciKo1ltz/AzNTkqE0HzDx655QOL51N06how==",
+      "integrity": "sha1-x6vpzIuHwLqodrGf3oP9RkeX44w=",
       "dev": true,
       "requires": {
         "is-number": "3.0.0",
@@ -5287,6 +5326,23 @@
       "integrity": "sha1-wStu/cIkfBDae4dw0YUICnsEcVY=",
       "dev": true
     },
+    "react-beautiful-dnd": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-4.0.1.tgz",
+      "integrity": "sha512-d73RMu4QOFCyjUELLWFyY/EuclnfqulI9pECx+2gIuJvV0ycf1uR88o+1x0RSB9ILD70inHMzCBKNkWVbbt+vA==",
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "invariant": "2.2.2",
+        "memoize-one": "3.1.1",
+        "prop-types": "15.6.0",
+        "raf-schd": "2.1.1",
+        "react-motion": "0.5.2",
+        "react-redux": "5.0.7",
+        "redux": "3.7.2",
+        "redux-thunk": "2.2.0",
+        "reselect": "3.0.1"
+      }
+    },
     "react-dom": {
       "version": "15.6.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.2.tgz",
@@ -5304,6 +5360,43 @@
         "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#b302279810d05319ac5ff1bd34910bff32325c7b"
       }
     },
+    "react-motion": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
+      "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
+      "requires": {
+        "performance-now": "0.2.0",
+        "prop-types": "15.6.0",
+        "raf": "3.4.0"
+      },
+      "dependencies": {
+        "performance-now": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+          "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
+        }
+      }
+    },
+    "react-redux": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz",
+      "integrity": "sha512-5VI8EV5hdgNgyjfmWzBbdrqUkrVRKlyTKk1sGH3jzM2M2Mhj/seQgPXaz6gVAj2lz/nz688AdTqMO18Lr24Zhg==",
+      "requires": {
+        "hoist-non-react-statics": "2.5.0",
+        "invariant": "2.2.2",
+        "lodash": "4.17.10",
+        "lodash-es": "4.17.10",
+        "loose-envify": "1.3.1",
+        "prop-types": "15.6.0"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.10",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+          "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
+        }
+      }
+    },
     "readable-stream": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
@@ -5350,6 +5443,22 @@
         "resolve": "1.4.0"
       }
     },
+    "redux": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz",
+      "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==",
+      "requires": {
+        "lodash": "4.17.4",
+        "lodash-es": "4.17.10",
+        "loose-envify": "1.3.1",
+        "symbol-observable": "1.2.0"
+      }
+    },
+    "redux-thunk": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.2.0.tgz",
+      "integrity": "sha1-5hWhbha0ehmlFXZhM9Hj6Zt4UuU="
+    },
     "regenerate": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.3.tgz",
@@ -5498,6 +5607,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "reselect": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-3.0.1.tgz",
+      "integrity": "sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc="
+    },
     "resolve": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.4.0.tgz",
@@ -5544,7 +5658,7 @@
         "glob": {
           "version": "7.1.2",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=",
           "dev": true,
           "requires": {
             "fs.realpath": "1.0.0",
@@ -5642,7 +5756,7 @@
         "glob": {
           "version": "7.1.2",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=",
           "dev": true,
           "requires": {
             "fs.realpath": "1.0.0",
@@ -5655,12 +5769,6 @@
         }
       }
     },
-    "sigmund": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-      "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=",
-      "dev": true
-    },
     "sinon": {
       "version": "1.17.7",
       "resolved": "https://registry.npmjs.org/sinon/-/sinon-1.17.7.tgz",
@@ -5688,10 +5796,7 @@
     "sntp": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/sntp/-/sntp-2.0.2.tgz",
-      "integrity": "sha1-UGQRDwr4X3z9t9a2ekACjOUrSys=",
+      "integrity": "sha1-UGQRDwr4X3z9t9a2ekACjOUrSys="
-      "requires": {
-        "hoek": "4.2.0"
-      }
     },
     "socket.io": {
       "version": "1.7.3",
@@ -5848,24 +5953,30 @@
       "dev": true
     },
     "source-map-loader": {
-      "version": "0.1.6",
+      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-0.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-0.2.3.tgz",
-      "integrity": "sha1-wJkD2m1zueU7ftjuUkVZcFHpjpE=",
+      "integrity": "sha512-MYbFX9DYxmTQFfy2v8FC1XZwpwHKYxg3SK8Wb7VPBKuhDjz8gi9re2819MsG4p49HDyiOSUKlmZ+nQBArW5CGw==",
       "dev": true,
       "requires": {
-        "async": "0.9.2",
+        "async": "2.6.0",
         "loader-utils": "0.2.17",
-        "source-map": "0.1.43"
+        "source-map": "0.6.1"
       },
       "dependencies": {
-        "source-map": {
+        "async": {
-          "version": "0.1.43",
+          "version": "2.6.0",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz",
-          "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
+          "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
           "dev": true,
           "requires": {
-            "amdefine": "1.0.1"
+            "lodash": "4.17.4"
           }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
         }
       }
     },
@@ -5917,7 +6028,7 @@
     "stream-http": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.7.2.tgz",
-      "integrity": "sha512-c0yTD2rbQzXtSsFSVhtpvY/vS6u066PcXOX9kBB3mSO76RiUQzL340uJkGBWnlBg4/HZzqiUXtaVA7wcRcJgEw==",
+      "integrity": "sha1-QKBQ7I3DtTsz2ZCUFcAsC/Gr+60=",
       "dev": true,
       "requires": {
         "builtin-status-codes": "3.0.0",
@@ -5983,6 +6094,16 @@
       "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
       "dev": true
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
+    "tabbable": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-1.1.2.tgz",
+      "integrity": "sha512-77oqsKEPrxIwgRcXUwipkj9W5ItO97L6eUT1Ar7vh+El16Zm4M6V+YU1cbipHEa6q0Yjw8O3Hoh8oRgatV5s7A=="
+    },
     "table": {
       "version": "3.8.3",
       "resolved": "https://registry.npmjs.org/table/-/table-3.8.3.tgz",
@@ -6111,12 +6232,6 @@
       "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=",
       "dev": true
     },
-    "to-iso-string": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/to-iso-string/-/to-iso-string-0.0.2.tgz",
-      "integrity": "sha1-TcGeZk38y+Jb2NtQiwDG2hWCVdE=",
-      "dev": true
-    },
     "tough-cookie": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.3.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.11.3",
+  "version": "0.12.5",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -25,7 +25,8 @@
     "release.sh",
     "scripts",
     "src",
-    "test"
+    "test",
+    "res"
   ],
   "bin": {
     "reskindex": "scripts/reskindex.js",
@@ -43,7 +44,7 @@
     "start": "parallelshell \"npm run build:watch\" \"npm run reskindex:watch\"",
     "lint": "eslint src/",
     "lintall": "eslint src/ test/",
-    "lintwithexclusions": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
+    "lintwithexclusions": "eslint --max-warnings 20 --ignore-path .eslintignore.errorfiles src test",
     "clean": "rimraf lib",
     "prepublish": "npm run clean && npm run build && git rev-parse HEAD > git-revision.txt",
     "test": "karma start --single-run=true --browsers ChromeHeadless",
@@ -65,21 +66,25 @@
     "file-saver": "^1.3.3",
     "filesize": "3.5.6",
     "flux": "2.1.1",
+    "focus-trap-react": "^3.0.5",
     "fuse.js": "^2.2.0",
+    "gemini-scrollbar": "matrix-org/gemini-scrollbar#b302279",
+    "gfm.css": "^1.1.1",
     "glob": "^5.0.14",
-    "highlight.js": "^8.9.1",
+    "highlight.js": "^9.0.0",
     "isomorphic-fetch": "^2.2.1",
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
-    "matrix-js-sdk": "0.9.2",
+    "lolex": "2.3.2",
+    "matrix-js-sdk": "0.10.2",
     "optimist": "^0.6.1",
+    "pako": "^1.0.5",
     "prop-types": "^15.5.8",
     "querystring": "^0.2.0",
-    "react": "^15.4.0",
+    "react": "^15.6.0",
     "react-addons-css-transition-group": "15.3.2",
-    "react-dnd": "^2.1.4",
+    "react-beautiful-dnd": "^4.0.1",
-    "react-dnd-html5-backend": "^2.1.2",
+    "react-dom": "^15.6.0",
-    "react-dom": "^15.4.0",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
     "sanitize-html": "^1.14.1",
     "text-encoding-utf-8": "^1.0.1",
@@ -107,7 +112,7 @@
     "eslint-config-google": "^0.7.1",
     "eslint-plugin-babel": "^4.0.1",
     "eslint-plugin-flowtype": "^2.30.0",
-    "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-react": "^7.7.0",
     "estree-walker": "^0.5.0",
     "expect": "^1.16.0",
     "flow-parser": "^0.57.3",
@@ -122,14 +127,15 @@
     "karma-spec-reporter": "^0.0.31",
     "karma-summary-reporter": "^1.3.3",
     "karma-webpack": "^1.7.0",
+    "matrix-mock-request": "^1.2.1",
     "matrix-react-test-utils": "^0.1.1",
-    "mocha": "^2.4.5",
+    "mocha": "^5.0.5",
     "parallelshell": "^3.0.2",
     "react-addons-test-utils": "^15.4.0",
     "require-json": "0.0.1",
     "rimraf": "^2.4.3",
     "sinon": "^1.17.3",
-    "source-map-loader": "^0.1.5",
+    "source-map-loader": "^0.2.3",
     "walk": "^2.3.9",
     "webpack": "^1.12.14"
   }

res/css/_common.scss

@@ -0,0 +1,362 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
+
+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.
+*/
+
+html {
+    /* hack to stop overscroll bounce on OSX and iOS.
+       N.B. Breaks things when we have legitimate horizontal overscroll */
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    font-family: $font-family;
+    font-size: 15px;
+    background-color: $primary-bg-color;
+    color: $primary-fg-color;
+    border: 0px;
+    margin: 0px;
+    /* This should render the fonts the same accross browsers */
+    -webkit-font-smoothing: subpixel-antialiased;
+}
+
+div.error, div.warning {
+    color: $warning-color;
+}
+
+h2 {
+    color: $primary-fg-color;
+    font-weight: 400;
+    font-size: 18px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+}
+
+a:hover,
+a:link,
+a:visited {
+    color: $accent-color;
+}
+
+input[type=text], input[type=password], textarea {
+    background-color: transparent;
+    color: $primary-fg-color;
+}
+
+input[type=text].error, input[type=password].error {
+    border: 1px solid $warning-color;
+}
+
+input[type=text]:focus, input[type=password]:focus, textarea:focus {
+    border: 1px solid $accent-color;
+    outline: none;
+    box-shadow: none;
+}
+
+/* Required by Firefox */
+textarea {
+    font-family: $font-family;
+}
+
+/* Prevent ugly dotted highlight around selected elements in Firefox */
+::-moz-focus-inner {
+    border: 0;
+}
+
+/* applied to side-panels and messagepanel when in RoomSettings */
+.mx_fadable {
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+}
+
+.mx_fadable.mx_fadable_faded {
+    opacity: 0.3;
+    pointer-events: none;
+}
+
+/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
+   Stop the scrollbar view from pushing out the container's overall sizing, which causes
+   flexbox to adapt to the new size and cause the view to keep growing.
+ */
+.gm-scrollbar-container .gm-scroll-view {
+    position: absolute;
+}
+
+/* Expand thumbs on hoverover */
+.gm-scrollbar {
+    border-radius: 5px ! important;
+}
+.gm-scrollbar.-vertical {
+    width: 6px;
+    transition: width 120ms ease-out ! important;
+}
+.gm-scrollbar.-vertical:hover,
+.gm-scrollbar.-vertical:active {
+    width: 8px;
+    transition: width 120ms ease-out ! important;
+}
+.gm-scrollbar.-horizontal {
+    height: 6px;
+    transition: height 120ms ease-out ! important;
+}
+.gm-scrollbar.-horizontal:hover,
+.gm-scrollbar.-horizontal:active {
+    height: 8px;
+    transition: height 120ms ease-out ! important;
+}
+
+// These are magic constants which are excluded from tinting, to let themes
+// (which only have CSS, unlike skins) tell the app what their non-tinted
+// colourscheme is by inspecting the stylesheet DOM.
+//
+// They are not used for layout!!
+#mx_theme_accentColor {
+    color: $accent-color;
+}
+
+#mx_theme_secondaryAccentColor {
+    color: $secondary-accent-color;
+}
+
+#mx_theme_tertiaryAccentColor {
+    color: $roomsublist-label-bg-color;
+}
+
+.mx_Dialog_wrapper {
+    position: fixed;
+    z-index: 4000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Spinner Dialog overide */
+.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
+    width: auto;
+    border-radius: 8px;
+    padding: 0px;
+    box-shadow: none;
+}
+
+/* View Source Dialog overide */
+.mx_Dialog_wrapper.mx_Dialog_viewsource .mx_Dialog {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.mx_Dialog {
+    background-color: $primary-bg-color;
+    color: $light-fg-color;
+    z-index: 4010;
+    font-weight: 300;
+    font-size: 15px;
+    position: relative;
+    padding-left: 58px;
+    padding-bottom: 36px;
+    width: 60%;
+    max-width: 704px;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
+    max-height: 80%;
+    overflow-y: auto;
+}
+
+.mx_Dialog_background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $dialog-background-bg-color;
+    opacity: 0.8;
+}
+
+.mx_Dialog_lightbox .mx_Dialog_background {
+    opacity: 0.85;
+    background-color: $lightbox-background-bg-color;
+}
+
+.mx_Dialog_lightbox .mx_Dialog {
+    border-radius: 0px;
+    background-color: transparent;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    pointer-events: none;
+}
+
+.mx_Dialog_cancelButton {
+    position: absolute;
+    right: 11px;
+    top: 13px;
+    cursor: pointer;
+}
+
+.mx_Dialog_cancelButton object {
+    pointer-events: none;
+}
+
+.mx_Dialog_content {
+    margin: 24px 58px 68px 0;
+    font-size: 14px;
+    color: $primary-fg-color;
+    word-wrap: break-word;
+}
+
+.mx_Dialog button, .mx_Dialog input[type="submit"] {
+    @mixin mx_DialogButton;
+    margin-left: 0px;
+    margin-right: 8px;
+
+    // flip colours for the secondary ones
+    font-weight: 600;
+    border: 1px solid $accent-color ! important;
+    color: $accent-color;
+    background-color: $accent-fg-color;
+}
+
+.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover {
+    @mixin mx_DialogButton_hover;
+}
+
+.mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus {
+    filter: brightness($focus-brightness);
+}
+
+.mx_Dialog button.mx_Dialog_primary, .mx_Dialog  input[type="submit"].mx_Dialog_primary {
+    color: $accent-fg-color;
+    background-color: $accent-color;
+}
+
+.mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
+    background-color: $warning-color;
+    border: solid 1px $warning-color;
+    color: $accent-fg-color;
+}
+
+.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
+    background-color: $light-fg-color;
+    border: solid 1px $light-fg-color;
+    opacity: 0.7;
+}
+
+.mx_Dialog_title {
+    min-height: 16px;
+    padding-top: 40px;
+    font-weight: bold;
+    font-size: 22px;
+    line-height: 1.4;
+    color: $primary-fg-color;
+}
+
+.mx_Dialog_title.danger {
+    color: $warning-color;
+}
+
+.mx_TextInputDialog_label {
+    text-align: left;
+    padding-bottom: 12px;
+}
+
+.mx_TextInputDialog_input {
+    font-size: 15px;
+    border-radius: 3px;
+    border: 1px solid $input-border-color;
+    padding: 9px;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
+}
+
+.mx_emojione {
+    height: 1em;
+    vertical-align: middle;
+}
+
+::-moz-selection {
+    background-color: $accent-color;
+    color: $selection-fg-color;
+}
+
+::selection {
+    background-color: $accent-color;
+    color: $selection-fg-color;
+}
+
+.mx_textButton {
+    @mixin mx_DialogButton_small;    
+}
+
+.mx_textButton:hover {
+    @mixin mx_DialogButton_hover;
+}
+
+.mx_button_row {
+    margin-top: 69px;
+}
+
+.mx_Beta {
+    color: red;
+    margin-right: 10px;
+    position: relative;
+    top: -3px;
+    background-color: white;
+    padding: 0 4px;
+    border-radius: 3px;
+    border: 1px solid darkred;
+    cursor: help;
+    transition-duration: 200ms;
+    font-size: smaller;
+    filter: opacity(0.5);
+}
+
+.mx_Beta:hover {
+    color: white;
+    border: 1px solid gray;
+    background-color: darkred;
+}
+
+.mx_TintableSvgButton {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+}
+
+.mx_TintableSvgButton object {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.mx_TintableSvgButton span {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    cursor: pointer;
+}

res/css/_components.scss

@@ -0,0 +1,110 @@
+// autogenerated by rethemendex.sh
+@import "./_common.scss";
+@import "./_fonts.scss";
+@import "./structures/_CompatibilityPage.scss";
+@import "./structures/_ContextualMenu.scss";
+@import "./structures/_CreateRoom.scss";
+@import "./structures/_FilePanel.scss";
+@import "./structures/_GroupView.scss";
+@import "./structures/_HomePage.scss";
+@import "./structures/_LeftPanel.scss";
+@import "./structures/_LoginBox.scss";
+@import "./structures/_MatrixChat.scss";
+@import "./structures/_MyGroups.scss";
+@import "./structures/_NotificationPanel.scss";
+@import "./structures/_RightPanel.scss";
+@import "./structures/_RoomDirectory.scss";
+@import "./structures/_RoomStatusBar.scss";
+@import "./structures/_RoomSubList.scss";
+@import "./structures/_RoomView.scss";
+@import "./structures/_SearchBox.scss";
+@import "./structures/_TagPanel.scss";
+@import "./structures/_UploadBar.scss";
+@import "./structures/_UserSettings.scss";
+@import "./structures/_ViewSource.scss";
+@import "./structures/login/_Login.scss";
+@import "./views/avatars/_BaseAvatar.scss";
+@import "./views/context_menus/_MessageContextMenu.scss";
+@import "./views/context_menus/_RoomTileContextMenu.scss";
+@import "./views/context_menus/_TagTileContextMenu.scss";
+@import "./views/dialogs/_BugReportDialog.scss";
+@import "./views/dialogs/_ChangelogDialog.scss";
+@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
+@import "./views/dialogs/_ChatInviteDialog.scss";
+@import "./views/dialogs/_ConfirmUserActionDialog.scss";
+@import "./views/dialogs/_CreateGroupDialog.scss";
+@import "./views/dialogs/_CreateRoomDialog.scss";
+@import "./views/dialogs/_DeactivateAccountDialog.scss";
+@import "./views/dialogs/_DevtoolsDialog.scss";
+@import "./views/dialogs/_EncryptedEventDialog.scss";
+@import "./views/dialogs/_GroupAddressPicker.scss";
+@import "./views/dialogs/_QuestionDialog.scss";
+@import "./views/dialogs/_SetEmailDialog.scss";
+@import "./views/dialogs/_SetMxIdDialog.scss";
+@import "./views/dialogs/_SetPasswordDialog.scss";
+@import "./views/dialogs/_UnknownDeviceDialog.scss";
+@import "./views/directory/_NetworkDropdown.scss";
+@import "./views/elements/_AccessibleButton.scss";
+@import "./views/elements/_AddressSelector.scss";
+@import "./views/elements/_AddressTile.scss";
+@import "./views/elements/_DirectorySearchBox.scss";
+@import "./views/elements/_Dropdown.scss";
+@import "./views/elements/_EditableItemList.scss";
+@import "./views/elements/_ImageView.scss";
+@import "./views/elements/_InlineSpinner.scss";
+@import "./views/elements/_MemberEventListSummary.scss";
+@import "./views/elements/_ProgressBar.scss";
+@import "./views/elements/_ReplyThread.scss";
+@import "./views/elements/_RichText.scss";
+@import "./views/elements/_RoleButton.scss";
+@import "./views/elements/_Spinner.scss";
+@import "./views/elements/_SyntaxHighlight.scss";
+@import "./views/elements/_ToolTipButton.scss";
+@import "./views/globals/_MatrixToolbar.scss";
+@import "./views/groups/_GroupPublicityToggle.scss";
+@import "./views/groups/_GroupRoomList.scss";
+@import "./views/groups/_GroupUserSettings.scss";
+@import "./views/login/_InteractiveAuthEntryComponents.scss";
+@import "./views/login/_ServerConfig.scss";
+@import "./views/messages/_DateSeparator.scss";
+@import "./views/messages/_MEmoteBody.scss";
+@import "./views/messages/_MFileBody.scss";
+@import "./views/messages/_MImageBody.scss";
+@import "./views/messages/_MNoticeBody.scss";
+@import "./views/messages/_MStickerBody.scss";
+@import "./views/messages/_MTextBody.scss";
+@import "./views/messages/_MessageTimestamp.scss";
+@import "./views/messages/_RoomAvatarEvent.scss";
+@import "./views/messages/_SenderProfile.scss";
+@import "./views/messages/_TextualEvent.scss";
+@import "./views/messages/_UnknownBody.scss";
+@import "./views/rooms/_AppsDrawer.scss";
+@import "./views/rooms/_Autocomplete.scss";
+@import "./views/rooms/_EntityTile.scss";
+@import "./views/rooms/_EventTile.scss";
+@import "./views/rooms/_LinkPreviewWidget.scss";
+@import "./views/rooms/_MemberDeviceInfo.scss";
+@import "./views/rooms/_MemberInfo.scss";
+@import "./views/rooms/_MemberList.scss";
+@import "./views/rooms/_MessageComposer.scss";
+@import "./views/rooms/_PinnedEventTile.scss";
+@import "./views/rooms/_PinnedEventsPanel.scss";
+@import "./views/rooms/_PresenceLabel.scss";
+@import "./views/rooms/_ReplyPreview.scss";
+@import "./views/rooms/_RoomDropTarget.scss";
+@import "./views/rooms/_RoomHeader.scss";
+@import "./views/rooms/_RoomList.scss";
+@import "./views/rooms/_RoomPreviewBar.scss";
+@import "./views/rooms/_RoomSettings.scss";
+@import "./views/rooms/_RoomTile.scss";
+@import "./views/rooms/_RoomTooltip.scss";
+@import "./views/rooms/_SearchBar.scss";
+@import "./views/rooms/_SearchableEntityList.scss";
+@import "./views/rooms/_Stickers.scss";
+@import "./views/rooms/_TopUnreadMessagesBar.scss";
+@import "./views/settings/_DevicesPanel.scss";
+@import "./views/settings/_IntegrationsManager.scss";
+@import "./views/settings/_Notifications.scss";
+@import "./views/voip/_CallView.scss";
+@import "./views/voip/_IncomingCallbox.scss";
+@import "./views/voip/_VideoView.scss";

res/css/_fonts.scss

@@ -0,0 +1,67 @@
+/*
+ * Open Sans
+ * Includes extended Latin, Greek, Cyrillic and Vietnamese character sets
+ */
+
+/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
+ */
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
+    font-weight: 700;
+    font-style: italic;
+}
+
+/*
+ * Fira Mono
+ * Used for monospace copy, i.e. code
+ */
+
+@font-face {
+    font-family: 'Fira Mono';
+    src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Mono';
+    src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}

res/css/rethemendex.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+cd `dirname $0`
+
+{
+    echo "// autogenerated by rethemendex.sh"
+
+    # we used to have exclude /themes from the find at this point.
+    # as themes are no longer a spurious subdirectory of css/, we don't
+    # need it any more.
+    find . -iname _\*.scss | fgrep -v _components.scss | LC_ALL=C sort |
+        while read i; do
+            echo "@import \"$i\";"
+        done
+} > _components.scss

res/css/structures/_CompatibilityPage.scss

@@ -0,0 +1,19 @@
+.mx_CompatibilityPage {
+    width: 100%;
+    height: 100%;
+    background-color: #e55;
+}
+
+.mx_CompatibilityPage_box {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 500px;
+    height: 300px;
+    border: 1px solid;
+    padding: 10px;
+    background-color: #fcc;
+}

res/css/structures/_ContextualMenu.scss

@@ -0,0 +1,160 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_ContextualMenu_wrapper {
+    position: fixed;
+    z-index: 2000;
+}
+
+.mx_ContextualMenu_background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 1.0;
+    z-index: 2000;
+}
+
+.mx_ContextualMenu {
+    border: solid 1px $menu-border-color;
+    border-radius: 4px;
+    background-color: $menu-bg-color;
+    color: $primary-fg-color;
+    position: absolute;
+    padding: 6px;
+	font-size: 14px;
+    z-index: 2001;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_right {
+    right: 8px;
+}
+
+.mx_ContextualMenu_chevron_right {
+    position: absolute;
+    right: -8px;
+    top: 0px;
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-left: 8px solid $menu-border-color;
+    border-bottom: 8px solid transparent;
+}
+
+.mx_ContextualMenu_chevron_right:after {
+    content:'';
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-left: 7px solid $menu-bg-color;
+    border-bottom: 7px solid transparent;
+    position:absolute;
+    top: -7px;
+    right: 1px;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_left {
+    left: 8px;
+}
+
+.mx_ContextualMenu_chevron_left {
+    position: absolute;
+    left: -8px;
+    top: 0px;
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-right: 8px solid $menu-border-color;
+    border-bottom: 8px solid transparent;
+}
+
+.mx_ContextualMenu_chevron_left:after{
+    content:'';
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-right: 7px solid $menu-bg-color;
+    border-bottom: 7px solid transparent;
+    position:absolute;
+    top: -7px;
+    left: 1px;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_top {
+    top: 8px;
+}
+
+.mx_ContextualMenu_chevron_top {
+    position: absolute;
+    left: 0px;
+    top: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-bottom: 8px solid $menu-border-color;
+    border-right: 8px solid transparent;
+}
+
+.mx_ContextualMenu_chevron_top:after{
+    content:'';
+    width: 0;
+    height: 0;
+    border-left: 7px solid transparent;
+    border-bottom: 7px solid $menu-bg-color;
+    border-right: 7px solid transparent;
+    position:absolute;
+    left: -7px;
+    top: 1px;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_bottom {
+    bottom: 8px;
+}
+
+.mx_ContextualMenu_chevron_bottom {
+    position: absolute;
+    left: 0px;
+    bottom: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-top: 8px solid $menu-border-color;
+    border-right: 8px solid transparent;
+}
+
+.mx_ContextualMenu_chevron_bottom:after{
+    content:'';
+    width: 0;
+    height: 0;
+    border-left: 7px solid transparent;
+    border-top: 7px solid $menu-bg-color;
+    border-right: 7px solid transparent;
+    position:absolute;
+    left: -7px;
+    bottom: 1px;
+}
+
+.mx_ContextualMenu_field {
+    padding: 3px 6px 3px 6px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.mx_ContextualMenu_spinner {
+    display: block;
+    margin: 0 auto;
+}

res/css/structures/_CreateRoom.scss

@@ -0,0 +1,37 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_CreateRoom {
+    width: 960px;
+    margin-left: auto;
+    margin-right: auto;
+    color: $primary-fg-color;
+}
+
+.mx_CreateRoom input,
+.mx_CreateRoom textarea  {
+    border-radius: 3px;
+    border: 1px solid $strong-input-border-color;
+    font-weight: 300;
+    font-size: 13px;
+    padding: 9px;
+    margin-top: 6px;
+}
+
+.mx_CreateRoom_description {
+    width: 330px;
+}
+

res/css/structures/_FilePanel.scss

@@ -0,0 +1,114 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+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_FilePanel {
+    order: 2;
+
+    flex: 1 1 0;
+
+    width: 100%;
+
+    overflow-y: auto;
+}
+
+.mx_FilePanel .mx_RoomView_messageListWrapper {
+    margin-right: 20px;
+}
+
+.mx_FilePanel .mx_RoomView_MessageList h2 {
+    display: none;
+}
+
+/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+   we should make EventTile a base CSS class and customise it specifically
+   for usage in {Message,File,Notification}Panel. */
+
+.mx_FilePanel .mx_EventTile_avatar {
+    display: none;
+}
+
+/* Overrides for the attachment body tiles */
+
+.mx_FilePanel .mx_EventTile {
+    word-break: break-word;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody {
+    margin-right: 0px;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
+    display: flex;
+    font-size: 14px;
+    color: $event-timestamp-color;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MFileBody_downloadLink {
+    flex: 1 1 auto;
+    color: $light-fg-color;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
+    flex: 1 0 0;
+    font-size: 11px;
+    text-align: right;
+    white-space: nowrap;
+}
+
+/* Overides for the sender details line */
+
+.mx_FilePanel .mx_EventTile_senderDetails {
+    display: flex;
+    margin-top: -2px;
+}
+
+.mx_FilePanel .mx_EventTile_senderDetailsLink {
+    text-decoration: none;
+}
+
+.mx_FilePanel .mx_EventTile .mx_SenderProfile {
+    flex: 1 1 auto;
+    line-height: initial;
+    padding: 0px;
+    font-size: 11px;
+    opacity: 1.0;
+    color: $event-timestamp-color;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
+    flex: 1 0 0;
+    text-align: right;
+    visibility: visible;
+    position: initial;
+    font-size: 11px;
+    opacity: 1.0;
+    color: $event-timestamp-color;
+}
+
+/* Overrides for the wrappers around the body tile */
+
+.mx_FilePanel .mx_EventTile_line {
+    margin-right: 0px;
+    padding-left: 0px;
+}
+
+.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: $primary-bg-color;
+}
+
+.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
+    padding-left: 0px;
+}

res/css/structures/_GroupView.scss

@@ -0,0 +1,349 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+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_GroupView {
+    max-width: 960px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.mx_GroupView_error {
+    margin: auto;
+}
+
+.mx_GroupView_header {
+    max-width: 960px;
+    min-height: 70px;
+    align-items: center;
+    display: flex;
+    padding-bottom: 10px;
+}
+
+.mx_GroupView_header_view {
+    border-bottom: 1px solid $primary-hairline-color;
+    padding-bottom: 0px;
+}
+
+.mx_GroupView_header_avatar, .mx_GroupView_header_info {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.mx_GroupHeader_button {
+    margin-left: 12px;
+    cursor: pointer;
+}
+
+.mx_GroupHeader_button object {
+    // prevents clicks from being swallowed by svg in 'object' tag
+    pointer-events: none;
+}
+
+.mx_GroupView_editable {
+    border-bottom: 1px solid $strong-input-border-color ! important;
+    min-width: 150px;
+    cursor: text;
+}
+
+.mx_GroupView_editable:focus {
+    border-bottom: 1px solid $accent-color ! important;
+    outline: none;
+    box-shadow: none;
+}
+
+.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) {
+    color: $accent-color;
+    cursor: pointer;
+}
+
+.mx_GroupView_avatarPicker {
+    position: relative;
+}
+
+.mx_GroupView_avatarPicker_edit {
+    position: absolute;
+    top: 50px;
+    left: 15px;
+}
+
+.mx_GroupView_avatarPicker .mx_Spinner {
+    width: 48px;
+    height: 48px ! important;
+}
+
+.mx_GroupView_header_leftCol {
+    flex: 1;
+
+    overflow: hidden;
+}
+
+.mx_GroupView_header_rightCol {
+    display: flex;
+    align-items: center;
+}
+
+.mx_GroupView_textButton {
+    display: inline-block;
+}
+
+.mx_GroupView_header_groupid {
+    font-weight: normal;
+    font-size: initial;
+    padding-left: 10px;
+}
+
+.mx_GroupView_header_name {
+    vertical-align: middle;
+    width: 100%;
+    height: 31px;
+    overflow: hidden;
+    color: $primary-fg-color;
+    font-weight: bold;
+    font-size: 22px;
+    padding-left: 19px;
+    padding-right: 16px;
+    /* why isn't text-overflow working? */
+    text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;
+}
+
+.mx_GroupView_header_shortDesc {
+    vertical-align: bottom;
+    float: left;
+    max-height: 42px;
+    color: $settings-grey-fg-color;
+    font-weight: 300;
+    font-size: 13px;
+    padding-left: 19px;
+    margin-right: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;
+}
+
+.mx_GroupView_avatarPicker_label {
+    cursor: pointer;
+}
+
+.mx_GroupView_cancelButton {
+    padding-left: 8px;
+}
+
+.mx_GroupView_cancelButton img {
+    position: relative;
+    top: 5px;
+}
+
+.mx_GroupView input[type='radio'] {
+    margin: 10px 10px 0px 10px;
+}
+
+.mx_GroupView_label_text {
+    display: inline-block;
+    max-width: 80%;
+    vertical-align: 0.1em;
+    line-height: 2em;
+}
+
+.mx_GroupView_body  {
+    flex-grow: 1;
+}
+
+.mx_GroupView_rooms {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 200px;
+    user-select: none;
+}
+
+.mx_GroupView h3 {
+    text-transform: uppercase;
+    color: $h3-color;
+    font-weight: 600;
+    font-size: 13px;
+    margin-bottom: 10px;
+}
+
+.mx_GroupView_rooms_header .mx_AccessibleButton {
+    padding-left: 14px;
+    margin-bottom: 14px;
+    height: 24px;
+}
+
+.mx_GroupView_group {
+    border-top: 1px solid $primary-hairline-color;
+}
+
+.mx_GroupView_group_disabled {
+    opacity: 0.3;
+    pointer-events: none;
+}
+
+.mx_GroupView_rooms_header_addRow_button {
+    display: inline-block;
+}
+
+.mx_GroupView_rooms_header_addRow_button object {
+    pointer-events: none;
+}
+
+.mx_GroupView_rooms_header_addRow_label {
+    display: inline-block;
+    vertical-align: top;
+    line-height: 24px;
+    padding-left: 28px;
+    color: $accent-color;
+}
+
+.mx_GroupView_rooms .mx_RoomDetailList {
+    flex-grow: 1;
+    border-top: 1px solid $primary-hairline-color;
+    padding-top: 10px;
+    word-break: break-word;
+}
+
+.mx_GroupView .mx_RoomView_messageListWrapper {
+    justify-content: flex-start;
+}
+
+.mx_GroupView_membershipSection {
+    color: $greyed-fg-color;
+    margin-top: 10px;
+}
+
+.mx_GroupView_membershipSubSection {
+    justify-content: space-between;
+    display: flex;
+}
+
+.mx_GroupView_membershipSubSection .mx_Spinner {
+    justify-content: flex-end;
+}
+
+.mx_GroupView_membershipSection_description {
+    /* To match textButton */
+    line-height: 34px;
+}
+
+.mx_GroupView_membershipSection_description .mx_BaseAvatar {
+    margin-right: 10px;
+}
+
+.mx_GroupView_membershipSection .mx_GroupView_textButton {
+    margin-right: 0px;
+    margin-top: 0px;
+    margin-left: 8px;
+}
+
+.mx_GroupView_memberSettings_toggle label {
+    cursor: pointer;
+    user-select: none;
+}
+
+.mx_GroupView_memberSettings input {
+    margin-right: 6px;
+}
+
+.mx_GroupView_featuredThings {
+    margin-top: 20px;
+}
+
+.mx_GroupView_featuredThings_header {
+    font-weight: bold;
+    font-size: 120%;
+    margin-bottom: 20px;
+}
+
+.mx_GroupView_featuredThings_category {
+    font-weight: bold;
+    font-size: 110%;
+    margin-top: 10px;
+}
+
+.mx_GroupView_featuredThings_container {
+    display: flex;
+}
+
+.mx_GroupView_featuredThings_addButton,
+.mx_GroupView_featuredThing {
+    display: table-cell;
+    text-align: center;
+
+    width: 100px;
+    margin: 0px 20px;
+}
+
+.mx_GroupView_featuredThing {
+    position: relative;
+}
+
+.mx_GroupView_featuredThing .mx_GroupView_featuredThing_deleteButton {
+    position: absolute;
+    top: -7px;
+    right: 11px;
+    opacity: 0.4;
+}
+
+.mx_GroupView_featuredThing .mx_BaseAvatar {
+    /* To prevent misalignment with mx_TintableSvg (in addButton) */
+    vertical-align: initial;
+}
+
+.mx_GroupView_featuredThings_addButton object {
+    pointer-events: none;
+}
+
+.mx_GroupView_featuredThing_name {
+    word-wrap: break-word;
+}
+
+.mx_GroupView_uploadInput {
+    display: none;
+}
+
+.mx_GroupView_body .gm-scroll-view > *{
+    margin: 11px 50px 0px 68px;
+}
+
+.mx_GroupView_groupDesc textarea {
+    width: 100%;
+    max-width: 100%;
+    height: 150px;
+}
+
+.mx_GroupView_groupDesc_placeholder,
+.mx_GroupView_changeDelayWarning {
+    background-color: $info-plinth-bg-color;
+    color: $info-plinth-fg-color;
+    border-radius: 10px;
+    text-align: center;
+
+    margin: 20px 0px;
+}
+
+.mx_GroupView_groupDesc_placeholder {
+    padding: 100px 20px;
+    cursor: pointer;
+}
+
+.mx_GroupView_changeDelayWarning {
+    padding: 40px 20px;
+}

res/css/structures/_HomePage.scss

@@ -0,0 +1,35 @@
+/*
+Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+
+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_HomePage {
+    max-width: 960px;
+    width: 100%;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.mx_HomePage iframe {
+    display: block;
+	width: 100%;
+	height: 100%;
+	border: 0px;
+}
+
+.mx_HomePage_body {
+//  margin-left: 63px;
+}

res/css/structures/_LeftPanel.scss

@@ -0,0 +1,129 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_LeftPanel {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_LeftPanel_container {
+    display: flex;
+    /* LeftPanel 235px */
+    flex: 0 0 235px;
+}
+
+.mx_LeftPanel_container.mx_LeftPanel_container_hasTagPanel {
+    /* TagPanel 60px + LeftPanel 235px */
+    flex: 0 0 295px;
+}
+
+.mx_LeftPanel_container_collapsed {
+    /* Collapsed LeftPanel 60px */
+    flex: 0 0 60px;
+}
+
+.mx_LeftPanel_container_collapsed.mx_LeftPanel_container_hasTagPanel {
+    /* TagPanel 60px + Collapsed LeftPanel 60px */
+    flex: 0 0 120px;
+}
+
+.mx_LeftPanel_hideButton {
+    position: absolute;
+    top: 10px;
+    right: 0px;
+    padding: 8px;
+    cursor: pointer;
+}
+
+.mx_LeftPanel_callView {
+
+}
+
+.mx_LeftPanel .mx_RoomList_scrollbar {
+    order: 1;
+
+    flex: 1 1 0;
+
+    overflow-y: auto;
+    z-index: 6;
+}
+
+.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
+   flex: 0 0 160px;
+   margin-bottom: 9px;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu {
+    order: 3;
+
+    border-top: 1px solid $panel-divider-color;
+    margin-left: 16px; /* gutter */
+    margin-right: 16px; /* gutter */
+    flex: 0 0 60px;
+    z-index: 1;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_options {
+    margin-top: 18px;
+}
+
+.mx_BottomLeftMenu_options object {
+    pointer-events: none;
+}
+
+.collapsed .mx_RoleButton {
+    margin-right: 0px ! important;
+    padding-top: 3px ! important;
+    padding-bottom: 3px ! important;
+}
+
+.mx_BottomLeftMenu_options > div {
+    display: inline-block;
+}
+
+.mx_BottomLeftMenu_options .mx_RoleButton {
+    margin-left: 0px;
+    margin-right: 10px;
+    height: 30px;
+}
+
+.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {
+    float: right;
+}
+
+.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton {
+    margin-right: 0px;
+}
+
+.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
+    float: none;
+}
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_LeftPanel .mx_BottomLeftMenu {
+        flex: 0 0 50px;
+    }
+
+    .mx_LeftPanel.collapsed .mx_BottomLeftMenu {
+        flex: 0 0 160px;
+    }
+
+    .mx_LeftPanel .mx_BottomLeftMenu_options {
+        margin-top: 12px;
+    }
+}

res/css/structures/_LoginBox.scss

@@ -0,0 +1,47 @@
+/*
+Copyright 2017 OpenMarket Ltd
+
+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_LoginBox {
+    min-height: 24px;
+    height: unset !important;
+    padding-top: 13px !important;
+    padding-bottom: 14px !important;
+}
+
+.mx_LoginBox_loginButton_wrapper {
+    text-align: center;
+    width: 100%;
+}
+
+.mx_LoginBox_loginButton,
+.mx_LoginBox_registerButton {
+    margin-top: 3px;
+    height: 40px;
+    border: 0px;
+    border-radius: 40px;
+    margin-left: 4px;
+    margin-right: 4px;
+    min-width: 80px;
+
+    background-color: $accent-color;
+    color: $primary-bg-color;
+
+    cursor: pointer;
+
+    font-size: 15px;
+    padding: 0 11px;
+    word-break: break-word;
+}

res/css/structures/_MatrixChat.scss

@@ -0,0 +1,104 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_MatrixChat_splash {
+    position: relative;
+    height: 100%;
+}
+
+.mx_MatrixChat_splashButtons {
+    text-align: center;
+    width: 100%;
+    position: absolute;
+    bottom: 30px;
+}
+
+.mx_MatrixChat_wrapper {
+    display: flex;
+
+    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+}
+
+.mx_MatrixToolbar {
+    order: 1;
+
+    height: 40px;
+}
+
+.mx_MatrixChat_toolbarShowing {
+    height: auto;
+}
+
+.mx_MatrixChat {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+
+    order: 2;
+
+    flex: 1;
+}
+
+.mx_MatrixChat .mx_LeftPanel {
+    order: 1;
+
+    background-color: $secondary-accent-color;
+
+    flex: 0 0 235px;
+}
+
+.mx_MatrixChat .mx_LeftPanel.collapsed {
+    flex: 0 0 60px;
+}
+
+.mx_MatrixChat .mx_MatrixChat_middlePanel {
+    order: 2;
+
+    padding-left: 20px;
+    padding-right: 22px;
+    background-color: $primary-bg-color;
+
+    flex: 1;
+
+    /* Experimental fix for https://github.com/vector-im/vector-web/issues/947
+       and https://github.com/vector-im/vector-web/issues/946.
+       Empirically this stops the MessagePanel's width exploding outwards when
+       gemini is in 'prevented' mode
+       */
+    overflow-x: auto;
+
+    display: flex;
+
+    /* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
+       needed height 100% all the way down to the HomePage. Height does not
+       have to be auto, empirically.
+    */
+    height: 100%;
+}
+
+.mx_MatrixChat .mx_RightPanel {
+    order: 3;
+
+    flex: 0 0 235px;
+}
+
+.mx_MatrixChat .mx_RightPanel.collapsed {
+    flex: 0 0 122px;
+}

res/css/structures/_MyGroups.scss

@@ -0,0 +1,151 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+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_MyGroups {
+    max-width: 960px;
+    margin-left: auto;
+    margin-right: auto;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_MyGroups .mx_RoomHeader_simpleHeader {
+    margin-left: 0px;
+}
+
+.mx_MyGroups_header {
+    /* Keep mid-point of create button aligned with icon in page header */
+    margin-left: 2px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.mx_MyGroups_headerCard {
+    flex: 1 0 50%;
+    margin-bottom: 30px;
+    min-width: 400px;
+    display: flex;
+    align-items: center;
+}
+
+.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
+    margin-right: 13px;
+    height: 50px;
+}
+
+.mx_MyGroups_headerCard_button object {
+    /* Otherwise the SVG object absorbs clicks and the button doesn't work */
+    pointer-events: none;
+}
+
+.mx_MyGroups_headerCard_header {
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.mx_MyGroups_headerCard_content {
+    padding-right: 15px;
+}
+
+/* Until the button is wired up */
+.mx_MyGroups_joinBox {
+    visibility: hidden;
+
+    /* When joinBox wraps onto its own row, it should take up zero height so
+       that there isn't an awkward gap between MyGroups_createBox and
+       MyGroups_content.
+    */
+    height: 0px;
+    margin: 0px;
+}
+
+.mx_MyGroups_content {
+    margin-left: 2px;
+
+    flex: 1 0 0;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_MyGroups_placeholder {
+    background-color: $info-plinth-bg-color;
+    color: $info-plinth-fg-color;
+    line-height: 400px;
+    border-radius: 10px;
+    text-align: center;
+}
+
+.mx_MyGroups_joinedGroups {
+    border-top: 1px solid $primary-hairline-color;
+    overflow-x: hidden;
+
+    display: flex;
+    flex-direction: row;
+    flex-flow: wrap;
+    align-content: flex-start;
+}
+
+.mx_MyGroups_joinedGroups .mx_GroupTile {
+    min-width: 300px;
+    max-width: 33%;
+    flex: 1 0 300px;
+    height: 75px;
+    margin: 10px 0px;
+    display: flex;
+    align-items: flex-start;
+    cursor: pointer;
+}
+
+.mx_GroupTile_avatar {
+    cursor: grab, -webkit-grab;
+}
+
+.mx_GroupTile_profile {
+    margin-left: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.mx_GroupTile_profile .mx_GroupTile_name,
+.mx_GroupTile_profile .mx_GroupTile_groupId,
+.mx_GroupTile_profile .mx_GroupTile_desc {
+    padding-right: 10px;
+}
+
+.mx_GroupTile_profile .mx_GroupTile_name {
+    margin: 0px;
+    font-size: 15px;
+}
+
+.mx_GroupTile_profile .mx_GroupTile_groupId {
+    font-size: 13px;
+}
+
+.mx_GroupTile_profile .mx_GroupTile_desc {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    font-size: 13px;
+    max-height: 36px;
+    overflow: hidden;
+}
+
+.mx_GroupTile_profile .mx_GroupTile_groupId {
+    opacity: 0.7;
+}

res/css/structures/_NotificationPanel.scss

@@ -0,0 +1,100 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_NotificationPanel {
+    order: 2;
+
+    flex: 1 1 0;
+
+    width: 100%;
+
+    overflow-y: auto;
+}
+
+.mx_NotificationPanel .mx_RoomView_messageListWrapper {
+    margin-right: 20px;
+}
+
+.mx_NotificationPanel .mx_RoomView_MessageList h2 {
+    margin-left: 0px;
+}
+
+/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+   we should make EventTile a base CSS class and customise it specifically
+   for usage in {Message,File,Notification}Panel. */
+
+.mx_NotificationPanel .mx_EventTile {
+    word-break: break-word;
+}
+
+.mx_NotificationPanel .mx_EventTile_roomName {
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.mx_NotificationPanel .mx_EventTile_roomName a {
+    color: $primary-fg-color;
+}
+
+.mx_NotificationPanel .mx_EventTile_avatar {
+    top: 8px;
+    left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
+    color: $primary-fg-color;
+    font-size: 12px;
+    display: inline;
+    padding-left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile_senderDetails {
+    padding-left: 32px;
+    padding-top: 8px;
+    position: relative;
+}
+
+.mx_NotificationPanel .mx_EventTile_roomName a,
+.mx_NotificationPanel .mx_EventTile_senderDetails a {
+    text-decoration: none ! important;
+}
+
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
+    visibility: visible;
+    position: initial;
+    display: inline;
+}
+
+.mx_NotificationPanel .mx_EventTile_line {
+    margin-right: 0px;
+    padding-left: 32px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    padding-right: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: $primary-bg-color;
+}
+
+.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
+    padding-left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile_content {
+    margin-right: 0px;
+}

res/css/structures/_RightPanel.scss

@@ -0,0 +1,133 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_RightPanel {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_RightPanel_header {
+    order: 1;
+
+    border-bottom: 1px solid $primary-hairline-color;
+    margin-right: 20px;
+
+    flex: 0 0 70px;
+}
+
+/** Fixme - factor this out with the main header **/
+
+.mx_RightPanel_headerButtonGroup {
+    margin-top: 6px;
+    display: flex;
+    width: 100%;
+    background-color: $primary-bg-color;
+    margin-left: 0px;
+}
+
+.mx_RightPanel_headerButton {
+    cursor: pointer;
+    flex: 0 0 auto;
+    vertical-align: top;
+    padding-left: 4px;
+    padding-right: 5px;
+    text-align: center;
+    position: relative;
+}
+
+.mx_RightPanel_headerButton object {
+    pointer-events: none;
+    padding-bottom: 3px;
+}
+
+.mx_RightPanel_headerButton_highlight {
+    width: 25px;
+    height: 5px;
+    border-radius: 5px;
+    background-color: $accent-color;
+    opacity: 0.2;
+}
+
+.mx_RightPanel_headerButton_badge {
+    font-size: 11px;
+    color: $accent-color;
+    font-weight: bold;
+    padding-bottom: 2px;
+}
+
+.mx_RightPanel_collapsebutton {
+    flex: 1;
+    text-align: right;
+    margin-top: 20px;
+}
+
+.mx_RightPanel .mx_MemberList,
+.mx_RightPanel .mx_MemberInfo,
+.mx_RightPanel .mx_GroupRoomList,
+.mx_RightPanel_blank {
+    order: 2;
+    flex: 1 1 0;
+}
+
+.mx_RightPanel .mx_RoomView_messagePanelSpinner {
+    order: 2;
+    margin: auto;
+}
+
+.mx_RightPanel_footer {
+    order: 3;
+
+    border-top: 1px solid $primary-hairline-color;
+    margin-right: 20px;
+
+    flex: 0 0 60px;
+}
+
+.mx_RightPanel_footer .mx_RightPanel_invite {
+    font-size: 14px;
+	color: $primary-fg-color;
+    padding-top: 13px;
+    padding-left: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
+    display: none;
+}
+
+.mx_RightPanel_invite .mx_RightPanel_icon object {
+    pointer-events: none;
+}
+
+.mx_RightPanel_invite .mx_RightPanel_message {
+    padding-left: 10px;
+    line-height: 18px;
+}
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_RightPanel_footer {
+        flex: 0 0 50px;
+    }
+
+    .mx_RightPanel_footer .mx_RightPanel_invite {
+        line-height: 25px;
+        padding-top: 8px;
+    }
+}

res/css/structures/_RoomDirectory.scss

@@ -0,0 +1,131 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_RoomDirectory {
+    max-width: 960px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 12px;
+    color: $primary-fg-color;
+    word-break: break-word;
+
+    display: flex;
+
+    flex-direction: column;
+}
+
+.mx_RoomDirectory .mx_RoomHeader_simpleHeader {
+    margin-left: 0px;
+}
+
+.mx_RoomDirectory_list {
+    flex: 1;
+
+    display: flex;
+
+    flex-direction: column;
+}
+
+.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
+    justify-content: flex-start;
+}
+
+.mx_RoomDirectory_listheader {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    border-spacing: 5px;
+}
+
+.mx_RoomDirectory_searchbox {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.mx_RoomDirectory_listheader .mx_NetworkDropdown {
+    display: table-cell;
+    width: 200px;
+}
+
+.mx_RoomDirectory_tableWrapper {
+    overflow-y: auto;
+    flex: 1 1 0;
+}
+
+.mx_RoomDirectory_table {
+    font-size: 14px;
+    color: $primary-fg-color;
+    width: 100%;
+    text-align: left;
+    table-layout: fixed;
+}
+
+.mx_RoomDirectory_roomAvatar {
+    width: 24px;
+    padding-left: 12px;
+    padding-right: 24px;
+    vertical-align: top;
+}
+
+.mx_RoomDirectory_roomDescription {
+    padding-bottom: 16px;
+}
+
+.mx_RoomDirectory_name {
+    display: inline-block;
+    font-weight: 600;
+}
+
+.mx_RoomDirectory_perms {
+    display: inline-block;
+}
+
+.mx_RoomDirectory_perm {
+    display: inline;
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-right: 5px;
+    height: 15px;
+    border-radius: 11px;
+    background-color: $plinth-bg-color;
+    text-transform: uppercase;
+    font-weight: 600;
+    font-size: 11px;
+    color: $accent-color;
+}
+
+.mx_RoomDirectory_topic {
+    cursor: initial;
+}
+
+.mx_RoomDirectory_alias {
+    font-size: 12px;
+    color: $settings-grey-fg-color;
+}
+
+.mx_RoomDirectory_roomMemberCount {
+    text-align: right;
+    width: 100px;
+    padding-right: 10px;
+}
+
+.mx_RoomDirectory_table tr {
+    padding-bottom: 10px;
+    cursor: pointer;
+}

res/css/structures/_RoomStatusBar.scss

@@ -0,0 +1,181 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_RoomStatusBar {
+    margin-left: 65px;
+    min-height: 50px;
+}
+
+/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
+.mx_RoomStatusBar_indicator {
+    padding-left: 17px;
+    padding-right: 12px;
+    margin-left: -73px;
+    margin-top: 15px;
+    float: left;
+    width: 24px;
+    text-align: center;
+}
+
+.mx_RoomStatusBar_callBar {
+    height: 50px;
+    line-height: 50px;
+}
+
+.mx_RoomStatusBar_placeholderIndicator span {
+    color: $primary-fg-color;
+    opacity: 0.5;
+    position: relative;
+    top: -4px;
+/*
+    animation-duration: 1s;
+    animation-name: bounce;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+*/
+}
+
+.mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
+    animation-delay: 0.3s;
+}
+.mx_RoomStatusBar_placeholderIndicator span:nth-child(2) {
+    animation-delay: 0.6s;
+}
+.mx_RoomStatusBar_placeholderIndicator span:nth-child(3) {
+    animation-delay: 0.9s;
+}
+
+@keyframes bounce {
+    from {
+        opacity: 0.5;
+        top: 0;
+    }
+
+    to {
+        opacity: 0.2;
+        top: -3px;
+    }
+}
+
+.mx_RoomStatusBar_typingIndicatorAvatars {
+    width: 52px;
+    margin-top: -1px;
+    text-align: left;
+}
+
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
+    margin-right: -12px;
+    border: 1px solid $primary-bg-color;
+}
+
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
+    padding-left: 1px;
+    padding-top: 1px;
+}
+
+.mx_RoomStatusBar_typingIndicatorRemaining {
+    display: inline-block;
+    color: #acacac;
+    background-color: #ddd;
+    border: 1px solid $primary-bg-color;
+    border-radius: 40px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    font-size: 0.8em;
+    vertical-align: top;
+    text-align: center;
+    position: absolute;
+}
+
+.mx_RoomStatusBar_scrollDownIndicator {
+    cursor: pointer;
+    padding-left: 1px;
+}
+
+.mx_RoomStatusBar_unreadMessagesBar {
+    padding-top: 10px;
+    color: $warning-color;
+    cursor: pointer;
+}
+
+.mx_RoomStatusBar_connectionLostBar {
+    margin-top: 19px;
+    min-height: 58px;
+}
+
+.mx_RoomStatusBar_connectionLostBar img {
+    padding-left: 10px;
+    padding-right: 22px;
+    vertical-align: middle;
+    float: left;
+}
+
+.mx_RoomStatusBar_connectionLostBar_title {
+    color: $warning-color;
+}
+
+.mx_RoomStatusBar_connectionLostBar_desc {
+    color: $primary-fg-color;
+    font-size: 13px;
+    opacity: 0.5;
+}
+
+.mx_RoomStatusBar_resend_link {
+    color: $primary-fg-color ! important;
+    text-decoration: underline ! important;
+    cursor: pointer;
+}
+
+.mx_RoomStatusBar_typingBar {
+    height: 50px;
+    line-height: 50px;
+
+    color: $primary-fg-color;
+    opacity: 0.5;
+    overflow-y: hidden;
+    display: block;
+}
+
+.mx_RoomStatusBar_isAlone {
+    height: 50px;
+    line-height: 50px;
+
+    color: $primary-fg-color;
+    opacity: 0.5;
+    overflow-y: hidden;
+    display: block;
+}
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_RoomStatusBar {
+        min-height: 40px;
+    }
+
+    .mx_RoomStatusBar_indicator {
+        margin-top: 10px;
+    }
+
+    .mx_RoomStatusBar_callBar {
+      height: 40px;
+      line-height: 40px;
+    }
+
+    .mx_RoomStatusBar_typingBar {
+      height: 40px;
+      line-height: 40px;
+    }
+}

res/css/structures/_RoomSubList.scss

@@ -0,0 +1,244 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_RoomSubList {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+
+    background-color: $roomsublist-background;
+}
+
+.mx_RoomSubList_labelContainer {
+    height: 31px; /* mx_RoomSubList_label height including border */
+    width: 235px; /* LHS Panel width */
+    position: relative;
+}
+
+.mx_RoomSubList_label {
+    position: relative;
+    text-transform: uppercase;
+    color: $roomsublist-label-fg-color;
+    font-weight: 600;
+    font-size: 12px;
+    width: 203px; /* padding + width = LHS Panel width */
+    height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */
+    padding-left: 16px; /* gutter */
+    padding-right: 16px; /* gutter */
+    padding-top: 6px;
+    padding-bottom: 6px;
+    cursor: pointer;
+    background-color: $secondary-accent-color;
+}
+
+.mx_RoomSubList_label.mx_RoomSubList_fixed {
+    position: fixed;
+    top: 0;
+    z-index: 5;
+    /* pointer-events: none; */
+}
+
+.collapsed .mx_RoomSubList_label {
+    height: 17px;
+    width: 28px; /* collapsed LHS Panel width */
+}
+
+.collapsed .mx_RoomSubList_labelContainer {
+    width: 28px; /* collapsed LHS Panel width */
+}
+
+.mx_RoomSubList_roomCount {
+    display: inline-block;
+    font-size: 12px;
+    font-weight: normal;
+    color: $accent-color;
+    padding-left: 5px;
+    text-transform: none;
+}
+
+.collapsed .mx_RoomSubList_roomCount {
+    display: none;
+}
+
+.mx_RoomSubList_badge {
+    display: inline-block;
+    min-width: 15px;
+    height: 15px;
+    position: absolute;
+    right: 8px; /*gutter */
+    top: 7px;
+    border-radius: 8px;
+    color: $accent-fg-color;
+    font-weight: 600;
+    font-size: 10px;
+    text-align: center;
+    padding-top: 1px;
+    padding-left: 4px;
+    padding-right: 4px;
+    background-color: $accent-color;
+}
+
+/*
+.collapsed .mx_RoomSubList_badge {
+    display: none;
+}
+*/
+
+.mx_RoomSubList_badgeHighlight {
+    background-color: $warning-color;
+}
+
+/* This is the bottom of the speech bubble */
+.mx_RoomSubList_badgeHighlight:after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    margin-left: 5px;
+    border-top: 5px solid $warning-color;
+    border-right: 7px solid transparent;
+}
+
+/* Hide the bottom of speech bubble */
+.collapsed .mx_RoomSubList_badgeHighlight:after {
+    display: none;
+}
+
+.mx_RoomSubList_chevron {
+    pointer-events: none;
+    position: absolute;
+    right: 41px;
+    top: 11px;
+}
+
+.mx_RoomSubList_chevronDown {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 6px solid $roomsublist-chevron-color;
+}
+
+.mx_RoomSubList_chevronUp {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 6px solid $roomsublist-chevron-color;
+}
+
+.mx_RoomSubList_chevronRight {
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-left: 6px solid $roomsublist-chevron-color;
+    border-bottom: 5px solid transparent;
+}
+
+/* The overflow section */
+.mx_RoomSubList_ellipsis {
+    display: block;
+    line-height: 11px;
+    height: 18px;
+    position: relative;
+    cursor: pointer;
+    font-size: 13px;
+
+    background-color: $secondary-accent-color;
+}
+
+.collapsed .mx_RoomSubList_ellipsis {
+    height: 20px;
+}
+
+.mx_RoomSubList_line {
+    display: inline-block;
+    width: 159px;
+    border-top: dotted 2px $accent-color;
+    vertical-align: middle;
+}
+
+.collapsed .mx_RoomSubList_line {
+    display: none;
+}
+
+.mx_RoomSubList_more {
+    display: inline-block;
+    text-transform: uppercase;
+    font-size: 10px;
+    font-weight: 600;
+    text-align: left;
+    color: $accent-color;
+    padding-left: 7px;
+    padding-right: 7px;
+    padding-left: 7px;
+    vertical-align: middle;
+}
+
+.collapsed .mx_RoomSubList_more {
+    display: none;
+}
+
+.mx_RoomSubList_moreBadge {
+    display: inline-block;
+    min-width: 15px;
+    height: 13px;
+    position: absolute;
+    right: 8px; /*gutter */
+    top: -2px;
+    border-radius: 8px;
+    border: solid 1px $accent-color;
+    color: $accent-fg-color;
+    font-weight: 600;
+    font-size: 10px;
+    text-align: center;
+    padding-top: 1px;
+    padding-left: 3px;
+    padding-right: 3px;
+    background-color: $primary-bg-color;
+    vertical-align: middle;
+}
+
+.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
+    background-color: $accent-color;
+    border: 0;
+    padding-top: 3px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
+    background-color: $warning-color;
+    border: 0;
+    padding-top: 3px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+.collapsed .mx_RoomSubList_moreBadge {
+    position: static;
+    margin-left: 16px;
+    margin-top: 2px;
+}
+
+.mx_RoomSubList_ellipsis .mx_RoomSubList_chevronDown {
+    position: relative;
+    top: 4px;
+    left: 2px;
+}
+
+

res/css/structures/_RoomView.scss

@@ -0,0 +1,272 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_RoomView {
+    word-wrap: break-word;
+    position: relative;
+
+    display: flex;
+    width: 100%;
+
+    flex-direction: column;
+}
+
+.mx_RoomView .mx_RoomHeader {
+    order: 1;
+
+    flex: 0 0 70px;
+}
+
+.mx_RoomView_fileDropTarget {
+    min-width: 0px;
+    max-width: 960px;
+    width: 100%;
+    font-size: 18px;
+    text-align: center;
+
+    pointer-events: none;
+
+    padding-left: 12px;
+    padding-right: 12px;
+    margin-left: -12px;
+
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+
+    background-color: $droptarget-bg-color;
+    border: 2px #e1dddd solid;
+    border-bottom: none;
+    position: absolute;
+    top: 70px;
+    bottom: 0px;
+    z-index: 3000;
+}
+
+.mx_RoomView_fileDropTargetLabel {
+    top: 50%;
+    width: 100%;
+    margin-top: -50px;
+    position: absolute;
+}
+
+.mx_RoomView_auxPanel {
+    order: 2;
+
+    min-width: 0px;
+    max-width: 960px;
+    width: 100%;
+    margin: 0px auto;
+
+    overflow: auto;
+    border-bottom: 1px solid $primary-hairline-color;
+
+    flex: 0 0 auto;
+}
+
+.mx_RoomView_auxPanel_apps {
+    max-width: 1920px ! important;
+}
+
+
+.mx_RoomView_body {
+    order: 3;
+    flex: 1 1 0;
+    flex-direction: column;
+    display: flex;
+}
+
+.mx_RoomView_body .mx_RoomView_topUnreadMessagesBar {
+    order: 1;
+}
+
+.mx_RoomView_body .mx_RoomView_messagePanel {
+    order: 2;
+}
+
+.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
+    order: 2;
+    margin: auto;
+}
+
+.mx_RoomView_body .mx_RoomView_statusArea {
+    order: 3;
+}
+
+.mx_RoomView_body .mx_MessageComposer {
+    order: 4;
+}
+
+.mx_RoomView_messagePanel {
+    width: 100%;
+    overflow-y: auto;
+}
+
+.mx_RoomView_messageListWrapper {
+    max-width: 960px;
+    margin: auto;
+
+    min-height: 100%;
+
+    display: flex;
+
+    flex-direction: column;
+
+    justify-content: flex-end;
+}
+
+.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
+    justify-content: flex-start;
+}
+
+.mx_RoomView_empty {
+    flex: 1 1 auto;
+    font-size: 13px;
+    padding-left: 3em;
+    padding-right: 3em;
+    margin-right: 20px;
+    margin-top: 33%;
+    text-align: center;
+}
+
+.mx_RoomView_MessageList {
+    width: 100%;
+    list-style-type: none;
+    padding: 0px;
+}
+
+.mx_RoomView_MessageList li {
+    clear: both;
+}
+
+li.mx_RoomView_myReadMarker_container {
+    height: 0px;
+    margin: 0px;
+    padding: 0px;
+    border: 0px;
+}
+
+hr.mx_RoomView_myReadMarker {
+    border-top: solid 1px $accent-color;
+    border-bottom: solid 1px $accent-color;
+    margin-top: 0px;
+    position: relative;
+    top: -1px;
+    z-index: 1;
+}
+
+.mx_RoomView_statusArea {
+    width: 100%;
+    flex: 0 0 auto;
+
+    max-height: 0px;
+    background-color: $primary-bg-color;
+    z-index: 1000;
+    overflow: hidden;
+
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+    -ms-transition: all .2s ease-out;
+    -o-transition: all .2s ease-out;
+}
+
+.mx_RoomView_statusArea_expanded {
+    max-height: 100px;
+}
+
+.mx_RoomView_statusAreaBox {
+    max-width: 960px;
+    margin: auto;
+    min-height: 50px;
+}
+
+.mx_RoomView_statusAreaBox_line {
+    margin-left: 65px;
+    border-top: 1px solid $primary-hairline-color;
+    height: 1px;
+}
+
+.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
+    background-color: $primary-bg-color;
+}
+
+.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
+    color: $accent-fg-color;
+    opacity: 1.0;
+}
+
+.mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
+    margin-top: 2px;
+    border: none;
+    height: 0px;
+}
+
+.mx_RoomView_inCall .mx_MessageComposer_wrapper {
+    border-top: 2px hidden;
+    padding-top: 1px;
+}
+
+.mx_RoomView_inCall .mx_RoomView_statusAreaBox {
+    background-color: $accent-color;
+    color: $accent-fg-color;
+    position: relative;
+}
+
+.mx_RoomView_voipChevron {
+    position: absolute;
+    bottom: -11px;
+    right: 11px;
+}
+
+.mx_RoomView_voipButton {
+    float: right;
+    margin-right: 13px;
+    margin-top: 10px;
+    cursor: pointer;
+}
+
+.mx_RoomView_voipButton object {
+    pointer-events: none;
+}
+
+.mx_RoomView .mx_MessageComposer {
+    width: 100%;
+    flex: 0 0 auto;
+    margin-right: 2px;
+}
+
+.mx_RoomView_ongoingConfCallNotification {
+    width: 100%;
+    text-align: center;
+    background-color: $warning-color;
+    color: $accent-fg-color;
+    font-weight: bold;
+    padding: 6px 0;
+    cursor: pointer;
+}
+
+.mx_RoomView_ongoingConfCallNotification a {
+    color: $accent-fg-color ! important;
+}
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_RoomView_MessageList {
+        margin-bottom: 4px;
+    }
+
+    .mx_RoomView_statusAreaBox {
+        min-height: 42px;
+    }
+}

res/css/structures/_SearchBox.scss

@@ -0,0 +1,68 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_SearchBox {
+    height: 24px;
+    margin-left: 16px;
+    margin-right: 16px;
+    padding-top: 24px;
+    padding-bottom: 22px;
+
+    border-bottom: 1px solid $panel-divider-color;
+
+    display: flex;
+}
+
+.mx_SearchBox_searchButton {
+    margin-right: 10px;
+    margin-top: 5px;
+    pointer-events: none;
+}
+
+.mx_SearchBox_closeButton {
+    cursor: pointer;
+    margin-top: -5px;
+}
+
+.mx_SearchBox_search {
+    flex: 1 1 auto;
+    width: 0px;
+    font-family: $font-family;
+    font-size: 12px;
+    margin-top: -2px;
+    height: 24px;
+    border: 0px ! important;
+    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
+    border: 0px;
+}
+
+.mx_SearchBox_minimise,
+.mx_SearchBox_maximise {
+    margin-top: 3px;
+    cursor: pointer;
+}
+
+.mx_SearchBox_minimise {
+    margin-left: 10px;
+}
+
+.mx_SearchBox_maximise {
+    margin-left: 9px;
+}
+
+.mx_SearchBox object {
+    pointer-events: none;
+}

res/css/structures/_TagPanel.scss

@@ -0,0 +1,126 @@
+/*
+Copyright 2017 New Vector Ltd.
+
+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_TagPanel {
+    flex: 0 0 60px;
+    background-color: $tertiary-accent-color;
+    cursor: pointer;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.mx_TagPanel .mx_TagPanel_clearButton {
+    /* Constant height within flex mx_TagPanel */
+    height: 70px;
+    width: 60px;
+
+    flex: none;
+
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.mx_TagPanel .mx_TagPanel_clearButton object {
+    /* Same as .mx_SearchBox padding-top */
+    margin-top: 24px;
+    pointer-events: none;
+}
+
+.mx_TagPanel .mx_TagPanel_divider {
+    height: 0px;
+    width: 42px;
+    border-bottom: 1px solid $panel-divider-color;
+}
+
+.mx_TagPanel .mx_TagPanel_scroller {
+    flex-grow: 1;
+}
+
+.mx_TagPanel .mx_TagPanel_tagTileContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    height: 100%;
+}
+
+.mx_TagPanel .mx_TagTile {
+    padding: 6px 3px;
+    opacity: 0.5;
+    position: relative;
+}
+.mx_TagPanel .mx_TagTile:focus,
+.mx_TagPanel .mx_TagTile:hover,
+.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
+    opacity: 1;
+}
+
+.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
+    /* To offset border of mx_TagTile_avatar */
+    padding: 3px 0px;
+}
+
+.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
+    border: 3px solid $accent-color;
+    background-color: $accent-color;
+    border-radius: 60px;
+
+    /* In case this is a "initial" avatar */
+    display: block;
+    height: 35px;
+    width: 35px;
+}
+
+.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
+    filter: none;
+}
+
+.mx_TagTile_tooltip {
+    position: relative;
+    top: -30px;
+    left: 5px;
+}
+
+.mx_TagTile_context_button {
+    min-width: 15px;
+    height: 15px;
+    position: absolute;
+    right: -5px;
+    top: 1px;
+    border-radius: 8px;
+    background-color: $neutral-badge-color;
+    color: #ffffff;
+    font-weight: 600;
+    font-size: 10px;
+    text-align: center;
+    padding-top: 1px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+.mx_TagPanel_groupsButton {
+    margin-bottom: 17px;
+    margin-top: 18px;
+    height: 25px;
+}
+
+.mx_TagPanel_groupsButton object {
+    pointer-events: none;
+}

res/css/structures/_UploadBar.scss

@@ -0,0 +1,61 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_UploadBar {
+    position: relative;
+}
+
+.mx_UploadBar_uploadProgressOuter {
+    height: 5px;
+    margin-left: 63px;
+    margin-top: -1px;
+    padding-bottom: 5px;
+}
+
+.mx_UploadBar_uploadProgressInner {
+    background-color: $accent-color;
+    height: 5px;
+}
+
+.mx_UploadBar_uploadFilename {
+    margin-top: 5px;
+    margin-left: 65px;
+    opacity: 0.5;
+    color: $primary-fg-color;
+}
+
+.mx_UploadBar_uploadIcon {
+    float: left;
+    margin-top: 5px;
+    margin-left: 14px;
+}
+
+.mx_UploadBar_uploadCancel {
+    float: right;
+    margin-top: 5px;
+    margin-right: 10px;
+    position: relative;
+    opacity: 0.6;
+    cursor: pointer;
+    z-index: 1;
+}
+
+.mx_UploadBar_uploadBytes {
+    float: right;
+    margin-top: 5px;
+    margin-right: 30px;
+    color: $accent-color;
+}

res/css/structures/_UserSettings.scss

@@ -0,0 +1,257 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+
+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_UserSettings {
+    max-width: 960px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_UserSettings .mx_RoomHeader {
+    order: 1;
+
+    flex: 0 0 70px;
+}
+
+.mx_UserSettings_body {
+    order: 2;
+
+    flex: 1 1 0;
+
+    margin-top: -20px;
+    overflow-y: auto;
+}
+
+.mx_UserSettings h3 {
+    clear: both;
+    margin-left: 63px;
+    text-transform: uppercase;
+    color: $h3-color;
+    font-weight: 600;
+    font-size: 13px;
+    margin-top: 26px;
+    margin-bottom: 10px;
+}
+
+.mx_UserSettings_section h3 {
+    margin-left: 0px;
+}
+
+.mx_UserSettings_spinner {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 12px;
+    width: 32px;
+    height: 32px;
+}
+
+.mx_UserSettings_button {
+    @mixin mx_DialogButton;
+    display: inline;
+    margin: auto;
+}
+
+.mx_UserSettings_button:hover {
+    @mixin mx_DialogButton_hover;
+}
+
+.mx_UserSettings_button.danger {
+    background-color: $warning-color;
+}
+
+.mx_UserSettings_section {
+    margin-left: 63px;
+    margin-top: 28px;
+    margin-bottom: 28px;
+}
+
+.mx_UserSettings_cryptoSection ul {
+    display: table;
+}
+.mx_UserSettings_cryptoSection li {
+    display: table-row;
+}
+.mx_UserSettings_cryptoSection label,
+.mx_UserSettings_cryptoSection span {
+    display: table-cell;
+    padding-right: 1em;
+}
+
+.mx_UserSettings_passwordWarning {
+    /* To move the "Sign out" button out of the way */
+    clear: both;
+    color: $warning-color;
+    margin-bottom: 5px;
+}
+
+.mx_UserSettings_importExportButtons {
+    padding-top: 10px;
+    padding-left: 40px;
+}
+
+.mx_UserSettings_importExportButtons .mx_UserSettings_button {
+    margin-right: 1em;
+}
+
+.mx_UserSettings_toggle input {
+    width: 16px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+}
+
+.mx_UserSettings_toggle label {
+    padding-bottom: 21px;
+}
+
+.mx_UserSettings_accountTable
+.mx_UserSettings_notifTable
+{
+    display: table;
+}
+
+.mx_UserSettings_notifTable .mx_Spinner {
+    position: absolute;
+}
+
+.mx_UserSettings_language {
+    width: 200px;
+}
+
+.mx_UserSettings_webRtcDevices_dropdown {
+    width: 50%;
+}
+
+.mx_UserSettings_profileTable
+{
+    display: table;
+    float: left;
+}
+
+.mx_UserSettings_profileTableRow
+{
+    display: table-row;
+}
+
+.mx_UserSettings_profileLabelCell
+{
+    padding-bottom: 21px;
+    display: table-cell;
+    font-weight: bold;
+    padding-right: 24px;
+}
+
+.mx_UserSettings_profileInputCell {
+    display: table-cell;
+    padding-bottom: 21px;
+    width: 240px;
+}
+
+.mx_UserSettings_profileInputCell input,
+.mx_UserSettings_profileInputCell .mx_EditableText
+{
+    display: inline-block;
+    border: 0px;
+    border-bottom: 1px solid $input-underline-color;
+    padding: 0px;
+    width: 240px;
+    color: $input-fg-color;
+    font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
+    font-size: 16px;
+}
+
+.mx_UserSettings_threepidButton {
+    display: table-cell;
+    padding-left: 0.5em;
+    position: relative;
+    cursor: pointer;
+}
+
+.mx_UserSettings_phoneSection {
+    display:table;
+}
+
+.mx_UserSettings_phoneCountry {
+    width: 70px;
+    display: table-cell;
+}
+
+input.mx_UserSettings_phoneNumberField {
+    margin-left: 3px;
+    width: 172px;
+    border: 1px solid transparent;
+}
+
+.mx_UserSettings_changePasswordButton {
+    float: right;
+    margin-right: 32px;
+    margin-left: 32px;
+}
+
+.mx_UserSettings_logout {
+    float: right;
+    margin-right: 32px;
+    margin-left: 32px;
+}
+
+.mx_UserSettings_avatarPicker {
+    margin-left: 32px;
+    margin-right: 32px;
+    float: right;
+    cursor: pointer;
+}
+
+.mx_UserSettings_avatarPicker_img .mx_BaseAvatar_image {
+    object-fit: cover;
+}
+
+.mx_UserSettings_avatarPicker_edit {
+    text-align: center;
+    margin-top: 10px;
+}
+
+.mx_UserSettings_avatarPicker_edit img {
+    cursor: pointer;
+}
+
+.mx_UserSettings_avatarPicker_edit > input {
+    display: none;
+}
+
+.mx_UserSettings_avatarPicker_imgContainer {
+    display: inline-block;
+}
+
+.mx_UserSettings_avatarPicker_remove {
+    display: inline-block;
+    float: right;
+    margin-right: -15px;
+}
+
+.mx_UserSettings_advanced_spoiler,
+.mx_UserSettings_link {
+    cursor: pointer;
+    color: $accent-color;
+    word-break: break-all;
+}
+
+.mx_UserSettings_analyticsModal table {
+    margin: 10px 0px;
+}

res/css/structures/_ViewSource.scss

@@ -0,0 +1,23 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_ViewSource pre {
+    text-align: left;
+    font-size: 12px;
+    padding: 0.5em 1em 0.5em 1em;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}

res/css/structures/login/_Login.scss

@@ -0,0 +1,284 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_Login {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    overflow: auto;
+}
+
+.mx_Login h2 {
+    font-weight: 300;
+    margin-top: 32px;
+    margin-bottom: 20px;
+}
+
+.mx_Login_box {
+    width: 300px;
+    min-height: 450px;
+    padding-top: 50px;
+    padding-bottom: 50px;
+    margin: auto;
+}
+
+.mx_Login_logo {
+    text-align: center;
+    height: 150px;
+    margin-bottom: 45px;
+}
+
+.mx_Login_logo img {
+    max-height: 100%
+}
+
+.mx_Login_support {
+    text-align: center;
+    font-size: 13px;
+    margin-top: 0px;
+    opacity: 0.7;
+}
+
+.mx_Login_field {
+    width: 280px;
+    border-radius: 3px;
+    border: 1px solid $strong-input-border-color;
+    font-weight: 300;
+    font-size: 13px;
+    padding: 9px;
+    margin-bottom: 14px;
+}
+
+.mx_Login_field_disabled {
+    opacity: 0.3;
+}
+
+.mx_Login_fieldLabel {
+    margin-top: -10px;
+    margin-left: 8px;
+    margin-bottom: 14px;
+    font-size: 13px;
+    opacity: 0.8;
+}
+
+.mx_Login_submit {
+    @mixin mx_DialogButton;
+    width: 100%;
+    margin-top: 35px;
+    margin-bottom: 24px;
+}
+
+.mx_Login_submit:hover {
+    @mixin mx_DialogButton_hover;
+}
+
+.mx_Login_submit:disabled {
+    opacity: 0.3;
+}
+
+.mx_Login_label {
+    font-size: 13px;
+    opacity: 0.8;
+}
+
+.mx_Login_checkbox,
+.mx_Login_radio {
+    margin-right: 10px;
+}
+
+.mx_Login_create {
+    display: block;
+    text-align: center;
+    width: 100%;
+    font-size: 13px;
+    opacity: 0.8;
+}
+
+.mx_Login_create:link {
+    color: $primary-fg-color;
+}
+
+.mx_Login_links {
+    display: block;
+    text-align: center;
+    margin-top: 15px;
+    width: 100%;
+    font-size: 13px;
+    opacity: 0.8;
+}
+
+.mx_Login_links a:link {
+   color: $primary-fg-color;
+}
+
+.mx_Login_prompt {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    font-size: 13px;
+}
+
+.mx_Login_forgot {
+    font-size: 15px;
+}
+
+.mx_Login_forgot:link {
+    color: $primary-fg-color;
+}
+
+.mx_Login_loader {
+    display: inline;
+    position: relative;
+    top: 2px;
+    left: 8px;
+}
+
+.mx_Login_loader .mx_Spinner {
+    display: inline;
+}
+
+.mx_Login_loader .mx_Spinner img {
+    width: 16px;
+    height: 16px;
+}
+
+.mx_Login_error {
+    color: $warning-color;
+    font-weight: bold;
+    text-align: center;
+/*
+    height: 24px;
+*/
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+.mx_Login_type_container {
+    display: flex;
+    margin-bottom: 14px;
+}
+
+.mx_Login_type_label {
+    flex-grow: 1;
+    line-height: 35px;
+}
+
+.mx_Login_type_dropdown {
+    display: inline-block;
+    min-width: 170px;
+    align-self: flex-end;
+    flex: 1 1 auto;
+}
+
+.mx_Login_field_group {
+    display: flex;
+}
+
+.mx_Login_field_prefix {
+    height: 34px;
+    padding: 0px 5px;
+    line-height: 33px;
+
+    background-color: #eee;
+    border: 1px solid #c7c7c7;
+    border-right: 0px;
+    border-radius: 3px 0px 0px 3px;
+
+    text-align: center;
+}
+
+.mx_Login_field_suffix {
+    height: 34px;
+    padding: 0px 5px;
+    line-height: 33px;
+
+    background-color: #eee;
+    border: 1px solid #c7c7c7;
+    border-left: 0px;
+    border-radius: 0px 3px 3px 0px;
+
+    text-align: center;
+    flex-grow: 1;
+}
+
+.mx_Login_username {
+    height: 16px;
+    flex-shrink: 1;
+    min-width: 0px;
+}
+
+.mx_Login_phoneNumberField {
+    height: 16px;
+}
+
+.mx_Login_field_has_prefix {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+}
+
+.mx_Login_field_has_suffix {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+}
+
+.mx_Login_phoneSection {
+    display:flex;
+}
+
+.mx_Login_phoneCountry {
+    margin-bottom: 14px;
+    width: 150px;
+
+    /* To override mx_Login_field_prefix */
+    text-align: left;
+    padding: 0px;
+    background-color: $primary-bg-color;
+}
+
+.mx_Login_field_prefix .mx_Dropdown_input {
+    /* To use prefix border instead of dropdown border */
+    border: 0;
+}
+
+.mx_Login_phoneCountry .mx_Dropdown_option {
+    /*
+        To match height of mx_Login_field
+        33px + 2px border from mx_Dropdown_option = 35px
+    */
+    height: 33px;
+    line-height: 33px;
+}
+
+.mx_Login_phoneCountry .mx_Dropdown_option img {
+    margin: 3px;
+    vertical-align: top;
+}
+
+.mx_Login_language {
+  margin-left: auto;
+  margin-right: auto;
+  min-width: 60%;
+}
+
+.mx_Login_language_div {
+  display: flex;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+

res/css/views/avatars/_BaseAvatar.scss

@@ -0,0 +1,35 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_BaseAvatar {
+    position: relative;
+}
+
+.mx_BaseAvatar_initial {
+    position: absolute;
+    left: 0px;
+    color: $avatar-initial-color;
+    text-align: center;
+    speak: none;
+    pointer-events: none;
+    font-weight: normal;
+}
+
+.mx_BaseAvatar_image {
+    border-radius: 40px;
+    vertical-align: top;
+    background-color: $avatar-bg-color;
+}

res/css/views/context_menus/_MessageContextMenu.scss

@@ -0,0 +1,25 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_MessageContextMenu_field {
+    padding: 3px 6px 3px 6px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
+    font-weight: bold;
+}

res/css/views/context_menus/_RoomTileContextMenu.scss

@@ -0,0 +1,114 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave {
+    padding-top: 8px;
+    padding-right: 20px;
+    padding-bottom: 8px;
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    line-height: 16px;
+}
+
+.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {
+    font-weight: bold;
+}
+
+.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon {
+    display: none;
+}
+
+.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon_set {
+    display: inline-block;
+}
+
+.mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldDisabled {
+    color: rgba(0, 0, 0, 0.2);
+}
+
+.mx_RoomTileContextMenu_tag_icon {
+    padding-right: 8px;
+    padding-left: 4px;
+    display: inline-block
+}
+
+.mx_RoomTileContextMenu_tag_icon_set {
+    padding-right: 8px;
+    padding-left: 4px;
+    display: none;
+}
+
+.mx_RoomTileContextMenu_separator {
+    margin-top: 0;
+    margin-bottom: 0;
+    border-bottom-style: none;
+    border-left-style: none;
+    border-right-style: none;
+    border-top-style: solid;
+    border-top-width: 1px;
+    border-color: $menu-border-color;
+}
+
+.mx_RoomTileContextMenu_leave {
+    color: $warning-color;
+}
+
+.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon {
+    /* Something to indicate that the icon is the set tag */
+}
+
+.mx_RoomTileContextMenu_notif_picker {
+    position: absolute;
+    top: 16px;
+    left: 5px;
+}
+
+.mx_RoomTileContextMenu_notif_field {
+    padding-top: 4px;
+    padding-right: 6px;
+    padding-bottom: 10px;
+    padding-left: 8px; /* 20px */
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+}
+
+.mx_RoomTileContextMenu_notif_field.mx_RoomTileContextMenu_notif_fieldSet {
+    font-weight: bold;
+}
+
+.mx_RoomTileContextMenu_notif_field.mx_RoomTileContextMenu_notif_fieldDisabled {
+    color: rgba(0, 0, 0, 0.2);
+}
+
+.mx_RoomTileContextMenu_notif_icon {
+    padding-right: 4px;
+    padding-left: 4px;
+}
+
+.mx_RoomTileContextMenu_notif_activeIcon {
+    display: inline-block;
+    opacity: 0;
+    position: relative;
+    left: -5px;
+}
+
+.mx_RoomTileContextMenu_notif_fieldSet .mx_RoomTileContextMenu_notif_activeIcon {
+    opacity: 1;
+}

res/css/views/context_menus/_TagTileContextMenu.scss

@@ -0,0 +1,44 @@
+/*
+Copyright 2018 New Vector Ltd
+
+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_TagTileContextMenu_item {
+    padding-top: 8px;
+    padding-right: 20px;
+    padding-bottom: 8px;
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    line-height: 16px;
+}
+
+
+.mx_TagTileContextMenu_item_icon {
+    padding-right: 8px;
+    padding-left: 4px;
+    display: inline-block
+}
+
+.mx_TagTileContextMenu_separator {
+    margin-top: 0;
+    margin-bottom: 0;
+    border-bottom-style: none;
+    border-left-style: none;
+    border-right-style: none;
+    border-top-style: solid;
+    border-top-width: 1px;
+    border-color: $menu-border-color;
+}

res/css/views/dialogs/_BugReportDialog.scss

@@ -0,0 +1,52 @@
+/*
+Copyright 2017 OpenMarket Ltd
+
+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_BugReportDialog_field_container {
+    display: flex;
+}
+
+.mx_BugReportDialog_field_label {
+    flex-basis: 150px;
+
+    text-align: right;
+
+    padding-top: 9px;
+    padding-right: 4px;
+
+    line-height: 18px;
+}
+
+.mx_BugReportDialog_field_input {
+    flex-grow: 1;
+
+    /* taken from mx_ChatInviteDialog_inputContainer */
+    border-radius: 3px;
+    border: solid 1px $input-border-color;
+
+    font-size: 14px;
+
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-top: 7px;
+    padding-bottom: 7px;
+
+    margin-bottom: 4px;
+}
+
+.mx_BugReportDialog_field_input[type="text" i] {
+    padding-top: 9px;
+    padding-bottom: 9px;
+}

res/css/views/dialogs/_ChangelogDialog.scss

@@ -0,0 +1,24 @@
+/*
+Copyright 2016 Aviral Dasgupta
+
+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_ChangelogDialog_content {
+    max-height: 300px;
+    overflow: auto;
+}
+
+.mx_ChangelogDialog_li {
+    padding: 0.2em;
+}

res/css/views/dialogs/_ChatCreateOrReuseChatDialog.scss

@@ -0,0 +1,41 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+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_ChatCreateOrReuseDialog .mx_ChatCreateOrReuseDialog_tiles {
+    margin-top: 24px;
+}
+
+.mx_ChatCreateOrReuseDialog .mx_Dialog_content {
+    margin-bottom: 24px;
+
+    /*
+       To stop spinner that mx_ChatCreateOrReuseDialog_profile replaces from causing a
+       height change
+    */
+    min-height: 100px;
+}
+
+.mx_ChatCreateOrReuseDialog .mx_RoomTile_badge {
+    display: none;
+}
+
+.mx_ChatCreateOrReuseDialog_profile {
+    display: flex;
+}
+
+.mx_ChatCreateOrReuseDialog_profile_name {
+    padding: 14px;
+}

res/css/views/dialogs/_ChatInviteDialog.scss

@@ -0,0 +1,77 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+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_ChatInviteDialog {
+    /* XXX: padding-left is on mx_Dialog but padding-right has subsequently
+     * been added on other dialogs. Surely all our dialogs should have consistent
+     * right hand padding?
+     */
+    padding-right: 58px;
+}
+
+/* Using a textarea for this element, to circumvent autofill */
+.mx_ChatInviteDialog_input,
+.mx_ChatInviteDialog_input:focus
+{
+    height: 26px;
+    font-size: 14px;
+    font-family: $font-family;
+    padding-left: 12px;
+    padding-right: 12px;
+    margin: 0 !important;
+    border: 0 !important;
+    outline: 0 !important;
+    width: 1000%; /* Pretend that this is an "input type=text" */
+    resize: none;
+    overflow: hidden;
+    vertical-align: middle;
+    box-sizing: border-box;
+    word-wrap: nowrap;
+}
+
+.mx_ChatInviteDialog .mx_Dialog_content {
+    min-height: 50px
+}
+
+.mx_ChatInviteDialog_inputContainer {
+    border-radius: 3px;
+    border: solid 1px $input-border-color;
+    line-height: 36px;
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    max-height: 150px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.mx_ChatInviteDialog_error {
+    margin-top: 10px;
+    color: $warning-color;
+}
+
+.mx_ChatInviteDialog_cancel {
+    position: absolute;
+    right: 11px;
+    top: 13px;
+    cursor: pointer;
+}
+
+.mx_ChatInviteDialog_cancel object {
+    pointer-events: none;
+}
+

res/css/views/dialogs/_ConfirmUserActionDialog.scss

@@ -0,0 +1,53 @@
+/*
+Copyright 2017 Vector Creations Ltd.
+
+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_ConfirmUserActionDialog .mx_Dialog_content {
+    min-height: 48px;
+    margin-bottom: 24px;
+}
+
+.mx_ConfirmUserActionDialog_avatar {
+    float: left;
+    margin-right: 20px;
+    margin-top: -2px;
+}
+
+.mx_ConfirmUserActionDialog_name {
+    font-size: 18px;
+}
+
+.mx_ConfirmUserActionDialog_userId {
+    font-size: 13px;
+}
+
+.mx_ConfirmUserActionDialog_reasonField {
+    font-family: $font-family;
+    font-size: 14px;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
+
+    border-radius: 3px;
+    border: solid 1px $input-border-color;
+    line-height: 36px;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+
+    margin-bottom: 24px;
+
+    width: 90%;
+}

res/css/views/dialogs/_CreateGroupDialog.scss

@@ -0,0 +1,62 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+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_CreateGroupDialog_inputRow {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.mx_CreateGroupDialog_label {
+    text-align: left;
+    padding-bottom: 12px;
+}
+
+.mx_CreateGroupDialog_input {
+    font-size: 15px;
+    border-radius: 3px;
+    border: 1px solid $input-border-color;
+    padding: 9px;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
+}
+
+.mx_CreateGroupDialog_input_hasPrefixAndSuffix {
+    border-radius: 0px;
+}
+
+.mx_CreateGroupDialog_input_group {
+    display: flex;
+}
+
+.mx_CreateGroupDialog_prefix,
+.mx_CreateGroupDialog_suffix {
+    height: 35px;
+    padding: 0px 5px;
+    line-height: 37px;
+    background-color: $input-border-color;
+    border: 1px solid $input-border-color;
+    text-align: center;
+}
+
+.mx_CreateGroupDialog_prefix {
+    border-right: 0px;
+    border-radius: 3px 0px 0px 3px;
+}
+
+.mx_CreateGroupDialog_suffix {
+    border-left: 0px;
+    border-radius: 0px 3px 3px 0px;
+}

res/css/views/dialogs/_CreateRoomDialog.scss

@@ -0,0 +1,33 @@
+/*
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+
+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_CreateRoomDialog_details_summary {
+    outline: none;
+}
+
+.mx_CreateRoomDialog_label {
+    text-align: left;
+    padding-bottom: 12px;
+}
+
+.mx_CreateRoomDialog_input {
+    font-size: 15px;
+    border-radius: 3px;
+    border: 1px solid $input-border-color;
+    padding: 9px;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
+}

res/css/views/dialogs/_DeactivateAccountDialog.scss

@@ -0,0 +1,23 @@
+/*
+Copyright 2018 New Vector Ltd.
+
+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_DeactivateAccountDialog .mx_Dialog_content {
+    margin-bottom: 30px;
+}
+
+.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section {
+    margin-top: 60px;
+}

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -0,0 +1,166 @@
+/*
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+
+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_DevTools_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query {
+    margin-bottom: 10px;
+}
+
+.mx_DevTools_label_left {
+    float: left;
+}
+
+.mx_DevTools_label_right {
+    float: right;
+}
+
+.mx_DevTools_label_bottom {
+    clear: both;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.mx_DevTools_inputRow
+{
+    display: table-row;
+}
+
+.mx_DevTools_inputLabelCell
+{
+    padding-bottom: 21px;
+    display: table-cell;
+    font-weight: bold;
+    padding-right: 24px;
+}
+
+.mx_DevTools_inputCell {
+    display: table-cell;
+    padding-bottom: 21px;
+    width: 240px;
+}
+
+.mx_DevTools_inputCell input
+{
+    display: inline-block;
+    border: 0;
+    border-bottom: 1px solid $input-underline-color;
+    padding: 0;
+    width: 240px;
+    color: $input-fg-color;
+    font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
+    font-size: 16px;
+}
+
+.mx_DevTools_tgl {
+    display: none;
+
+    // add default box-sizing for this scope
+    &,
+    &:after,
+    &:before,
+    & *,
+    & *:after,
+    & *:before,
+    & + .mx_DevTools_tgl-btn {
+        box-sizing: border-box;
+        &::selection {
+            background: none;
+        }
+    }
+
+    + .mx_DevTools_tgl-btn {
+        outline: 0;
+        display: block;
+        width: 7em;
+        height: 2em;
+        position: relative;
+        cursor: pointer;
+        user-select: none;
+        &:after,
+        &:before {
+            position: relative;
+            display: block;
+            content: "";
+            width: 50%;
+            height: 100%;
+        }
+
+        &:after {
+            left: 0;
+        }
+
+        &:before {
+            display: none;
+        }
+    }
+
+    &:checked + .mx_DevTools_tgl-btn:after {
+        left: 50%;
+    }
+}
+
+.mx_DevTools_tgl-flip {
+    + .mx_DevTools_tgl-btn {
+        padding: 2px;
+        transition: all .2s ease;
+        font-family: sans-serif;
+        perspective: 100px;
+        &:after,
+        &:before {
+            display: inline-block;
+            transition: all .4s ease;
+            width: 100%;
+            text-align: center;
+            position: absolute;
+            line-height: 2em;
+            font-weight: bold;
+            color: #fff;
+            top: 0;
+            left: 0;
+            backface-visibility: hidden;
+            border-radius: 4px;
+        }
+
+        &:after {
+            content: attr(data-tg-on);
+            background: #02C66F;
+            transform: rotateY(-180deg);
+        }
+
+        &:before {
+            background: #FF3A19;
+            content: attr(data-tg-off);
+        }
+
+        &:active:before {
+            transform: rotateY(-20deg);
+        }
+    }
+
+    &:checked + .mx_DevTools_tgl-btn {
+        &:before {
+            transform: rotateY(180deg);
+        }
+
+        &:after {
+            transform: rotateY(0);
+            left: 0;
+            background: #7FC6A6;
+        }
+
+        &:active:after {
+            transform: rotateY(20deg);
+        }
+    }
+}

res/css/views/dialogs/_EncryptedEventDialog.scss

@@ -0,0 +1,27 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+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_EncryptedEventDialog .mx_MemberDeviceInfo {
+    float: right;
+    padding: 0px;
+    margin-right: 42px;
+}
+
+.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {
+    @mixin mx_DialogButton;
+    background-color: $primary-bg-color;
+    color: $accent-color;
+}

res/css/views/dialogs/_GroupAddressPicker.scss

@@ -0,0 +1,25 @@
+/*
+Copyright 2017 New Vector Ltd
+
+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_GroupAddressPicker_checkboxContainer{
+    margin-top: 10px;
+    display: flex;
+}
+
+.mx_GroupAddressPicker_checkboxContainer input[type="checkbox"] {
+    /* Stop flex from shrinking the checkbox */
+    width: 20px;
+}

res/css/views/dialogs/_QuestionDialog.scss

@@ -0,0 +1,18 @@
+/*
+Copyright 2017 New Vector Ltd.
+
+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_QuestionDialog {
+    padding-right: 58px;
+}

res/css/views/dialogs/_SetEmailDialog.scss

@@ -0,0 +1,36 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+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_SetEmailDialog_email_input {
+    border-radius: 3px;
+    border: 1px solid $input-border-color;
+    padding: 9px;
+    color: $input-fg-color;
+    background-color: $primary-bg-color;
+    font-size: 15px;
+    width: 100%;
+    max-width: 280px;
+    margin-bottom: 10px;
+}
+
+.mx_SetEmailDialog_email_input:focus {
+    outline: none;
+    box-shadow: none;
+    border: 1px solid $accent-color;
+}
+
+.mx_SetEmailDialog_email_input_placeholder {
+}

res/css/views/dialogs/_SetMxIdDialog.scss

@@ -0,0 +1,50 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+
+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_SetMxIdDialog .mx_Dialog_title {
+    padding-right: 40px;
+}
+
+.mx_SetMxIdDialog_input_group {
+    display: flex;
+}
+
+.mx_SetMxIdDialog_input {
+    border-radius: 3px;
+    border: 1px solid $input-border-color;
+    padding: 9px;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
+    font-size: 15px;
+    width: 100%;
+    max-width: 280px;
+}
+
+.mx_SetMxIdDialog_input.error,
+.mx_SetMxIdDialog_input.error:focus {
+    border: 1px solid $warning-color;
+}
+
+.mx_SetMxIdDialog_input_group .mx_Spinner {
+    height: 37px;
+    padding-left: 10px;
+    justify-content: flex-start;
+}
+
+.mx_SetMxIdDialog .success {
+    color: $accent-color;
+}

res/css/views/dialogs/_SetPasswordDialog.scss

@@ -0,0 +1,35 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+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_SetPasswordDialog_change_password input {
+    border-radius: 3px;
+    border: 1px solid $input-border-color;
+    padding: 9px;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
+    font-size: 15px;
+    width: 100%;
+    max-width: 280px;
+    margin-bottom: 10px;
+}
+
+.mx_SetPasswordDialog_change_password_button {
+    margin-top: 68px;
+}
+
+.mx_SetPasswordDialog .mx_Dialog_content {
+    margin-bottom: 0px;
+}

res/css/views/dialogs/_UnknownDeviceDialog.scss

@@ -0,0 +1,54 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+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.
+*/
+
+// CSS voodoo to support a gemini-scrollbar for the contents of the dialog
+.mx_Dialog_unknownDevice .mx_Dialog {
+    // ideally we'd shrink the height to fit when needed, but in practice this
+    // is a pain in the ass. plus might as well make the dialog big given how
+    // important it is.
+    height: 100%;
+
+    // position the gemini scrollbar nicely
+    padding-right: 58px;
+}
+
+.mx_UnknownDeviceDialog {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_UnknownDeviceDialog .mx_Dialog_content {
+    margin-bottom: 24px;
+}
+
+.mx_UnknownDeviceDialog .mx_MemberDeviceInfo {
+    float: right;
+    clear: both;
+    padding: 0px;
+    padding-top: 8px;
+}
+
+.mx_UnknownDeviceDialog .mx_MemberDeviceInfo_textButton {
+    @mixin mx_DialogButton_small;
+    background-color: $primary-bg-color;
+    color: $accent-color;
+}
+
+.mx_UnknownDeviceDialog .mx_UnknownDeviceDialog_deviceList li {
+    height: 40px;
+    border-bottom: 1px solid $primary-hairline-color;
+}

res/css/views/directory/_NetworkDropdown.scss

@@ -0,0 +1,84 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_NetworkDropdown {
+    position: relative;
+}
+
+.mx_NetworkDropdown_input {
+    position: relative;
+    border-radius: 3px;
+    border: 1px solid $strong-input-border-color;
+    font-weight: 300;
+    font-size: 13px;
+    user-select: none;
+}
+
+.mx_NetworkDropdown_arrow {
+    border-color: $primary-fg-color transparent transparent;
+    border-style: solid;
+    border-width: 5px 5px 0;
+    display: block;
+    height: 0;
+    position: absolute;
+    right: 10px;
+    top: 14px;
+    width: 0
+}
+
+.mx_NetworkDropdown_networkoption {
+    height: 35px;
+    line-height: 35px;
+    padding-left: 8px;
+    padding-right: 8px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.mx_NetworkDropdown_networkoption img {
+    margin: 5px;
+    width: 25px;
+    vertical-align: middle;
+}
+
+input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:focus {
+    border: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.mx_NetworkDropdown_menu {
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    top: 100%;
+    z-index: 2;
+    margin: 0;
+    padding: 0px;
+    border-radius: 3px;
+    border: 1px solid $accent-color;
+    background-color: $primary-bg-color;
+}
+
+.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
+    background-color: $focus-bg-color;
+}
+
+.mx_NetworkDropdown_menu_network {
+    font-weight: bold;
+}
+

res/css/views/elements/_AccessibleButton.scss

@@ -0,0 +1,24 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+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_AccessibleButton:focus {
+    outline: 0;
+    filter: brightness($focus-brightness);
+}
+
+.mx_AccessibleButton {
+    cursor: pointer;
+}

res/css/views/elements/_AddressSelector.scss

@@ -0,0 +1,45 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+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_AddressSelector {
+    position: absolute;
+    background-color: $primary-bg-color;
+    width: 485px;
+    max-height: 116px;
+    overflow-y: auto;
+	border-radius: 3px;
+	background-color: $primary-bg-color;
+	border: solid 1px $accent-color;
+    cursor: pointer;
+}
+
+.mx_AddressSelector.mx_AddressSelector_empty {
+    display: none;
+}
+
+.mx_AddressSelector_addressListElement .mx_AddressTile {
+    background-color: $primary-bg-color;
+    border: solid 1px $primary-bg-color;
+}
+
+.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
+    background-color: $selected-color;
+}
+
+.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
+    background-color: $selected-color;
+    border: solid 1px $selected-color;
+}

res/css/views/elements/_AddressTile.scss

@@ -0,0 +1,138 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_AddressTile {
+    display: inline-block;
+    border-radius: 3px;
+    background-color: rgba(74, 73, 74, 0.1);
+    border: solid 1px $input-border-color;
+    line-height: 26px;
+    color: $primary-fg-color;
+    font-size: 14px;
+    font-weight: normal;
+    margin-right: 4px;
+}
+
+.mx_AddressTile.mx_AddressTile_error {
+    background-color: rgba(255, 0, 100, 0.1);
+    color: $warning-color;
+    border-color: $warning-color;
+}
+
+.mx_AddressTile_network {
+    display: inline-block;
+    position: relative;
+    padding-left: 2px;
+    padding-right: 4px;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_avatar {
+    display: inline-block;
+    position: relative;
+    padding-left: 2px;
+    padding-right: 7px;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_mx {
+    display: inline-block;
+    margin: 0;
+    border: 0;
+    padding: 0;
+}
+
+.mx_AddressTile_name {
+    display: inline-block;
+    padding-right: 4px;
+    font-weight: 600;
+    overflow: hidden;
+    height: 26px;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_name.mx_AddressTile_justified {
+    width: 180px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_id {
+    display: inline-block;
+    padding-right: 11px;
+}
+
+.mx_AddressTile_id.mx_AddressTile_justified {
+    width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_unknownMx {
+    display: inline-block;
+    font-weight: 600;
+    padding-right: 11px;
+}
+
+.mx_AddressTile_unknownMxl.mx_AddressTile_justified {
+    width: 380px; /* name + id width */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_email {
+    display: inline-block;
+    font-weight: 600;
+    padding-right: 11px;
+}
+
+.mx_AddressTile_email.mx_AddressTile_justified {
+    width: 200px; /* same as id width */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_unknown {
+    display: inline-block;
+    padding-right: 11px;
+}
+
+.mx_AddressTile_unknown.mx_AddressTile_justified {
+    width: 380px; /* name + id width */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_dismiss {
+    display: inline-block;
+    padding-right: 11px;
+    padding-left: 1px;
+    cursor: pointer;
+}
+
+.mx_AddressTile_dismiss object {
+    pointer-events: none;
+}

res/css/views/elements/_DirectorySearchBox.scss

@@ -0,0 +1,70 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+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_DirectorySearchBox {
+    position: relative;
+    border-radius: 3px;
+    border: 1px solid $strong-input-border-color;
+}
+
+.mx_DirectorySearchBox_container {
+    display: flex;
+    padding-left: 9px;
+    padding-right: 9px;
+}
+
+.mx_DirectorySearchBox_input {
+    flex-grow: 1;
+    border: 0;
+    padding: 0;
+    font-weight: 300;
+    font-size: 13px;
+}
+input[type=text].mx_DirectorySearchBox_input:focus {
+    border: 0;
+}
+
+.mx_DirectorySearchBox_joinButton {
+    display: table-cell;
+    padding: 3px;
+    padding-left: 10px;
+    padding-right: 10px;
+    background-color: $plinth-bg-color;
+    border-radius: 3px;
+    background-image: url('../../img/icon-return.svg');
+    background-position: 8px 70%;
+    background-repeat: no-repeat;
+    text-indent: 18px;
+    font-weight: 600;
+    font-size: 12px;
+    user-select: none;
+    cursor: pointer;
+}
+
+.mx_DirectorySearchBox_clear_wrapper {
+    display: table-cell;
+}
+
+.mx_DirectorySearchBox_clear {
+    display: inline-block;
+    vertical-align: middle;
+    background: url('../../img/icon_context_delete.svg');
+    background-position: 0 50%;
+    background-repeat: no-repeat;
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+}

res/css/views/elements/_Dropdown.scss

@@ -0,0 +1,131 @@
+/*
+Copyright 2017 OpenMarket Ltd
+
+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_Dropdown {
+    position: relative;
+}
+
+.mx_Dropdown_disabled {
+    opacity: 0.3;
+}
+
+.mx_Dropdown_input {
+    position: relative;
+    border-radius: 3px;
+    border: 1px solid $strong-input-border-color;
+    font-weight: 300;
+    font-size: 13px;
+    user-select: none;
+}
+
+.mx_Dropdown_input:focus {
+    border-color: $accent-color;
+}
+
+/* Disable dropdown highlight on focus */
+.mx_Dropdown_input.mx_AccessibleButton:focus {
+    filter: none;
+}
+
+.mx_Dropdown_arrow {
+    border-color: $primary-fg-color transparent transparent;
+    border-style: solid;
+    border-width: 5px 5px 0;
+    display: block;
+    height: 0;
+    position: absolute;
+    right: 10px;
+    top: 14px;
+    width: 0
+}
+
+.mx_Dropdown.left_aligned .mx_Dropdown_arrow {
+    left: 10px;
+}
+
+.mx_Dropdown_input > .mx_Dropdown_option {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.mx_Dropdown.left_aligned .mx_Dropdown_input > .mx_Dropdown_option {
+    padding-left: 25px;
+}
+
+.mx_Dropdown_option {
+    height: 35px;
+    line-height: 35px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.mx_Dropdown_option div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.mx_Dropdown_option img {
+    margin: 5px;
+    width: 27px;
+    vertical-align: middle;
+}
+
+input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
+    border: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    // XXX: hack to prevent text box being too big and pushing
+    // its parent out / overlapping the dropdown arrow. Only really
+    // works in the Country dropdown.
+    width: 60%;
+}
+
+.mx_Dropdown_menu {
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    top: 100%;
+    z-index: 2;
+    margin: 0;
+    padding: 0px;
+    border-radius: 3px;
+    border: 1px solid $accent-color;
+    background-color: $primary-bg-color;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.mx_Dropdown_menu .mx_Dropdown_option {
+    height: auto;
+    min-height: 35px;
+}
+
+.mx_Dropdown_menu .mx_Dropdown_option_highlight {
+    background-color: $focus-bg-color;
+}
+
+.mx_Dropdown_menu {
+    font-weight: bold;
+}
+
+.mx_Dropdown_searchPrompt {
+    font-weight: normal;
+    margin-left: 5px;
+    margin-bottom: 5px;
+}
+

res/css/views/elements/_EditableItemList.scss

@@ -0,0 +1,62 @@
+/*
+Copyright 2017 New Vector Ltd.
+
+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_EditableItemList {
+    margin-top: 12px;
+    margin-bottom: 0px;
+}
+
+.mx_EditableItem {
+    display: flex;
+    margin-left: 56px;
+}
+
+.mx_EditableItem .mx_EditableItem_editable {
+    border: 0px;
+    border-bottom: 1px solid $strong-input-border-color;
+    padding: 0px;
+    min-width: 240px;
+    max-width: 400px;
+    margin-bottom: 16px;
+}
+
+.mx_EditableItem .mx_EditableItem_editable:focus {
+    border-bottom: 1px solid $accent-color;
+    outline: none;
+    box-shadow: none;
+}
+
+.mx_EditableItem .mx_EditableItem_editablePlaceholder {
+    color: $settings-grey-fg-color;
+}
+
+.mx_EditableItem .mx_EditableItem_addButton,
+.mx_EditableItem .mx_EditableItem_removeButton {
+    padding-left: 0.5em;
+    position: relative;
+    cursor: pointer;
+
+    visibility: hidden;
+}
+
+.mx_EditableItem:hover .mx_EditableItem_addButton,
+.mx_EditableItem:hover .mx_EditableItem_removeButton {
+    visibility: visible;
+}
+
+.mx_EditableItemList_label {
+    margin-bottom: 8px;
+}

res/css/views/elements/_ImageView.scss

@@ -0,0 +1,134 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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.
+*/
+
+/* This has got to be the most fragile piece of CSS ever written.
+   But empirically it works on Chrome/FF/Safari
+ */
+
+.mx_ImageView {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+}
+
+.mx_ImageView_lhs {
+    order: 1;
+    flex: 1 1 10%;
+    min-width: 60px;
+    // background-color: #080;
+    // height: 20px;
+}
+
+.mx_ImageView_content {
+    order: 2;
+    /* min-width hack needed for FF */
+    min-width: 0px;
+    height: 90%;
+    flex: 15 15 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_ImageView_content img {
+    max-width: 100%;
+    /* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
+    max-height: 100%;
+    /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
+    object-fit: contain;
+    /* background-image: url('../../img/trans.png'); */
+    pointer-events: all;
+}
+
+.mx_ImageView_labelWrapper {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    height: 100%;
+    overflow: auto;
+    pointer-events: all;
+}
+
+.mx_ImageView_label {
+    text-align: left;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    padding-left: 30px;
+    padding-right: 30px;
+    min-height: 100%;
+    max-width: 240px;
+    color: $lightbox-fg-color;
+}
+
+.mx_ImageView_cancel {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    padding: 35px;
+    cursor: pointer;
+}
+
+.mx_ImageView_name {
+    font-size: 18px;
+    margin-bottom: 6px;
+    word-wrap: break-word;
+}
+
+.mx_ImageView_metadata {
+    font-size: 15px;
+    opacity: 0.5;
+}
+
+.mx_ImageView_download {
+    display: table;
+    margin-top: 24px;
+    margin-bottom: 6px;
+    border-radius: 5px;
+    background-color: $lightbox-bg-color;
+    font-size: 14px;
+    padding: 9px;
+    border: 1px solid $lightbox-border-color;
+}
+
+.mx_ImageView_size {
+    font-size: 11px;
+}
+
+.mx_ImageView_link {
+    color: $lightbox-fg-color ! important;
+    text-decoration: none ! important;
+}
+
+.mx_ImageView_button {
+    font-size: 15px;
+    opacity: 0.5;
+    margin-top: 18px;
+    cursor: pointer;
+}
+
+.mx_ImageView_shim {
+    height: 30px;
+}
+
+.mx_ImageView_rhs {
+    order: 3;
+    flex: 1 1 10%;
+    min-width: 300px;
+    // background-color: #800;
+    // height: 20px;
+}

res/css/views/elements/_InlineSpinner.scss

@@ -0,0 +1,24 @@
+/*
+Copyright 2017 New Vector Ltd.
+
+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_InlineSpinner {
+    display: inline;
+}
+
+.mx_InlineSpinner img {
+    margin: 0px 6px;
+    vertical-align: -3px;
+}

res/css/views/elements/_MemberEventListSummary.scss

@@ -0,0 +1,71 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+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_MemberEventListSummary {
+    position: relative;
+}
+
+.mx_TextualEvent.mx_MemberEventListSummary_summary {
+    font-size: 14px;
+    display: inline-flex;
+}
+
+.mx_MemberEventListSummary_avatars {
+    display: inline-block;
+    margin-right: 8px;
+    padding-top: 8px;
+    line-height: 12px;
+}
+
+.mx_MemberEventListSummary_avatars .mx_BaseAvatar {
+    margin-right: -4px;
+    cursor: pointer;
+}
+
+.mx_MemberEventListSummary_toggle {
+    color: $accent-color;
+    cursor: pointer;
+    float: right;
+    margin-right: 10px;
+    margin-top: 8px;
+}
+
+.mx_MemberEventListSummary_line {
+    border-bottom: 1px solid $primary-hairline-color;
+    margin-left: 63px;
+    line-height: 30px;
+}
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_MemberEventListSummary {
+        font-size: 13px;
+        .mx_EventTile_line {
+            line-height: 20px;
+        }
+    }
+
+    .mx_MemberEventListSummary_line {
+        line-height: 22px;
+    }
+
+    .mx_MemberEventListSummary_toggle {
+        margin-top: 3px;
+    }
+
+    .mx_TextualEvent.mx_MemberEventListSummary_summary {
+        font-size: 13px;
+    }
+}

res/css/views/elements/_ProgressBar.scss

@@ -0,0 +1,25 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_ProgressBar {
+    height: 5px;
+    border: 1px solid $progressbar-color;
+}
+
+.mx_ProgressBar_fill {
+    height: 100%;
+    background-color: $progressbar-color;
+}

res/css/views/elements/_ReplyThread.scss

@@ -0,0 +1,37 @@
+/*
+Copyright 2018 Vector Creations Ltd
+
+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_ReplyThread {
+    margin-top: 0;
+}
+
+.mx_ReplyThread .mx_DateSeparator {
+    font-size: 1em !important;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-bottom: 1px;
+    bottom: -5px;
+}
+
+.mx_ReplyThread_show {
+    cursor: pointer;
+}
+
+blockquote.mx_ReplyThread {
+    margin-left: 0;
+    padding-left: 10px;
+    border-left: 4px solid $blockquote-bar-color;
+}

res/css/views/elements/_RichText.scss

@@ -0,0 +1,75 @@
+// XXX: bleurgh, what is this? These classes totally break the component
+// naming scheme; it's completely unclear where or how they're being used
+// --Matthew
+
+.mx_UserPill,
+.mx_RoomPill,
+.mx_AtRoomPill {
+    border-radius: 16px;
+    display: inline-block;
+    height: 20px;
+    line-height: 20px;
+    padding-left: 5px;
+}
+
+.mx_EventTile_body .mx_UserPill,
+.mx_EventTile_body .mx_RoomPill {
+    cursor: pointer;
+}
+
+/* More specific to override `.markdown-body a` color */
+.mx_EventTile_content .markdown-body a.mx_UserPill,
+.mx_UserPill {
+    color: $primary-fg-color;
+    background-color: $other-user-pill-bg-color;
+    padding-right: 5px;
+}
+
+.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
+.mx_EventTile_content .mx_AtRoomPill,
+.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 */
+.mx_EventTile_content .markdown-body a.mx_RoomPill,
+.mx_RoomPill {
+    color: $accent-fg-color;
+    background-color: $rte-room-pill-color;
+    padding-right: 5px;
+}
+
+.mx_UserPill .mx_BaseAvatar,
+.mx_RoomPill .mx_BaseAvatar,
+.mx_AtRoomPill .mx_BaseAvatar {
+    position: relative;
+    left: -3px;
+    top: 2px;
+}
+
+.mx_Markdown_BOLD {
+    font-weight: bold;
+}
+
+.mx_Markdown_ITALIC {
+    font-style: italic;
+}
+
+.mx_Markdown_CODE {
+    padding: .2em 0;
+    margin: 0;
+    font-size: 85%;
+    background-color: $rte-code-bg-color;
+    border-radius: 3px;
+}
+
+.mx_Markdown_HR {
+    display: block;
+    background: $rte-bg-color;
+}
+
+.mx_Markdown_STRIKETHROUGH {
+    text-decoration: line-through;
+}

res/css/views/elements/_RoleButton.scss

@@ -0,0 +1,33 @@
+/*
+Copyright 2107 Vector Creations Ltd
+
+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_RoleButton {
+    margin-left: 4px;
+    margin-right: 4px;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.mx_RoleButton object {
+    pointer-events: none;
+}
+
+.mx_RoleButton_tooltip {
+    display: inline-block;
+    position: relative;
+    top: -25px;
+    left: 6px;
+}

res/css/views/elements/_Spinner.scss

@@ -0,0 +1,28 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_Spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+}
+
+.mx_MatrixChat_middlePanel .mx_Spinner {
+    height: auto;
+}

res/css/views/elements/_SyntaxHighlight.scss

@@ -0,0 +1,21 @@
+/*
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+
+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_SyntaxHighlight {
+    /* inhibit hljs styling */
+    background: none !important;
+    color: $light-fg-color !important;
+}

res/css/views/elements/_ToolTipButton.scss

@@ -0,0 +1,51 @@
+/*
+Copyright 2017 New Vector Ltd.
+
+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_ToolTipButton {
+    display: inline-block;
+    width: 11px;
+    height: 11px;
+    margin-left: 5px;
+
+    border: 2px solid $neutral-badge-color;
+    border-radius: 20px;
+    color: $neutral-badge-color;
+
+    transition: opacity 0.2s ease-in;
+    opacity: 0.6;
+
+    line-height: 11px;
+    text-align: center;
+
+    cursor: pointer;
+}
+
+.mx_ToolTipButton:hover {
+    opacity: 1.0;
+}
+
+.mx_ToolTipButton_container {
+    position: relative;
+    top: -18px;
+    left: 4px;
+}
+
+.mx_ToolTipButton_helpText {
+    width: 400px;
+    text-align: start;
+    line-height: 17px !important;
+}
+

res/css/views/globals/_MatrixToolbar.scss

@@ -0,0 +1,62 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_MatrixToolbar {
+    background-color: $accent-color;
+    color: $accent-fg-color;
+
+    display: flex;
+    align-items: center;
+}
+
+.mx_MatrixToolbar_warning {
+    margin-left: 16px;
+    margin-right: 8px;
+    margin-top: -2px;
+}
+
+.mx_MatrixToolbar_content {
+    flex: 1;
+}
+
+.mx_MatrixToolbar_link
+{
+    color: $accent-fg-color ! important;
+    text-decoration: underline ! important;
+    cursor: pointer;
+}
+
+.mx_MatrixToolbar_clickable {
+    cursor: pointer;
+}
+
+.mx_MatrixToolbar_close {
+    cursor: pointer;
+}
+
+.mx_MatrixToolbar_close img {
+    display: block;
+    float: right;
+    margin-right: 10px;
+}
+
+.mx_MatrixToolbar_action {
+    margin-right: 16px;
+}
+
+.mx_MatrixToolbar_changelog {
+    white-space: pre;
+}

res/css/views/groups/_GroupPublicityToggle.scss

@@ -0,0 +1,42 @@
+/*
+Copyright 2017 New Vector Ltd
+
+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_GroupPublicity_toggle {
+    display: flex;
+    align-items: center;
+    margin: 8px;
+}
+
+.mx_GroupPublicity_toggle > label {
+    display: flex;
+    align-items: flex-start;
+}
+
+.mx_GroupPublicity_toggle > label,
+.mx_GroupPublicity_toggle .mx_GroupTile {
+    width: 50%;
+}
+
+.mx_GroupPublicity_toggle input {
+    margin-right: 8px;
+    vertical-align: -4px;
+}
+
+.mx_GroupPublicity_toggle .mx_GroupTile {
+    display: flex;
+    align-items: flex-start;
+    cursor: pointer;
+}

res/css/views/groups/_GroupRoomList.scss

@@ -0,0 +1,21 @@
+/*
+Copyright 2017 New Vector Ltd
+
+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_GroupRoomTile {
+    position: relative;
+    color: $primary-fg-color;
+    cursor: pointer;
+}

res/css/views/groups/_GroupUserSettings.scss

@@ -0,0 +1,23 @@
+/*
+Copyright 2017 New Vector Ltd
+
+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_GroupUserSettings_groupPublicity_scrollbox {
+    height: 200px;
+    border: 1px solid $primary-hairline-color;
+    border-radius: 3px;
+    margin-right: 32px;
+    overflow: hidden;
+}

res/css/views/login/_InteractiveAuthEntryComponents.scss

@@ -0,0 +1,42 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+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_InteractiveAuthEntryComponents_msisdnWrapper {
+    text-align: center;
+}
+
+.mx_InteractiveAuthEntryComponents_msisdnEntry {
+    font-size: 200%;
+    font-weight: bold;
+    border: 1px solid $strong-input-border-color;
+    border-radius: 3px;
+    width: 6em;
+}
+
+.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
+    border: 1px solid $accent-color;
+}
+
+.mx_InteractiveAuthEntryComponents_msisdnSubmit {
+    margin-top: 4px;
+    margin-bottom: 5px;
+}
+
+// XXX: This should be a common button class
+.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
+    background-color: $light-fg-color;
+    cursor: default;
+}

res/css/views/login/_ServerConfig.scss

@@ -0,0 +1,36 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_ServerConfig {
+    margin-top: 7px;
+}
+
+.mx_ServerConfig .mx_Login_field {
+    margin-top: 4px;
+    margin-bottom: 5px;
+}
+
+.mx_ServerConfig_help:link {
+    opacity: 0.8;
+    font-size: 13px;
+    font-weight: 300;
+    color: $primary-fg-color;
+}
+
+.mx_ServerConfig_selector {
+    text-align: center;
+    width: 302px; // for fr i18n
+}

res/css/views/messages/_DateSeparator.scss

@@ -0,0 +1,25 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+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_DateSeparator {
+    clear: both;
+    margin-top: 32px;
+    margin-bottom: 8px;
+    margin-left: 63px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid $primary-hairline-color;
+}
+

res/css/views/messages/_MEmoteBody.scss

@@ -0,0 +1,23 @@
+/*
+Copyright 2017 Vector Creations Ltd.
+
+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_MEmoteBody {
+    white-space: pre-wrap;
+}
+
+.mx_MEmoteBody_sender {
+    cursor: pointer;
+}

res/css/views/messages/_MFileBody.scss

@@ -0,0 +1,47 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_MFileBody_download {
+    color: $accent-color;
+}
+
+.mx_MFileBody_download a {
+    color: $accent-color;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.mx_MFileBody_download object {
+    margin-left: -16px;
+    padding-right: 4px;
+    margin-top: -4px;
+    vertical-align: middle;
+    pointer-events: none;
+}
+
+/* Remove the border and padding for iframes for download links. */
+.mx_MFileBody_download iframe {
+    margin: 0px;
+    padding: 0px;
+    border: none;
+    width: 100%;
+    /* Set the height of the iframe to be 1 line of text.
+     * Iframes don't automatically size themselves to fit their content.
+     * So either we have to fix the height of the iframe using CSS or
+     * use javascript's cross-origin postMessage API to communicate how
+     * big the content of the iframe is. */
+    height: 1.5em;
+}

res/css/views/messages/_MImageBody.scss

@@ -0,0 +1,24 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_MImageBody {
+    display: block;
+    margin-right: 34px;
+}
+
+.mx_MImageBody_thumbnail {
+    max-width: 100%;
+}

res/css/views/messages/_MNoticeBody.scss

@@ -0,0 +1,20 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_MNoticeBody {
+    white-space: pre-wrap;
+    opacity: 0.6;
+}

res/css/views/messages/_MStickerBody.scss

@@ -0,0 +1,46 @@
+/*
+Copyright 2018 New Vector Ltd.
+
+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_MStickerBody {
+  display: block;
+  margin-right: 34px;
+  min-height: 110px;
+  padding: 20px 0;
+}
+
+.mx_MStickerBody_image_container {
+  display: inline-block;
+  position: relative;
+}
+
+.mx_MStickerBody_image {
+  max-width: 100%;
+  opacity: 0;
+}
+
+.mx_MStickerBody_image_visible {
+  opacity: 1;
+}
+
+.mx_MStickerBody_placeholder {
+  position: absolute;
+  opacity: 1;
+}
+
+.mx_MStickerBody_placeholder_invisible {
+  transition: 500ms;
+  opacity: 0;
+}

res/css/views/messages/_MTextBody.scss

@@ -0,0 +1,24 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_MTextBody {
+    white-space: pre-wrap;
+}
+
+.mx_MTextBody pre{
+  overflow-y: auto;
+  max-height: 30vh;
+}

res/css/views/messages/_MessageTimestamp.scss

@@ -0,0 +1,18 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_MessageTimestamp {
+}

res/css/views/messages/_RoomAvatarEvent.scss

@@ -0,0 +1,26 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+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_RoomAvatarEvent {
+    opacity: 0.5;
+    overflow-y: hidden;
+}
+
+.mx_RoomAvatarEvent_avatar {
+    display: inline;
+    position: relative;
+    top: 5px;
+}

res/css/views/messages/_SenderProfile.scss

@@ -0,0 +1,15 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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.
+*/

res/css/views/messages/_TextualEvent.scss

@@ -0,0 +1,20 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_TextualEvent {
+    opacity: 0.5;
+    overflow-y: hidden;
+}

res/css/views/messages/_UnknownBody.scss

@@ -0,0 +1,16 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+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_UnknownBody {
+    white-space: pre-wrap;
+}

res/css/views/rooms/_AppsDrawer.scss

@@ -0,0 +1,284 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_AppsDrawer {
+    margin: 5px;
+}
+
+.mx_AppsDrawer_hidden {
+    display: none;
+}
+
+.mx_AppsContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_AddWidget_button {
+    order: 2;
+    cursor: pointer;
+    padding-right: 12px;
+    padding: 0;
+    margin: 5px auto 5px auto;
+    color: $accent-color;
+    font-size: 12px;
+}
+
+.mx_AddWidget_button_full_width {
+    max-width: 960px;
+}
+
+.mx_SetAppURLDialog_input {
+    border-radius: 3px;
+    border: 1px solid $input-border-color;
+    padding: 9px;
+    color: $primary-hairline-color;
+    background-color: $primary-bg-color;
+    font-size: 15px;
+}
+
+.mx_AppTile {
+    max-width: 960px;
+    width: 50%;
+    margin-right: 5px;
+    border: 1px solid $primary-hairline-color;
+    border-radius: 2px;
+    background-color: $dialog-background-bg-color;
+}
+
+.mx_AppTile:last-child {
+    margin-right: 1px;
+}
+
+.mx_AppTileFullWidth {
+    max-width: 960px;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: 1px solid $primary-hairline-color;
+    border-radius: 2px;
+}
+
+.mx_AppTileMenuBar {
+    margin: 0;
+    padding: 2px 10px;
+    border-bottom: 1px solid $primary-hairline-color;
+    font-size: 10px;
+    background-color: $widget-menu-bar-bg-color;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+}
+
+.mx_AppTileMenuBarTitle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    pointer-events: none;
+}
+
+.mx_AppTileMenuBarWidgets {
+    float: right;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.mx_AppTileMenuBarWidget {
+    cursor: pointer;
+    width: 10px;
+    height: 10px;
+    padding: 1px;
+    transition-duration: 500ms;
+    border: 1px solid transparent;
+}
+
+.mx_AppTileMenuBarWidgetDelete {
+    filter: none;
+}
+
+.mx_AppTileMenuBarWidget:hover {
+    border: 1px solid $primary-fg-color;
+    border-radius: 2px;
+}
+
+.mx_AppTileBody{
+    height: 280px;
+    width: 100%;
+    overflow: hidden;
+}
+
+.mx_AppTileBody iframe {
+    width: 100%;
+    height: 280px;
+    overflow: hidden;
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: block;
+}
+
+.mx_AppTileMenuBarWidgetPadding {
+    margin-right: 5px;
+}
+
+.mx_AppIconTile {
+    background-color: $lightbox-bg-color;
+    border: 1px solid rgba(0, 0, 0, 0);
+    width: 200px;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    transition: 0.3s;
+    border-radius: 3px;
+    margin: 5px;
+    display: inline-block;
+}
+
+.mx_AppIconTile.mx_AppIconTile_active {
+    color: $accent-color;
+    border-color: $accent-color;
+}
+
+.mx_AppIconTile:hover {
+    border: 1px solid $accent-color;
+    box-shadow: 0 0 10px 5px rgba(200,200,200,0.5);
+}
+
+.mx_AppIconTile_content {
+    padding: 2px 16px;
+    height: 60px;
+    overflow: hidden;
+}
+
+.mx_AppIconTile_content h4 {
+    margin-top: 5px;
+    margin-bottom: 2px;
+}
+
+.mx_AppIconTile_content p {
+    margin-top: 0;
+    margin-bottom: 5px;
+    font-size: smaller;
+}
+
+.mx_AppIconTile_image {
+    padding: 10px;
+    width: 75%;
+    max-width:100px;
+    max-height:100px;
+    width: auto;
+    height: auto;
+}
+
+.mx_AppIconTile_imageContainer {
+    text-align: center;
+    width: 100%;
+    background-color: white;
+    border-radius: 3px 3px 0 0;
+    height: 155px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+form.mx_Custom_Widget_Form div {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.mx_AppPermissionWarning {
+    text-align: center;
+    background-color: $primary-bg-color;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.mx_AppPermissionWarningImage {
+    margin: 10px 0;
+}
+
+.mx_AppPermissionWarningImage img {
+    width: 100px;
+}
+
+.mx_AppPermissionWarningText {
+    max-width: 400px;
+    margin: 10px auto 10px auto;
+    color: $primary-fg-color;
+}
+
+.mx_AppPermissionWarningTextLabel {
+    font-weight: bold;
+    display: block;
+}
+
+.mx_AppPermissionWarningTextURL {
+    color: $accent-color;
+}
+
+.mx_AppPermissionButton {
+    padding: 5px;
+    border-radius: 5px;
+    color: $warning-color;
+    background-color: $primary-bg-color;
+}
+
+.mx_AppPermissionButton:hover {
+    background-color: $primary-fg-color;
+    cursor: pointer;
+}
+
+.mx_AppLoading {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    position: relative;
+    height: 280px;
+}
+
+.mx_AppLoading .mx_Spinner {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.mx_AppLoading_spinner_fadeIn {
+    animation-fill-mode: backwards;
+    animation-duration: 200ms;
+    animation-delay: 500ms;
+    animation-name: mx_AppLoading_spinner_fadeIn_animation;
+}
+
+@keyframes mx_AppLoading_spinner_fadeIn_animation {
+    from { opacity: 0 }
+    to { opacity: 1 }
+}
+
+
+.mx_AppLoading iframe {
+  display: none;
+}

res/css/views/rooms/_Autocomplete.scss

@@ -0,0 +1,93 @@
+.mx_Autocomplete {
+    position: absolute;
+    bottom: 0;
+    z-index: 1001;
+    width: 100%;
+    border: 1px solid $primary-hairline-color;
+    background: $primary-bg-color;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+    max-height: 50vh;
+    overflow: auto
+}
+
+.mx_Autocomplete_ProviderSection {
+    border-bottom: 1px solid $primary-hairline-color;
+}
+
+.mx_Autocomplete_Completion_container_pill {
+    margin: 12px;
+    display: flex;
+}
+
+/* a "block" completion takes up a whole line */
+.mx_Autocomplete_Completion_block {
+    height: 34px;
+    display: flex;
+    padding: 0 12px;
+    user-select: none;
+    cursor: pointer;
+    align-items: center;
+    color: $primary-fg-color;
+}
+
+.mx_Autocomplete_Completion_block * {
+     margin: 0 3px;
+}
+
+.mx_Autocomplete_Completion_pill {
+    border-radius: 17px;
+    height: 34px;
+    padding: 0px 5px;
+    display: flex;
+    user-select: none;
+    cursor: pointer;
+    align-items: center;
+    color: $primary-fg-color;
+}
+
+.mx_Autocomplete_Completion_pill > * {
+    margin: 0 3px;
+}
+
+.mx_Autocomplete_Completion_container_truncate {
+    .mx_Autocomplete_Completion_title,
+    .mx_Autocomplete_Completion_subtitle,
+    .mx_Autocomplete_Completion_description {
+        /* Ellipsis for long names/subtitles/descriptions*/
+        max-width: 150px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+/* container for pill-style completions */
+.mx_Autocomplete_Completion_container_pill {
+    margin: 12px;
+    display: flex;
+    flex-flow: wrap;
+}
+
+.mx_Autocomplete_Completion.selected {
+    background: $menu-bg-color;
+    outline: none;
+}
+
+.mx_Autocomplete_provider_name {
+    margin: 12px;
+    color: $primary-fg-color;
+    font-weight: 400;
+    opacity: 0.4;
+}
+
+/* styling for common completion elements */
+.mx_Autocomplete_Completion_subtitle {
+    font-style: italic;
+    flex: 1;
+}
+
+.mx_Autocomplete_Completion_description {
+    color: gray;
+}
+

res/css/views/rooms/_EntityTile.scss

@@ -0,0 +1,114 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_EntityTile {
+    display: table-row;
+    position: relative;
+    color: $primary-fg-color;
+    cursor: pointer;
+}
+
+.mx_EntityTile_invite {
+    display: table-cell;
+    vertical-align: middle;
+    margin-left: 10px;
+    width: 26px;
+}
+
+.mx_EntityTile_avatar,
+.mx_GroupRoomTile_avatar {
+    display: table-cell;
+    padding-left: 3px;
+    padding-right: 12px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    vertical-align: middle;
+    width: 36px;
+    height: 36px;
+    position: relative;
+}
+
+.mx_EntityTile_power {
+    position: absolute;
+    width: 16px;
+    height: 17px;
+    top: 0px;
+    right: 6px;
+}
+
+.mx_EntityTile_name,
+.mx_GroupRoomTile_name {
+    display: table-cell;
+    vertical-align: middle;
+    overflow: hidden;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 155px;
+}
+
+.mx_EntityTile_details {
+    display: table-cell;
+    padding-right: 14px;
+    vertical-align: middle;
+}
+
+.mx_EntityTile_name_hover {
+    font-size: 13px;
+}
+
+.mx_EntityTile_chevron {
+    margin-top: 8px;
+    margin-right: -4px;
+    margin-left: 6px;
+    float: right;
+}
+
+.mx_EntityTile_ellipsis .mx_EntityTile_name {
+    font-style: italic;
+    color: $primary-fg-color;
+}
+
+.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
+    font-style: italic;
+    color: $primary-fg-color;
+}
+
+.mx_EntityTile_unavailable .mx_EntityTile_avatar,
+.mx_EntityTile_unavailable .mx_EntityTile_name,
+.mx_EntityTile_unavailable .mx_EntityTile_name_hover,
+.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
+.mx_EntityTile_offline_beenactive .mx_EntityTile_name,
+.mx_EntityTile_offline_beenactive .mx_EntityTile_name_hover
+{
+    opacity: 0.66;
+}
+
+.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
+.mx_EntityTile_offline_neveractive .mx_EntityTile_name,
+.mx_EntityTile_offline_neveractive .mx_EntityTile_name_hover
+{
+    opacity: 0.25;
+}
+
+.mx_EntityTile_unknown .mx_EntityTile_avatar,
+.mx_EntityTile_unknown .mx_EntityTile_name,
+.mx_EntityTile_unknown .mx_EntityTile_name_hover
+{
+    opacity: 0.25;
+}
+
+

res/css/views/rooms/_EventTile.scss

@@ -0,0 +1,538 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_EventTile {
+    max-width: 100%;
+    clear: both;
+    padding-top: 18px;
+    font-size: 14px;
+    position: relative;
+}
+
+.mx_EventTile.mx_EventTile_info {
+    padding-top: 0px;
+}
+
+.mx_EventTile_avatar {
+    position: absolute;
+    top: 14px;
+    left: 8px;
+    cursor: pointer;
+    z-index: 2;
+}
+
+.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+    top: 8px;
+    left: 65px;
+}
+
+.mx_EventTile_continuation {
+    padding-top: 0px ! important;
+}
+
+.mx_EventTile .mx_SenderProfile {
+    color: $primary-fg-color;
+    font-size: 14px;
+    display: block; /* anti-zalgo, with overflow hidden */
+    overflow-y: hidden;
+    cursor: pointer;
+    padding-left: 65px; /* left gutter */
+    padding-bottom: 0px;
+    padding-top: 0px;
+    margin: 0px;
+    line-height: 22px;
+}
+
+.mx_EventTile .mx_SenderProfile .mx_SenderProfile_name,
+.mx_EventTile .mx_SenderProfile .mx_SenderProfile_aux {
+    opacity: 0.5;
+}
+
+.mx_EventTile .mx_SenderProfile .mx_Flair {
+    opacity: 0.7;
+    margin-left: 5px;
+}
+
+.mx_EventTile .mx_SenderProfile .mx_Flair img {
+    vertical-align: -2px;
+    margin-right: 2px;
+    border-radius: 8px;
+}
+
+.mx_EventTile .mx_MessageTimestamp {
+    display: block;
+    visibility: hidden;
+    white-space: nowrap;
+    color: $event-timestamp-color;
+    font-size: 10px;
+    left: 0px;
+    width: 46px; /* 8 + 30 (avatar) + 8 */
+    text-align: center;
+    position: absolute;
+}
+
+.mx_EventTile_line, .mx_EventTile_reply {
+    position: relative;
+    /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
+    margin-right: 110px;
+    padding-left: 65px; /* left gutter */
+    padding-top: 4px;
+    padding-bottom: 2px;
+    border-radius: 4px;
+    min-height: 24px;
+    line-height: 22px;
+}
+
+.mx_EventTile_reply {
+    margin-right: 10px;
+}
+
+.mx_EventTile_info .mx_EventTile_line {
+    padding-left: 83px;
+}
+
+/* HACK to override line-height which is already marked important elsewhere */
+.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
+    font-size: 48px ! important;
+    line-height: 48px ! important;
+}
+
+/* this is used for the tile for the event which is selected via the URL.
+ * TODO: ultimately we probably want some transition on here.
+ */
+.mx_EventTile_selected > .mx_EventTile_line {
+    border-left: $accent-color 5px solid;
+    padding-left: 60px;
+    background-color: $event-selected-color;
+}
+
+.mx_EventTile:hover .mx_EventTile_line,
+.mx_EventTile.menu .mx_EventTile_line
+{
+    background-color: $event-selected-color;
+}
+
+.mx_EventTile_searchHighlight {
+    background-color: $accent-color;
+    color: $accent-fg-color;
+    border-radius: 5px;
+    padding-left: 2px;
+    padding-right: 2px;
+    cursor: pointer;
+}
+
+.mx_EventTile_searchHighlight a {
+    background-color: $accent-color;
+    color: $accent-fg-color;
+}
+
+.mx_EventTile_encrypting {
+    color: $event-encrypting-color ! important;
+}
+
+.mx_EventTile_sending {
+    color: $event-sending-color;
+}
+
+.mx_EventTile_sending .mx_UserPill,
+.mx_EventTile_sending .mx_RoomPill,
+.mx_EventTile_sending .mx_emojione {
+    opacity: 0.5;
+}
+
+.mx_EventTile_notSent {
+    color: $event-notsent-color;
+}
+
+.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody,
+.mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
+    display: block;
+    width: 100%;
+    height: 22px;
+    width: 250px;
+    border-radius: 11px;
+    background: repeating-linear-gradient(
+        -45deg,
+        $event-redacted-fg-color,
+        $event-redacted-fg-color 3px,
+        transparent 3px,
+        transparent 6px
+    );
+    box-shadow: 0px 0px 3px $event-redacted-border-color inset;
+}
+
+.mx_EventTile_highlight,
+.mx_EventTile_highlight .markdown-body
+ {
+    color: $warning-color;
+}
+
+.mx_EventTile_contextual {
+    opacity: 0.4;
+}
+
+.mx_EventTile_msgOption {
+    float: right;
+    text-align: right;
+    z-index: 1;
+    position: relative;
+    width: 90px;
+
+    /* Hack to stop the height of this pushing the messages apart.
+       Replaces margin-top: -6px. This interacts better with a read
+       marker being in between. Content overflows. */
+    height: 1px;
+
+    margin-right: 10px;
+}
+
+.mx_EventTile_msgOption a {
+    text-decoration: none;
+}
+
+// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+.mx_EventTile_last > div > a > .mx_MessageTimestamp,
+.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
+.mx_EventTile.menu > div > a > .mx_MessageTimestamp {
+    visibility: visible;
+}
+
+.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
+    visibility: visible;
+}
+
+.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
+    left: 3px;
+    width: auto;
+}
+
+.mx_EventTile_editButton {
+    position: absolute;
+    display: inline-block;
+    visibility: hidden;
+    cursor: pointer;
+    top: 6px;
+    right: 6px;
+    width: 19px;
+    height: 19px;
+    background-image: url($edit-button-url);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.mx_EventTile:hover .mx_EventTile_editButton,
+.mx_EventTile.menu .mx_EventTile_editButton {
+    visibility: visible;
+}
+
+.mx_EventTile_readAvatars {
+    position: relative;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    top: 29px;
+}
+
+.mx_EventTile_continuation .mx_EventTile_readAvatars,
+.mx_EventTile_info .mx_EventTile_readAvatars,
+.mx_EventTile_emote .mx_EventTile_readAvatars {
+    top: 7px;
+}
+
+.mx_EventTile_readAvatars .mx_BaseAvatar {
+    position: absolute;
+    display: inline-block;
+}
+
+.mx_EventTile_readAvatarRemainder {
+    color: $event-timestamp-color;
+    font-size: 11px;
+    position: absolute;
+}
+
+/* all the overflow-y: hidden; are to trap Zalgos -
+   but they introduce an implicit overflow-x: auto.
+   so make that explicitly hidden too to avoid random
+   horizontal scrollbars occasionally appearing, like in
+   https://github.com/vector-im/vector-web/issues/1154
+    */
+.mx_EventTile_content {
+    display: block;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 34px;
+}
+
+/* De-zalgoing */
+.mx_EventTile_body {
+    overflow-y: hidden;
+}
+
+/* End to end encryption stuff */
+
+.mx_EventTile_e2eIcon {
+    display: block;
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    z-index: 2;
+    cursor: pointer;
+}
+
+.mx_EventTile_e2eIcon_hidden {
+    display: none;
+}
+
+/* always override hidden attribute for blocked and warning */
+.mx_EventTile_e2eIcon_hidden[src="img/e2e-blocked.svg"],
+.mx_EventTile_e2eIcon_hidden[src="img/e2e-warning.svg"] {
+    display: block;
+}
+
+.mx_EventTile_keyRequestInfo {
+    font-size: 12px;
+}
+
+.mx_EventTile_keyRequestInfo_text {
+    opacity: 0.5;
+}
+
+.mx_EventTile_keyRequestInfo_text a {
+    color: $primary-fg-color;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p {
+    text-align: auto;
+    margin-left: 3px;
+    margin-right: 3px;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
+    margin-top: 0px;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
+    margin-bottom: 0px;
+}
+
+.mx_EventTile_12hr .mx_EventTile_e2eIcon {
+    padding-left: 5px;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+    padding-left: 60px;
+}
+
+.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line {
+    padding-left: 78px;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+    border-left: $e2e-verified-color 5px solid;
+}
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+    border-left: $e2e-unverified-color 5px solid;
+}
+
+// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp {
+    left: 3px;
+    width: auto;
+}
+
+/*
+.mx_EventTile_verified .mx_EventTile_e2eIcon {
+    display: none;
+}
+*/
+
+// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon {
+    display: block;
+    left: 41px;
+}
+
+/* Various markdown overrides */
+
+.mx_EventTile_content .markdown-body {
+    font-family: inherit ! important;
+    white-space: normal ! important;
+    line-height: inherit ! important;
+    color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
+    font-size: 14px;
+}
+
+/* have to use overlay rather than auto otherwise Linux and Windows
+   Chrome gets very confused about vertical spacing:
+   https://github.com/vector-im/vector-web/issues/754
+*/
+.mx_EventTile_content .markdown-body pre {
+    overflow-x: overlay;
+    overflow-y: visible;
+}
+
+.mx_EventTile_content .markdown-body code {
+    // deliberate constants as we're behind an invert filter
+    background-color: #f8f8f8;
+    color: #333;
+}
+
+.mx_EventTile_copyButton {
+    position: absolute;
+    display: inline-block;
+    visibility: hidden;
+    cursor: pointer;
+    top: 6px;
+    right: 6px;
+    width: 19px;
+    height: 19px;
+    background-image: url($copy-button-url);
+}
+
+.mx_EventTile_body pre {
+    position: relative;
+    border: 1px solid transparent;
+}
+
+.mx_EventTile:hover .mx_EventTile_body pre
+{
+    border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
+}
+
+.mx_EventTile_body pre:hover .mx_EventTile_copyButton
+{
+    visibility: visible;
+}
+
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2,
+.mx_EventTile_content .markdown-body h3,
+.mx_EventTile_content .markdown-body h4,
+.mx_EventTile_content .markdown-body h5,
+.mx_EventTile_content .markdown-body h6
+{
+    font-family: inherit ! important;
+    color: inherit;
+}
+
+
+/* Make h1 and h2 the same size as h3. */
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2
+{
+    font-size: 1.5em;
+}
+
+.mx_EventTile_content .markdown-body a {
+    color: $accent-color;
+}
+
+.mx_EventTile_content .markdown-body .hljs {
+    display: inline ! important;
+}
+
+/* end of overrides */
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_EventTile {
+        padding-top: 4px;
+    }
+
+    .mx_EventTile.mx_EventTile_info {
+        // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
+        padding-top: 0px;
+        font-size: 13px;
+        .mx_EventTile_line, .mx_EventTile_reply {
+            line-height: 20px;
+        }
+        .mx_EventTile_avatar {
+            top: 4px;
+        }
+    }
+
+    .mx_EventTile .mx_SenderProfile {
+        font-size: 13px;
+    }
+
+    .mx_EventTile.mx_EventTile_emote {
+        // add a bit more space for emotes so that avatars don't collide
+        padding-top: 8px;
+        .mx_EventTile_avatar {
+            top: 2px;
+        }
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 0px;
+            padding-bottom: 1px;
+        }
+    }
+
+    .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
+        padding-top: 0;
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 0px;
+            padding-bottom: 0px;
+        }
+    }
+
+    .mx_EventTile_line, .mx_EventTile_reply {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+
+    .mx_EventTile_avatar {
+        top: 2px;
+    }
+
+    .mx_EventTile_e2eIcon {
+        top: 7px;
+    }
+
+    .mx_EventTile_editButton {
+        top: 3px;
+    }
+
+    .mx_EventTile_readAvatars {
+        top: 27px;
+    }
+
+    .mx_EventTile_continuation .mx_EventTile_readAvatars,
+    .mx_EventTile_emote .mx_EventTile_readAvatars {
+        top: 5px;
+    }
+
+    .mx_EventTile_info .mx_EventTile_readAvatars {
+        top: 4px;
+    }
+
+    .mx_RoomView_MessageList h2 {
+        margin-top: 6px;
+    }
+
+    .mx_EventTile_content .markdown-body {
+      p, ul, ol, dl, blockquote, pre, table {
+        margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
+      }
+    }
+}

res/css/views/rooms/_LinkPreviewWidget.scss

@@ -0,0 +1,69 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_LinkPreviewWidget {
+    margin-top: 15px;
+    margin-right: 15px;
+    margin-bottom: 15px;
+    display: flex;
+    border-left: 4px solid $preview-widget-bar-color;
+    color: $preview-widget-fg-color;
+}
+
+.mx_LinkPreviewWidget_image {
+    flex: 0 0 100px;
+    margin-left: 15px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.mx_LinkPreviewWidget_caption {
+    margin-left: 15px;
+    flex: 1 1 auto;
+}
+
+.mx_LinkPreviewWidget_title {
+    display: inline;
+    font-weight: bold;
+    white-space: normal;
+}
+
+.mx_LinkPreviewWidget_siteName {
+    display: inline;
+}
+
+.mx_LinkPreviewWidget_description {
+    margin-top: 8px;
+    white-space: normal;
+    word-wrap: break-word;
+}
+
+.mx_LinkPreviewWidget_cancel {
+    visibility: hidden;
+    cursor: pointer;
+    flex: 0 0 40px;
+}
+
+.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {
+    visibility: visible;
+}
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_LinkPreviewWidget {
+        margin-top: 6px;
+        margin-bottom: 6px;
+    }
+}

res/css/views/rooms/_MemberDeviceInfo.scss

@@ -0,0 +1,74 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+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_MemberDeviceInfo {
+    padding: 10px 0px;
+}
+
+.mx_MemberDeviceInfo.mx_DeviceVerifyButtons {
+    padding: 6px 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.mx_MemberDeviceInfo_textButton {
+    @mixin mx_DialogButton_small;
+    margin: 2px;
+    flex: 1;
+}
+
+.mx_MemberDeviceInfo_textButton:hover {
+    @mixin mx_DialogButton_hover;
+}
+
+.mx_MemberDeviceInfo_deviceId {
+    font-size: 13px;
+}
+
+.mx_MemberDeviceInfo_deviceInfo {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+
+/* "Unblacklist" is too long for a regular button: make it wider and
+   reduce the padding. */
+.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
+.mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
+    width: 8em;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
+    float: right;
+    padding-left: 1em;
+}
+
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
+    color: $e2e-verified-color;
+}
+
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
+    color: $e2e-unverified-color;
+}
+
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
+    color: $e2e-warning-color;
+}

res/css/views/rooms/_MemberInfo.scss

@@ -0,0 +1,112 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_MemberInfo {
+    margin-top: 20px;
+    padding-right: 20px;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.mx_MemberInfo h2 {
+    margin-top: 6px;
+}
+
+.mx_MemberInfo .mx_RoomTile_nameContainer {
+    width: 154px;
+}
+
+.mx_MemberInfo .mx_RoomTile_badge {
+    display: none;
+}
+
+.mx_MemberInfo .mx_RoomTile_name {
+    width: 160px;
+}
+
+.mx_MemberInfo_cancel {
+    float: right;
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+.mx_MemberInfo_avatar {
+    clear: both;
+}
+
+.mx_MemberInfo_avatar .mx_BaseAvatar {
+}
+
+.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
+    cursor: zoom-in;
+}
+
+.mx_MemberInfo_profile {
+    margin-bottom: 16px;
+}
+
+.mx_MemberInfo h3 {
+    text-transform: uppercase;
+    color: $h3-color;
+    font-weight: 600;
+    font-size: 13px;
+    margin-top: 16px;
+    margin-bottom: 14px;
+}
+
+.mx_MemberInfo_profileField {
+    font-size: 13px;
+    position: relative;
+    background-color: $primary-bg-color;
+}
+
+.mx_MemberInfo_buttons {
+    margin-bottom: 16px;
+}
+
+.mx_MemberInfo_field {
+    cursor: pointer;
+    font-size: 13px;
+    color: $accent-color;
+    margin-left: 8px;
+    line-height: 23px;
+}
+
+.mx_MemberInfo_createRoom {
+    cursor: pointer;
+}
+
+.mx_MemberInfo_createRoom_label {
+    width: initial ! important;
+    cursor: pointer;
+}
+
+.mx_MemberInfo label {
+    font-size: 13px;
+}
+
+.mx_MemberInfo label .mx_MemberInfo_label_text {
+    display: inline-block;
+    max-width: 180px;
+    vertical-align: text-top;
+}
+
+.mx_MemberInfo input[type="radio"] {
+    vertical-align: -2px;
+    margin-right: 5px;
+    margin-left: 8px;
+}
+

res/css/views/rooms/_MemberList.scss

@@ -0,0 +1,116 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_MemberList,
+.mx_GroupMemberList,
+.mx_GroupRoomList {
+    height: 100%;
+
+    margin-top: 12px;
+    margin-right: 20px;
+
+    flex: 1;
+
+    display: flex;
+
+    flex-direction: column;
+}
+
+.mx_MemberList .mx_Spinner {
+    flex: 0 0 auto;
+}
+
+.mx_MemberList_chevron {
+    position: absolute;
+    right: 35px;
+    margin-top: -15px;
+}
+
+.mx_MemberList_border {
+    overflow-y: auto;
+
+    order: 1;
+    flex: 1 1 0px;
+}
+
+.mx_MemberList_query,
+.mx_GroupMemberList_query,
+.mx_GroupRoomList_query {
+    font-family: $font-family;
+    border-radius: 3px;
+    border: 1px solid $input-border-color;
+    padding: 9px;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
+    margin-left: 3px;
+    font-size: 14px;
+    margin-bottom: 8px;
+    width: 189px;
+}
+
+.mx_MemberList_query::-moz-placeholder,
+.mx_GroupMemberList_query::-moz-placeholder,
+.mx_GroupRoomList_query::-moz-placeholder {
+    color: $primary-fg-color;
+    opacity: 0.5;
+    font-size: 14px;
+}
+
+.mx_MemberList_query::-webkit-input-placeholder,
+.mx_GroupMemberList_query::-webkit-input-placeholder,
+.mx_GroupRoomList_query::-webkit-input-placeholder {
+    color: $primary-fg-color;
+    opacity: 0.5;
+    font-size: 14px;
+}
+
+.mx_MemberList_joined {
+    order: 2;
+    flex: 1 0 0;
+
+    overflow-y: auto;
+}
+
+/*
+.mx_MemberList_invited {
+    order: 3;
+    flex: 0 0 100px;
+    overflow-y: auto;
+}
+*/
+
+.mx_GroupMemberList_invited h2,
+.mx_MemberList_invited h2 {
+    text-transform: uppercase;
+    color: $h3-color;
+    font-weight: 600;
+    font-size: 13px;
+    padding-left: 3px;
+    padding-right: 12px;
+    margin-top: 8px;
+    margin-bottom: 4px;
+}
+
+/* we have to have display: table in order for the horizontal wrapping to work */
+.mx_MemberList_wrapper {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+}
+
+.mx_MemberList_outerWrapper {
+    height: 0px;
+}

res/css/views/rooms/_MessageComposer.scss

@@ -0,0 +1,246 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+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_MessageComposer_wrapper {
+    max-width: 960px;
+    vertical-align: middle;
+    margin: auto;
+    border-top: 1px solid $primary-hairline-color;
+    position: relative;
+}
+
+.mx_MessageComposer_autocomplete_wrapper {
+    position: relative;
+    height: 0;
+}
+
+.mx_MessageComposer_row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+}
+
+.mx_MessageComposer_row > div:last-child{
+    padding-right: 0;
+}
+
+.mx_MessageComposer .mx_MessageComposer_avatar {
+    padding-left: 10px;
+    padding-right: 28px;
+}
+
+.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
+    display: block;
+}
+
+.mx_MessageComposer_composecontrols {
+    width: 100%;
+}
+
+.mx_MessageComposer_e2eIcon {
+    position: absolute;
+    left: 44px;
+}
+
+.mx_MessageComposer_noperm_error {
+    width: 100%;
+    height: 60px;
+    font-style: italic;
+    color: $greyed-fg-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_MessageComposer_input_wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_MessageComposer_input {
+    flex: 1;
+    vertical-align: middle;
+    display: flex;
+    flex-direction: column;
+    min-height: 60px;
+    justify-content: center;
+    align-items: flex-start;
+    font-size: 14px;
+    margin-right: 6px;
+}
+
+@keyframes visualbell
+{
+    from { background-color: #faa }
+    to { background-color: $primary-bg-color }
+}
+
+.mx_MessageComposer_input_error {
+    animation: 0.2s visualbell;
+}
+
+.mx_MessageComposer_input_empty .public-DraftEditorPlaceholder-root {
+    display: none;
+}
+
+.mx_MessageComposer_input .DraftEditor-root {
+    width: 100%;
+    flex: 1;
+    word-break: break-word;
+    max-height: 120px;
+    min-height: 21px;
+    overflow: auto;
+}
+
+.mx_MessageComposer_input .DraftEditor-root .DraftEditor-editorContainer {
+    /* Ensure mx_UserPill and mx_RoomPill (see _RichText) are not obscured from the top */
+    padding-top: 2px;
+}
+
+.mx_MessageComposer .public-DraftStyleDefault-block {
+    overflow-x: hidden;
+}
+
+.mx_MessageComposer_input blockquote {
+    color: $blockquote-fg-color;
+    margin: 0 0 16px;
+    padding: 0 15px;
+    border-left: 4px solid $blockquote-bar-color;
+}
+
+.mx_MessageComposer_input pre.public-DraftStyleDefault-pre pre {
+    background-color: $rte-code-bg-color;
+    border-radius: 3px;
+    padding: 10px;
+}
+
+.mx_MessageComposer_input textarea {
+    display: block;
+    width: 100%;
+    padding: 0px;
+    margin-top: 6px;
+    margin-bottom: 6px;
+    border: 0px;
+    resize: none;
+    outline: none;
+    box-shadow: none;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
+    font-size: 14px;
+    max-height: 120px;
+    overflow: auto;
+    /* needed for FF */
+    font-family: $font-family;
+}
+
+/* hack for FF as vertical alignment of custom placeholder text is broken */
+.mx_MessageComposer_input textarea::-moz-placeholder {
+    line-height: 100%;
+    color: $accent-color;
+    opacity: 1.0;
+}
+.mx_MessageComposer_input textarea::-webkit-input-placeholder {
+    color: $accent-color;
+}
+
+.mx_MessageComposer_upload,
+.mx_MessageComposer_hangup,
+.mx_MessageComposer_voicecall,
+.mx_MessageComposer_videocall,
+.mx_MessageComposer_apps,
+.mx_MessageComposer_stickers {
+    /*display: table-cell;*/
+    /*vertical-align: middle;*/
+    /*padding-left: 10px;*/
+    padding-right: 5px;
+    cursor: pointer;
+    padding-top: 4px;
+}
+
+.mx_MessageComposer_upload object,
+.mx_MessageComposer_hangup object,
+.mx_MessageComposer_voicecall object,
+.mx_MessageComposer_videocall object,
+.mx_MessageComposer_apps object,
+.mx_MessageComposer_stickers object {
+    pointer-events: none;
+}
+
+.mx_MessageComposer_formatting {
+    cursor: pointer;
+    margin: 0 11px;
+    width: 24px;
+    height: 18px;
+}
+
+.mx_MessageComposer_formatbar_wrapper {
+    width: 100%;
+    background-color: $menu-bg-color;
+    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
+}
+
+.mx_MessageComposer_formatbar {
+    margin: auto;
+    max-width: 960px;
+    display: flex;
+
+    height: 30px;
+
+    box-sizing: border-box;
+    padding-left: 62px;
+
+    flex-direction: row;
+    align-items: center;
+    font-size: 10px;
+    color: $greyed-fg-color;
+}
+
+.mx_MessageComposer_formatbar * {
+    margin-right: 4px;
+}
+
+.mx_MessageComposer_format_button,
+.mx_MessageComposer_formatbar_cancel,
+.mx_MessageComposer_formatbar_markdown {
+    cursor: pointer;
+}
+
+.mx_MessageComposer_formatbar_cancel {
+    margin-right: 22px;
+}
+
+.mx_MessageComposer_formatbar_markdown {
+    margin-right: 64px;
+}
+
+.mx_MessageComposer_input_markdownIndicator {
+    cursor: pointer;
+    height: 10px;
+    padding: 4px 4px 4px 0;
+    opacity: 0.8;
+}
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_MessageComposer_input {
+        min-height: 50px;
+    }
+
+    .mx_MessageComposer_noperm_error {
+        height: 50px;
+    }
+}

res/css/views/rooms/_PinnedEventTile.scss

@@ -0,0 +1,67 @@
+/*
+Copyright 2017 Travis Ralston
+
+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_PinnedEventTile {
+    min-height: 40px;
+    margin-bottom: 5px;
+    width: 100%;
+    border-radius: 5px; // for the hover
+}
+
+.mx_PinnedEventTile:hover {
+    background-color: $event-selected-color;
+}
+
+.mx_PinnedEventTile .mx_PinnedEventTile_sender {
+    color: #868686;
+    font-size: 0.8em;
+    vertical-align: top;
+    display: block;
+    padding-bottom: 3px;
+}
+
+.mx_PinnedEventTile .mx_EventTile_content {
+    margin-left: 50px;
+    position: relative;
+    top: 0;
+    left: 0;
+}
+
+.mx_PinnedEventTile .mx_BaseAvatar {
+    float: left;
+    margin-right: 10px;
+}
+
+.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
+    display: block;
+}
+
+.mx_PinnedEventTile_actions {
+    float: right;
+    margin-right: 10px;
+    display: none;
+}
+
+.mx_PinnedEventTile_unpinButton {
+    display: inline-block;
+    cursor: pointer;
+    margin-left: 10px;
+}
+
+.mx_PinnedEventTile_gotoButton {
+    display: inline-block;
+    font-size: 0.8em;
+}