operator precedence

.gitignore

@@ -1,8 +1,4 @@
 node_modules
-vector/bundle.*
-lib
-.DS_Store
-key.pem
-cert.pem
-vector/components.css
-packages/
+build
+bundle.css
+bundle.js

.modernizr.json

@@ -1,14 +0,0 @@
-{
-  "minify": true,
-  "classPrefix": "modernizr_",
-  "options": [
-    "setClasses"
-  ],
-  "feature-detects": [
-    "test/css/displaytable",
-    "test/css/flexbox",
-    "test/es5/specification",
-    "test/css/objectfit",
-    "test/storage/localstorage"
-  ]
-}

AUTHORS.rst

@@ -1,12 +0,0 @@
-Vector is written mainly by the Vector team, building upon the Matrix React
-SDK. Vector also welcomes external contributions. Third party contributors
-include:
-
-* Nolan Darilek (https://github.com/ndarilek)
-  Accessibility and semantic markup contributions
-
-* https://github.com/neko259
-  Improved scrollbar CSS
-
-* Florent VIOLLEAU (https://github.com/floviolleau) <floviolleau at gmail dot com>
-  Improve README.md for a better understanding of installation instructions

CHANGES.rst

@@ -1,44 +0,0 @@
-Changes in vector v0.3.0 (2016-03-11)
-======================================
- * Lots of new bug fixes and updates
-
-Changes in vector v0.2.0 (2016-02-24)
-======================================
- * Refactor of matrix-react-sdk and vector to remove separation between views and
-   controllers
- * Temporarily break the layering abstraction between vector and matrix-react-sdk
-   for expedience in developing vector.
- * Vast numbers of new features, including read receipts, read-up-to markers,
-   updated look and feel, search, new room and user settings, and email invites.
-
-Changes in vector v0.1.2 (2015-10-28)
-======================================
- * Support Room Avatars
- * Fullscreen video calls
- * Mute mic in VoIP calls
- * Fix bug with multiple desktop notifications
- * Context menu on messages
- * Better hover-over on member list
- * Support CAS auth
- * Many other bug fixes
- 
-Changes in vector v0.1.1 (2015-08-10)
-======================================
-
- * Support logging in with an email address
- * Use the Vector identity server
- * Fix a bug where the client was not stopped properly on logout
- * Fix bugs where field values would be forgotten if login or registration failed
- * Improve URL bar navigation
- * Add explanatory help text on advanced server options
- * Fix a bug which caused execptions on malformed VoIP invitations
- * Remove superfluous scrollbars on Firefox
- * Numerous CSS fixes
- * Improved accessibility
- * Support command-click / middle click to open image in a new tab
- * Improved room directory
- * Fix display of text with many combining unicode points
-
-Changes in vector v0.1.0 (2015-08-10)
-======================================
-Initial release

CONTRIBUTING.rst

@@ -1,4 +0,0 @@
-Contributing code to Vector
-===========================
-
-Vector follows the same pattern as https://github.com/matrix-org/synapse/blob/master/CONTRIBUTING.rst

README.md

@@ -7,135 +7,141 @@ Getting started
 ===============
 
 1. Install or update `node.js` so that your `npm` is at least at version `2.0.0`
-1. Clone the repo: `git clone https://github.com/vector-im/vector-web.git` 
-1. Switch to the vector directory: `cd vector-web`
-1. Install the prerequisites: `npm install`
-1. Start the development builder and a testing server: `npm start`
-1. Wait a few seconds for the initial build to finish (the command won't
-   terminate: it's running a web server for you).
-1. Open http://127.0.0.1:8080/ in your browser to see your newly built Vector.
+2. Clone the repo: `git clone https://github.com/vector-im/vector-web.git` 
+3. Switch to the SDK directory: `cd vector-web`
+4. Install the prerequisites: `npm install`
+5. Switch to the example directory: `cd examples/vector`
+6. Install the example app prerequisites: `npm install`
+7. Build the example and start a server: `npm start`
 
-With `npm start`, any changes you make to the source files will cause a rebuild so
-your changes will show up when you refresh. This development server also disables
-caching, so do NOT use it in production.
-
-Configuring
-===========
-
-Configure the app by modifying the `config.json` file:
-
-1. `default_hs_url` is the default home server url.
-1. `default_is_url` is the default identity server url (this is the server used
-   for verifying third party identifiers like email addresses). If this is blank,
-   registering with an email address or adding an email address to your account
-   will not work.
-
-You will need to re-run `npm run build` after editing `config.json`.
-
-Deployment
-==========
-
-On a Unix-based OS, run `npm run package` to build a tarball package.  Untaring
-this file will give a version-specific directory containing all the files that
-need to go on your web server.
-
-The package script is not supported on Windows, so Windows users can run `npm
-run build`, which will build all the necessary files into the `vector`
-directory. Note that the version of Vector will not appear in Settings without
-using the package script. You can then mount the vector directory on your
-webserver to actually serve up the app, which is entirely static content.
+Now open http://127.0.0.1:8080/ in your browser to see your newly built
+Vector.
 
 Development
 ===========
 
-For simple tweaks, you can work on any of the source files within Vector with the
-setup above, and your changes will cause an instant rebuild.
+To work on the CSS and Javascript and have the bundle files update as you
+change the source files, you'll need to do two extra things:
 
-However, all serious development on Vector happens on the `develop` branch.  This typically
-depends on the `develop` snapshot versions of `matrix-react-sdk` and `matrix-js-sdk`
-too, which can't be installed automatically due to https://github.com/npm/npm/issues/3055.
-To get the right dependencies, check out the `develop` branches of these libraries and
-then use `ln -s` to tell Vector about them:
+1. Link the react sdk package into the example:
+   `cd vector-web/examples/vector; npm link ../../`
+2. Start a watcher for the CSS files:
+   `cd vector-web; npm run start:css`
 
-[Be aware that there may be problems with this process under npm version 3.]
+Note that you may need to restart the CSS builder if you add a new file. Note
+that `npm start` builds debug versions of the javascript and CSS, which are
+much larger than the production versions build by the `npm run build` commands.
 
-First clone and build `matrix-js-sdk`:
+IMPORTANT: If you customise components in your application (and hence require
+react from your app) you must be sure to:
 
-1. `git clone git@github.com:matrix-org/matrix-js-sdk.git`
-1. `pushd matrix-js-sdk`
-1. `git checkout develop`
-1. `npm install`
-1. `npm install source-map-loader` # because webpack is made of fail (https://github.com/webpack/webpack/issues/1472)
-1. `popd`
+1. Make your app depend on react directly
+2. If you `npm link` matrix-react-sdk, manually remove the 'react' directory
+   from matrix-react-sdk's `node_modules` folder, otherwise browserify will
+   pull in both copies of react which causes the app to break.
 
-Then similarly with `matrix-react-sdk`:
+How to customise the SDK
+========================
 
-1. `git clone git@github.com:matrix-org/matrix-react-sdk.git`
-1. `pushd matrix-react-sdk`
-1. `git checkout develop`
-1. `npm install`
-1. `rm -r node_modules/matrix-js-sdk; ln -s ../../matrix-js-sdk node_modules/`
-1. `popd`
+The matrix-react-sdk provides well-defined reusable UI components which may be
+customised/replaced by the developer to build into an app.  A set of consistent
+UI components (View + CSS classes) is called a 'skin' - currently the SDK
+provides a very vanilla whitelabelled 'base skin'.  In future the SDK could
+provide alternative skins (probably by extending the base skin) that provide more
+specific look and feels (e.g. "IRC-style", "Skype-style") etc.  However, unlike
+Wordpress themes and similar, we don't normally expect app developers to define
+reusable skins.  Instead you just go and incorporate your view customisations
+into your actual app.
 
-Finally, build and start vector itself:
+The SDK uses the 'atomic' design pattern as seen at http://patternlab.io to
+encourage a very modular and reusable architecture, making it easy to
+customise and use UI widgets independently of the rest of the SDK and your app.
+In practice this means:
 
-1. `git clone git@github.com:vector-im/vector-web.git`
-1. `cd vector-web`
-1. `git checkout develop`
-1. `npm install`
-1. `rm -r node_modules/matrix-js-sdk; ln -s ../../matrix-js-sdk node_modules/`
-1. `rm -r node_modules/matrix-react-sdk; ln -s ../../matrix-react-sdk node_modules/`
-1. `npm start`
-1. Wait a few seconds for the initial build to finish; you should see something like:
+ * The UI of the app is strictly split up into a hierarchy of components.
+ 
+ * Each component has its own:
+   * View object defined as a React javascript class containing embedded
+     HTML expressed in React's JSX notation.
+   * CSS file, which defines the styling specific to that component.
+ 
+ * Components are loosely grouped into the 5 levels outlined by atomic design:
+   * atoms: fundamental building blocks (e.g. a timestamp tag)
+   * molecules: "group of atoms which functions together as a unit"
+     (e.g. a message in a chat timeline)
+   * organisms: "groups of molecules (and atoms) which form a distinct section
+     of a UI" (e.g. a view of a chat room)
+   * templates: "a reusable configuration of organisms" - used to combine and
+     style organisms into a well-defined global look and feel
+   * pages: specific instances of templates.
 
-    ```
-    Hash: b0af76309dd56d7275c8
-    Version: webpack 1.12.14
-    Time: 14533ms
-             Asset     Size  Chunks             Chunk Names
-         bundle.js   4.2 MB       0  [emitted]  main
-        bundle.css  91.5 kB       0  [emitted]  main
-     bundle.js.map  5.29 MB       0  [emitted]  main
-    bundle.css.map   116 kB       0  [emitted]  main
-        + 1013 hidden modules
-    ```
-   Remember, the command will not terminate since it runs the web server
-   and rebuilds source files when they change.
-1. Open http://127.0.0.1:8080/ in your browser to see your newly built Vector.
+ Good separation between the components is maintained by adopting various best
+ practices that anyone working with the SDK needs to be be aware of and uphold:
 
-When you make changes to `matrix-js-sdk` or `matrix-react-sdk`, you will need
-to run `npm run build` in the relevant directory. You can do this automatically
-by instead running `npm start` in each directory, to start a development
-builder which will watch for changes to the files and rebuild automatically.
+  * Views are named with upper camel case (e.g. molecules/MessageTile.js)
 
-If you add or remove any components from the Vector skin, you will need to rebuild
-the skin's index by running, `npm run reskindex`.
+  * The view's CSS file MUST have the same name (e.g. molecules/MessageTile.css)
 
-Enabling encryption
-===================
+  * Per-view CSS is optional - it could choose to inherit all its styling from
+    the context of the rest of the app, although this is unusual for any but 
+    the simplest atoms and molecules.
 
-End-to-end encryption in Vector and Matrix is not yet considered ready for
-day-to-day use; it is experimental and should be considered only as a
-proof-of-concept. See https://matrix.org/jira/browse/SPEC-162 for an overview
-of the current progress.
+  * The view MUST *only* refer to the CSS rules defined in its own CSS file.
+    'Stealing' styling information from other components (including parents)
+    is not cool, as it breaks the independence of the components.
 
-To build a version of vector with support for end-to-end encryption, install
-the olm module with `npm i https://matrix.org/packages/npm/olm/olm-0.1.0.tgz`
-before running `npm start`. The olm library will be detected and used if
-available.
+  * CSS classes are named with an app-specific namespacing prefix to try to avoid
+    CSS collisions.  The base skin shipped by Matrix.org with the matrix-react-sdk
+    uses the naming prefix "mx_".  A company called Yoyodyne Inc might use a
+    prefix like "yy_" for its app-specific classes.
 
-To enable encryption for a room, type
+  * CSS classes use upper camel case when they describe React components - e.g.
+    .mx_MessageTile is the selector for the CSS applied to a MessageTile view.
 
-```
-/encrypt on
-```
+  * CSS classes for DOM elements within a view which aren't components are named
+    by appending a lower camel case identifier to the view's class name - e.g.
+    .mx_MessageTile_randomDiv is how you'd name the class of an arbitrary div
+    within the MessageTile view.
 
-in the message bar in that room. Vector will then generate a set of keys, and
-encrypt all outgoing messages in that room. (Note that other people in that
-room will send messages in the clear unless they also `/encrypt on`.)
+  * We deliberately use vanilla CSS 3.0 to avoid adding any more magic
+    dependencies into the mix than we already have.  App developers are welcome
+    to use whatever floats their boat however.
 
-Note that historical encrypted messages cannot currently be decoded - history
-is therefore lost when the page is reloaded.
+  * The CSS for a component can however override the rules for child components.
+    For instance, .mx_RoomList .mx_RoomTile {} would be the selector to override
+    styles of RoomTiles when viewed in the context of a RoomList view.
+    Overrides *must* be scoped to the View's CSS class - i.e. don't just define
+    .mx_RoomTile {} in RoomList.css - only RoomTile.css is allowed to define its
+    own CSS.  Instead, say .mx_RoomList .mx_RoomTile {} to scope the override
+    only to the context of RoomList views.  N.B. overrides should be relatively
+    rare as in general CSS inheritence should be enough.
 
-There is currently no visual indication of whether encryption is enabled for a
-room, or whether a particular message was encrypted.
+  * Components should render only within the bounding box of their outermost DOM
+    element. Page-absolute positioning and negative CSS margins and similar are
+    generally not cool and stop the component from being reused easily in
+    different places.
+
+  * We don't use the atomify library itself, as React already provides most
+    of the modularity requirements it brings to the table.
+
+With all this in mind, here's how you go about skinning the react SDK UI
+components to embed a Matrix client into your app:
+
+  * Create a new NPM project. Be sure to directly depend on react, (otherwise
+    you can end up with two copies of react).
+  * Create an index.js file that sets up react. Add require statements for
+    React, the ComponentBroker and matrix-react-sdk and a call to Render
+    the root React element as in the examples.
+  * Create React classes for any custom components you wish to add. These
+    can be based off the files in `views` in the `matrix-react-sdk` package,
+    modifying the require() statement appropriately.
+    You only need to copy files you want to customise.
+  * Add a ComponentBroker.set() call for each of your custom components. These
+    must come *before* `require("matrix-react-sdk")`.
+  * Add a way to build your project: we suggest copying the browserify calls
+    from the example projects, but you could use grunt or gulp.
+  * Create an index.html file pulling in your compiled index.js file, the
+    CSS bundle from matrix-react-sdk.
+
+For more specific detail on any of these steps, look at the `custom` example in
+matrix-react-sdk/examples.

config.json

@@ -1,4 +0,0 @@
-{
-    "default_hs_url": "https://matrix.org",
-    "default_is_url": "https://vector.im"
-}

deploy/redeploy.py

@@ -1,170 +0,0 @@
-#!/usr/bin/env python
-from __future__ import print_function
-import json, requests, tarfile, argparse, os, errno
-from urlparse import urljoin
-from flask import Flask, jsonify, request, abort
-app = Flask(__name__)
-
-arg_jenkins_url, arg_extract_path, arg_should_clean, arg_symlink = (
-    None, None, None, None
-)
-
-def download_file(url):
-    local_filename = url.split('/')[-1]
-    r = requests.get(url, stream=True)
-    with open(local_filename, 'wb') as f:
-        for chunk in r.iter_content(chunk_size=1024): 
-            if chunk: # filter out keep-alive new chunks
-                f.write(chunk)
-    return local_filename
-
-def untar_to(tarball, dest):
-    with tarfile.open(tarball) as tar:
-        tar.extractall(dest)
-
-def create_symlink(source, linkname):
-    try:
-        os.symlink(source, linkname)
-    except OSError, e:
-        if e.errno == errno.EEXIST:
-            # atomic modification
-            os.symlink(source, linkname + ".tmp")
-            os.rename(linkname + ".tmp", linkname)
-        else:
-            raise e
-
-@app.route("/", methods=["POST"])
-def on_receive_jenkins_poke():
-    # {
-    #    "name": "VectorWebDevelop",
-    #    "build": {
-    #        "number": 8
-    #    }
-    # }
-    incoming_json = request.get_json()
-    if not incoming_json:
-        abort(400, "No JSON provided!")
-        return
-    print("Incoming JSON: %s" % (incoming_json,))
-
-    job_name = incoming_json.get("name")
-    if not isinstance(job_name, basestring):
-        abort(400, "Bad job name: %s" % (job_name,))
-        return
-
-    build_num = incoming_json.get("build", {}).get("number", 0)
-    if not build_num or build_num <= 0 or not isinstance(build_num, int):
-        abort(400, "Missing or bad build number")
-        return
-
-    artifact_url = urljoin(
-        arg_jenkins_url, "job/%s/%s/api/json" % (job_name, build_num)
-    )
-    artifact_response = requests.get(artifact_url).json()
-
-    # {
-    # "actions": [],
-    # "artifacts": [
-    #   {
-    #   "displayPath": "vector-043f6991a4ed-react-20f77d1224ef-js-0a7efe3e8bd5.tar.gz",
-    #   "fileName": "vector-043f6991a4ed-react-20f77d1224ef-js-0a7efe3e8bd5.tar.gz",
-    #   "relativePath": "vector-043f6991a4ed-react-20f77d1224ef-js-0a7efe3e8bd5.tar.gz"
-    #   }
-    # ],
-    # "building": false,
-    # "description": null,
-    # "displayName": "#11",
-    # "duration": 137976,
-    # "estimatedDuration": 132008,
-    # "executor": null,
-    # "fullDisplayName": "VectorWebDevelop #11",
-    # "id": "11",
-    # "keepLog": false,
-    # "number": 11,
-    # "queueId": 12254,
-    # "result": "SUCCESS",
-    # "timestamp": 1454432640079,
-    # "url": "http://matrix.org/jenkins/job/VectorWebDevelop/11/",
-    # "builtOn": "",
-    # "changeSet": {},
-    # "culprits": []
-    # }
-    if artifact_response.get("result") != "SUCCESS":
-        abort(404, "Not deploying. Build was not marked as SUCCESS.")
-        return
-
-    if len(artifact_response.get("artifacts", [])) != 1:
-        abort(404, "Not deploying. Build has an unexpected number of artifacts.")
-        return
-
-    tar_gz_path = artifact_response["artifacts"][0]["relativePath"]
-    if not tar_gz_path.endswith(".tar.gz"):
-        abort(404, "Not deploying. Artifact is not a .tar.gz file")
-        return
-
-    tar_gz_url = urljoin(
-        arg_jenkins_url, "job/%s/%s/artifact/%s" % (job_name, build_num, tar_gz_path)
-    )
-
-    print("Retrieving .tar.gz file: %s" % tar_gz_url)
-    filename = download_file(tar_gz_url)
-    print("Downloaded file: %s" % filename)
-    name_str = filename.replace(".tar.gz", "")
-    untar_location = os.path.join(arg_extract_path, name_str)
-    untar_to(filename, untar_location)
-
-    if arg_should_clean:
-        os.remove(filename)
-
-    # stamp the version somewhere JS can get to it
-    with open(os.path.join(untar_location, "vector/version"), "w") as stamp_file:
-        stamp_file.write(name_str)
-
-    create_symlink(source=os.path.join(untar_location, "vector"), linkname=arg_symlink)
-
-    return jsonify({})
-
-if __name__ == "__main__":
-    parser = argparse.ArgumentParser("Runs a Vector redeployment server.")
-    parser.add_argument(
-        "-j", "--jenkins", dest="jenkins", default="http://matrix.org/jenkins/", help=(
-            "The base URL of the Jenkins web server. This will be hit to get the\
-            built artifacts (the .gz file) for redeploying."
-        )
-    )
-    parser.add_argument(
-        "-p", "--port", dest="port", default=4000, type=int, help=(
-            "The port to listen on for requests from Jenkins."
-        )
-    )
-    parser.add_argument(
-        "-e", "--extract", dest="extract", default="./extracted", help=(
-            "The location to extract .tar.gz files to."
-        )
-    )
-    parser.add_argument(
-        "-c", "--clean", dest="clean", action="store_true", default=False, help=(
-            "Remove .tar.gz files after they have been downloaded and extracted."
-        )
-    )
-    parser.add_argument(
-        "-s", "--symlink", dest="symlink", default="./latest", help=(
-            "Write a symlink to this location pointing to the extracted tarball. \
-            New builds will keep overwriting this symlink. The symlink will point \
-            to the /vector directory INSIDE the tarball."
-        )
-    )
-    args = parser.parse_args()
-    if args.jenkins.endswith("/"): # important for urljoin
-        arg_jenkins_url = args.jenkins
-    else:
-        arg_jenkins_url = args.jenkins + "/"
-    arg_extract_path = args.extract
-    arg_should_clean = args.clean
-    arg_symlink = args.symlink
-    print(
-        "Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s" %
-        (args.port, arg_extract_path,
-            " (clean after)" if arg_should_clean else "", arg_symlink, arg_jenkins_url)
-    )
-    app.run(host="0.0.0.0", port=args.port, debug=True)

docs/conferencing.md

@@ -1,52 +0,0 @@
-# VoIP Conferencing
-
-This is a draft proposal for a naive voice/video conferencing implementation for
-Matrix clients.  There are many possible conferencing architectures possible for
-Matrix (Multipoint Conferencing Unit (MCU); Stream Forwarding Unit (SFU); Peer-
-to-Peer mesh (P2P), etc; events shared in the group room; events shared 1:1;
-possibly even out-of-band signalling).
-
-This is a starting point for a naive MCU implementation which could provide one
-possible Matrix-wide solution in  future, which retains backwards compatibility
-with standard 1:1 calling.
-
- * A client chooses to initiate a conference for a given room by starting a
-   voice or video call with a 'conference focus' user.  This is a virtual user
-   (typically Application Service) which implements a conferencing bridge.  It
-   isn't defined how the client discovers or selects this user.
-
- * The conference focus user MUST join the room in which the client has
-   initiated the conference - this may require the client to invite the
-   conference focus user to the room, depending on the room's `join_rules`. The
-   conference focus user needs to be in the room to let the bridge eject users
-   from the conference who have left the room in which it was initiated, and aid
-   discovery of the conference by other users in the room.  The bridge
-   identifies the room to join based on the user ID by which it was invited.
-   The format of this identifier is implementation dependent for now.
-
- * If a client leaves the group chat room, they MUST be ejected from the
-   conference. If a client leaves the 1:1 room with the conference focus user,
-   they SHOULD be ejected from the conference.
-
- * For now, rooms can contain multiple conference focus users - it's left to
-   user or client implementation to select which to converge on.  In future this
-   could be mediated using a state event (e.g. `im.vector.call.mcu`), but we
-   can't do that right now as by default normal users can't set arbitrary state
-   events on a room.
-
- * To participate in the conference, other clients initiates a standard 1:1
-   voice or video call to the conference focus user.
-
- * For best UX, clients SHOULD show the ongoing voice/video call in the UI
-   context of the group room rather than 1:1 with the focus user.  If a client
-   recognises a conference user present in the room, it MAY chose to highlight
-   this in the UI (e.g. with a "conference ongoing" notification, to aid
-   discovery).  Clients MAY hide the 1:1 room with the focus user (although in
-   future this room could be used for floor control or other direct
-   communication with the conference focus)
-
- * When all users have left the conference, the 'conference focus' user SHOULD
-   leave the room.
-
- * If a conference focus user joins a room but does not receive a 1:1 voice or
-   video call, it SHOULD time out after a period of time and leave the room.

examples/custom/CustomMTextTile.js

@@ -0,0 +1,40 @@
+/*
+Copyright 2015 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.
+*/
+
+'use strict';
+
+var React = require('react');
+
+var MTextTileController = require("matrix-react-sdk/src/controllers/molecules/MTextTile");
+
+module.exports = React.createClass({
+    displayName: 'MTextTile',
+    mixins: [MTextTileController],
+
+    render: function() {
+        var content = this.props.mxEvent.getContent();
+        return (
+            <span ref="content" className="mx_MTextTile mx_MessageTile_content" onClick={this.onClick}>
+                {content.body}
+            </span>
+        );
+    },
+
+    onClick: function(ev) {
+        global.alert(this.props.mxEvent.getContent().body);
+    }
+});
+

examples/custom/README.md

@@ -0,0 +1,4 @@
+matrix-react-example
+====================
+
+An example of how to use the Matrix React SDK to build a more customised app

examples/custom/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" style="height: 100%; overflow: hidden">
+  <head>
+    <meta charset="utf-8">
+    <title>Matrix React SDK Custom Example</title>
+  </head>
+  <body style="height: 100%; ">
+    <section id="matrixchat" style="height: 100%; "></section>
+    <script src="bundle.js"></script>
+    <link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css">
+  </body>
+</html>

examples/custom/index.js

@@ -0,0 +1,40 @@
+/*
+Copyright 2015 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.
+*/
+
+'use strict';
+
+// Remember to make your project depend on react directly as soon as
+// you add a require('react') to any file in your project. Do not rely
+// on react being pulled in via matrix-react-sdk: browserify breaks
+// horribly in this situation and can end up pulling in multiple copies
+// of react.
+var React = require("react");
+
+// We pull in the component broker first, separately, as we need to replace
+// components before the SDK loads.
+var ComponentBroker = require("matrix-react-sdk/src/ComponentBroker");
+
+var CustomMTextTile = require('./CustomMTextTile');
+
+ComponentBroker.set('molecules/MTextTile', CustomMTextTile);
+
+var MatrixReactSdk = require("matrix-react-sdk");
+//var MatrixReactSdk = require("../../src/index");
+
+React.render(
+    <MatrixReactSdk.MatrixChat />,
+    document.getElementById('matrixchat')
+);

examples/custom/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "matrix-react-example",
+  "version": "0.0.1",
+  "description": "Example usage of matrix-react-sdk",
+  "author": "matrix.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/matrix-org/matrix-react-sdk"
+  },
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "browserify": "^10.2.3",
+    "envify": "^3.4.0",
+    "http-server": "^0.8.0",
+    "matrix-react-sdk": "../../",
+    "npm-css": "^0.2.3",
+    "parallelshell": "^1.2.0",
+    "reactify": "^1.1.1",
+    "uglify-js": "^2.4.23",
+    "watchify": "^3.2.1"
+  },
+  "scripts": {
+    "build": "browserify -t [ envify --NODE_ENV production ] -g reactify index.js | uglifyjs -c -m -o bundle.js",
+    "start": "parallelshell 'watchify -v -d -g reactify index.js -o bundle.js' 'http-server'"
+  },
+  "dependencies": {
+    "react": "^0.13.3"
+  }
+}

examples/vector/README.md

@@ -0,0 +1,4 @@
+matrix-react-example
+====================
+
+A simple example of how to use the Matrix React SDK

examples/vector/fonts

@@ -0,0 +1 @@
+../../skins/base/fonts/

examples/vector/icons/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="/icons/mstile-70x70.png"/>
+      <square150x150logo src="/icons/mstile-150x150.png"/>
+      <square310x310logo src="/icons/mstile-310x310.png"/>
+      <wide310x150logo src="/icons/mstile-310x150.png"/>
+      <TileColor>#da532c</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

examples/vector/img

@@ -0,0 +1 @@
+../../skins/base/img

examples/vector/index.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en" style="height: 100%;">
+  <head>
+    <meta charset="utf-8">
+    <title>Vector</title>
+    <link href='fonts/Lato.css' rel='stylesheet' type='text/css'>
+    <link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
+    <link rel="icon" type="image/png" href="/icons/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="/icons/android-chrome-192x192.png" sizes="192x192">
+    <link rel="icon" type="image/png" href="/icons/favicon-96x96.png" sizes="96x96">
+    <link rel="icon" type="image/png" href="/icons/favicon-16x16.png" sizes="16x16">
+    <link rel="manifest" href="/icons/manifest.json">
+    <link rel="shortcut icon" href="/icons/favicon.ico">
+    <meta name="apple-mobile-web-app-title" content="Vector">
+    <meta name="application-name" content="Vector">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="msapplication-TileImage" content="/icons/mstile-144x144.png">
+    <meta name="msapplication-config" content="/icons/browserconfig.xml">
+    <meta name="theme-color" content="#ffffff">
+  </head>
+  <body style="height: 100%;">
+    <audio id="ringbackAudio" loop>
+        <source src="media/ringback.ogg" type="audio/ogg" />
+        <source src="media/ringback.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="callendAudio">
+        <source src="media/callend.ogg" type="audio/ogg" />
+        <source src="media/callend.mp3" type="audio/mpeg" />
+    </audio>
+    <audio id="busyAudio">
+        <source src="media/busy.ogg" type="audio/ogg" />
+        <source src="media/busy.mp3" type="audio/mpeg" />
+    </audio>
+    <section id="matrixchat" style="height: 100%;"></section>
+    <script src="bundle.js"></script>
+    <link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css">
+  </body>
+</html>

examples/vector/index.js

@@ -0,0 +1,83 @@
+/*
+Copyright 2015 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.
+*/
+
+'use strict';
+
+var React = require("react");
+// In normal usage of the module:
+//var MatrixReactSdk = require("matrix-react-sdk");
+// Or to import the source directly from the file system:
+// (This is useful for debugging the SDK as it seems source
+// maps cannot pass through two stages).
+var MatrixReactSdk = require("../../src/index");
+
+// Here, we do some crude URL analysis to allow
+// deep-linking. We only support registration
+// deep-links in this example.
+function routeUrl(location) {
+    if (location.hash.indexOf('#/register') == 0) {
+        var hashparts = location.hash.split('?');
+        var params = {};
+        if (hashparts.length == 2) {
+            var pairs = hashparts[1].split('&');
+            for (var i = 0; i < pairs.length; ++i) {
+                var parts = pairs[i].split('=');
+                if (parts.length != 2) continue;
+                params[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
+            }
+        }
+        window.matrixChat.showScreen('register', params);
+    } else {
+        window.matrixChat.showScreen(location.hash.substring(2));
+    }
+}
+
+function onHashChange(ev) {
+    routeUrl(window.location);
+}
+
+var loaded = false;
+
+// This will be called whenever the SDK changes screens,
+// so a web page can update the URL bar appropriately.
+var onNewScreen = function(screen) {
+    if (!loaded) return;
+    window.location.hash = '#/'+screen;
+}
+
+// We use this to work out what URL the SDK should
+// pass through when registering to allow the user to
+// click back to the client having registered.
+// It's up to us to recognise if we're loaded with
+// this URL and tell MatrixClient to resume registration.
+var makeRegistrationUrl = function() {
+    return window.location.protocol + '//' +
+           window.location.host +
+           window.location.pathname +
+           '#/register';
+}
+
+window.matrixChat = React.render(
+    <MatrixReactSdk.MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
+    document.getElementById('matrixchat')
+);
+
+window.addEventListener('hashchange', onHashChange);
+window.onload = function() {
+    routeUrl(window.location);
+    loaded = true;
+}
+

examples/vector/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "matrix-react-example",
+  "version": "0.0.1",
+  "description": "Example usage of matrix-react-sdk",
+  "author": "matrix.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/matrix-org/matrix-react-sdk"
+  },
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "browserify": "^10.2.3",
+    "envify": "^3.4.0",
+    "http-server": "^0.8.0",
+    "matrix-react-sdk": "../../",
+    "parallelshell": "^1.2.0",
+    "reactify": "^1.1.1",
+    "uglify-js": "^2.4.23",
+    "watchify": "^3.2.1"
+  },
+  "scripts": {
+    "build": "browserify --ignore olm -t [ envify --NODE_ENV production ] -t reactify index.js | uglifyjs -c -m -o bundle.js",
+    "start": "parallelshell \"watchify --ignore olm -v -d -t reactify index.js -o bundle.js\" \"http-server\""
+  }
+}

jenkins.sh

@@ -1,27 +0,0 @@
-#!/bin/bash
-
-set -e
-
-export NVM_DIR="/home/jenkins/.nvm"
-[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
-nvm use 4
-
-set -x
-
-# install the versions of js-sdk and react-sdk provided to us by jenkins
-npm install ./node_modules/matrix-js-sdk-*.tgz
-npm install ./node_modules/matrix-react-sdk-*.tgz
-
-# install the other dependencies
-npm install
-
-# build our artifacts; dumps them in ./vector
-npm run build
-
-# gzip up ./vector
-rm vector-*.tar.gz || true # rm previous artifacts without failing if it doesn't exist
-
-REACT_SHA=$(head -c 12 node_modules/matrix-react-sdk/git-revision.txt)
-JSSDK_SHA=$(head -c 12 node_modules/matrix-js-sdk/git-revision.txt)
-VECTOR_SHA=$(git rev-parse --short=12 HEAD) # use the ACTUAL SHA rather than assume develop
-tar -zcvhf vector-$VECTOR_SHA-react-$REACT_SHA-js-$JSSDK_SHA.tar.gz vector #g[z]ip, [c]reate archive, [v]erbose, [f]ilename, [h]ard-dereference (do not archive symlinks)

package.json

@@ -1,64 +1,40 @@
 {
-  "name": "vector-web",
-  "version": "0.3.0",
-  "description": "Vector webapp",
+  "name": "matrix-react-sdk",
+  "version": "0.0.1",
+  "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
     "type": "git",
-    "url": "https://github.com/vector-im/vector-web"
+    "url": "https://github.com/matrix-org/matrix-react-sdk"
   },
   "license": "Apache-2.0",
+  "main": "src/index.js",
   "style": "bundle.css",
-  "matrix-react-parent": "matrix-react-sdk",
   "scripts": {
-    "reskindex": "reskindex -h src/header",
-    "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
-    "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css --no-watch",
-    "build:compile": "babel --source-maps -d lib src",
-    "build:bundle": "NODE_ENV=production webpack -p lib/vector/index.js vector/bundle.js",
-    "build": "npm run build:css && npm run build:compile && npm run build:bundle",
-    "package": "scripts/package.sh",
-    "start:js": "webpack -w src/vector/index.js vector/bundle.js",
-    "start:js:prod": "NODE_ENV=production webpack -w src/vector/index.js vector/bundle.js",
-    "start:skins:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css",
-    "//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270",
-    "start": "parallelshell \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
-    "start:prod": "parallelshell \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
-    "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*",
-    "prepublish": "npm run build:css && npm run build:compile"
+    "build:skins": "jsx skins build/skins",
+    "build:logic": "jsx src build/src",
+    "build:js": "npm run build:skins && npm run build:logic",
+    "start:js": "jsx -w skins/base/views/ build --source-map-inline",
+    "build:css": "catw 'skins/base/css/**/*.css' -o bundle.css -c uglifycss --no-watch",
+    "start:css": "catw 'skins/base/css/**/*.css' -o bundle.css -v",
+    "build": "npm run build:js && npm run build:css",
+    "start": "parallelshell \"npm run start:js\" \"npm run start:css\"",
+    "prepublish": "npm run build"
   },
   "dependencies": {
-    "babel-polyfill": "^6.5.0",
     "classnames": "^2.1.2",
-    "extract-text-webpack-plugin": "^0.9.1",
     "filesize": "^3.1.2",
-    "flux": "~2.0.3",
-    "gemini-scrollbar": "^1.3.0",
-    "gfm.css": "^1.1.1",
-    "highlight.js": "^9.0.0",
-    "linkifyjs": "^2.0.0-beta.4",
-    "matrix-js-sdk": "^0.4.1",
-    "matrix-react-sdk": "^0.2.0",
-    "modernizr": "^3.1.0",
+    "flux": "^2.0.3",
+    "matrix-js-sdk": "git://github.com/matrix-org/matrix-js-sdk.git#no-trickle-ice",
     "q": "^1.4.1",
-    "react": "^0.14.2",
-    "react-dnd": "^2.0.2",
-    "react-dnd-html5-backend": "^2.0.0",
-    "react-dom": "^0.14.2",
-    "react-gemini-scrollbar": "^2.0.1",
-    "sanitize-html": "^1.11.1"
+    "react": "^0.13.3",
+    "react-loader": "^1.4.0",
+    "linkifyjs": "^2.0.0-beta.4"
   },
   "devDependencies": {
-    "babel": "^5.8.23",
-    "babel-core": "^5.8.25",
-    "babel-loader": "^5.3.2",
     "catw": "^1.0.1",
-    "css-raw-loader": "^0.1.1",
-    "http-server": "^0.8.4",
-    "json-loader": "^0.5.3",
     "parallelshell": "^1.2.0",
-    "rimraf": "^2.4.3",
-    "source-map-loader": "^0.1.5",
-    "webpack": "^1.12.13"
+    "react-tools": "^0.13.3",
+    "uglifycss": "0.0.15"
   }
 }

scripts/package.sh

@@ -1,15 +0,0 @@
-#!/bin/sh
-
-set -e
-
-version=`git describe --dirty --tags || echo unknown`
-
-npm run build
-mkdir -p packages
-cp -r vector vector-$version
-echo $version > vector-$version/version
-tar chvzf packages/vector-$version.tar.gz vector-$version
-rm -r vector-$version
-
-echo
-echo "Packaged packages/vector-$version.tar.gz"

skins/base/css/atoms/MessageTimestamp.css

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

skins/base/css/common.css

@@ -0,0 +1,124 @@
+/*
+Copyright 2015 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.
+*/
+
+body {
+    font-family: 'Lato', Helvetica, Arial, Sans-Serif;
+    font-size: 16px;
+    color: #454545;
+    border: 0px;
+    margin: 0px;
+}
+
+div.error {
+    color: red;
+}
+
+h2 {
+    color: #80cef4;
+    font-weight: 400;
+    font-size: 20px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+}
+
+/* FIXME: show them on hoverover, and fix for firefox */
+::-webkit-scrollbar {
+    display: none;
+}
+
+html {
+    overflow: -moz-scrollbars-none;
+}
+
+/* FIXME: why is all the dialog stuff in here rather than in per-component files? */
+
+.mx_Dialog_Background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    opacity: 0.2;
+    z-index: 2000;
+}
+
+.mx_Dialog_Wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+
+.mx_Dialog {
+    background-color: #fff;
+    color: #747474;
+    text-align: center;
+    z-index: 2010;
+    font-weight: 300;
+    font-size: 16px;
+    position: relative;
+    border-radius: 8px;
+}
+
+.mx_ImageView {
+    margin: 6px;
+    /* hack: flexbox bug? */
+    margin-bottom: 4px;
+}
+
+.mx_Dialog_content {
+    margin: 24px;
+}
+
+.mx_Dialog_buttons {
+    padding-bottom: 24px;
+}
+
+.mx_Dialog button {
+    border: 0px;
+    height: 36px;
+    border-radius: 36px;
+    font-weight: 400;
+    font-size: 16px;
+    color: #fff;
+    background-color: #80cef4;
+    margin-left: 8px;
+    margin-right: 8px;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+.mx_ErrorDialogTitle,
+.mx_QuestionDialogTitle {
+    min-height: 16px;
+    padding: 12px;
+    border-bottom: 1px solid #a9dbf4;
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 1.4;
+}

skins/base/css/hide.css

@@ -0,0 +1,11 @@
+.mx_RoomDropTarget,
+.mx_RoomList_favourites_label,
+.mx_RoomList_archive_label,
+.mx_LeftPanel_hideButton,
+.mx_RoomHeader_search,
+.mx_RoomSettings_encrypt,
+.mx_CreateRoom_encrypt,
+.mx_RightPanel_filebutton
+{
+    display: none !important;
+}

skins/base/css/molecules/MImageTile.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -13,3 +13,7 @@ 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_MImageTile {
+}
+

skins/base/css/molecules/MNoticeTile.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_PresenceLabel {
-    font-size: 11px;
+.mx_MNoticeTile {
     opacity: 0.5;
-}
+}

skins/base/css/molecules/MTextTile.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MTextBody {
+.mx_MTextTile {
     white-space: pre-wrap;
 }
+

skins/base/css/molecules/MatrixToolbar.css

@@ -0,0 +1,28 @@
+/*
+Copyright 2015 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 {
+    width: 100%;
+    text-align: center;
+    background-color: #ff0064;
+    color: #fff;
+    font-weight: bold;
+    padding: 6px;
+}
+
+.mx_MatrixToolbar button {
+    margin-left: 12px;
+}

skins/base/css/molecules/MemberInfo.css

@@ -0,0 +1,73 @@
+/*
+Copyright 2015 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 {
+    text-align: center;
+    border: 1px solid #a9dbf4;
+    border-radius: 8px;
+    background-color: #fff;
+    position: absolute;
+    width: 200px;
+    margin-left: -295px;
+    margin-top: 0px;
+    z-index: 1000;
+    padding: 6px;
+}
+
+.mx_MemberInfo_chevron {
+    padding: 12px;
+    position: absolute;
+    right: -21px;
+    top: 0px;
+}
+
+/*
+ * a hacky shim to extend the hitmask of the overlay to overlap
+ * better with the main menu itself
+ */
+.mx_MemberInfo_shim {
+    position: absolute;
+    left: 212px;
+    width: 40px;
+    height: 100%;
+}
+
+.mx_MemberInfo_avatar {
+    padding: 6px;
+}
+
+.mx_MemberInfo_avatarImg {
+    border-radius: 128px;
+}
+
+.mx_MemberInfo_field {
+    padding: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mx_MemberInfo_button {
+    vertical-align: middle;
+    max-width: 100px;
+    height: 36px;
+    background-color: #50e3c2;
+    line-height: 36px;
+    border-radius: 36px;
+    color: #fff;
+    margin: auto;
+    margin-top: 6px;
+    margin-bottom: 6px;
+}

skins/base/css/molecules/MemberTile.css

@@ -0,0 +1,107 @@
+/*
+Copyright 2015 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_MemberTile {
+    cursor: pointer;
+    display: table-row;
+    height: 49px;
+}
+
+.mx_MemberTile_avatar {
+    display: table-cell;
+    padding-right: 12px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    vertical-align: middle;
+    width: 40px;
+    height: 40px;
+    position: relative;
+}
+
+.mx_MemberTile_avatarImg {
+    z-index: 20;
+    border-radius: 20px;
+    background-color: #dbdbdb;
+}
+
+.mx_MemberTile_inviteEditing {
+    display: initial ! important;
+}
+
+.mx_MemberTile_inviteEditing .mx_MemberTile_avatar {
+    display: none;
+}
+
+.mx_MemberTile_inviteEditing .mx_MemberTile_name {
+    width: 200px;
+}
+
+.mx_MemberTile_inviteEditing .mx_MemberTile_name input {
+    border-radius: 3px;
+    border: 1px solid #c7c7c7;
+    font-weight: 300;
+    font-size: 14px;
+    padding: 9px;
+    margin-top: 6px;
+}
+
+.mx_MemberTile_power {
+    z-index: 10;
+    position: absolute;
+    width: 48px;
+    height: 48px;
+    left: -4px;
+    top: -1px;
+}
+
+.mx_MemberTile_name {
+    display: table-cell;
+    vertical-align: middle;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mx_MemberTile_nameWrapper {
+    display: table-cell;
+    vertical-align: middle;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mx_MemberTile_nameSpan {
+}
+
+.mx_MemberTile_unavailable .mx_MemberTile_avatar,
+.mx_MemberTile_unavailable .mx_MemberTile_name,
+.mx_MemberTile_unavailable .mx_MemberTile_nameSpan
+{
+    opacity: 0.75;
+}
+
+.mx_MemberTile_offline .mx_MemberTile_avatar,
+.mx_MemberTile_offline .mx_MemberTile_name,
+.mx_MemberTile_offline .mx_MemberTile_nameSpan
+{
+    opacity: 0.5;
+}
+
+.mx_MemberTile_zalgo {
+    font-family: Helvetica, Arial, Sans-Serif;
+}
+
+.mx_MemberTile_leave {
+    float: right;
+}

skins/base/css/molecules/MessageComposer.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,93 +15,70 @@ limitations under the License.
 */
 
 .mx_MessageComposer_wrapper {
-    max-width: 960px;
+    max-width: 720px;
+    height: 50px;
     vertical-align: middle;
     margin: auto;
-    border-top: 2px solid #e1dddd;
+    background-color: #fff;
+    border-radius: 25px;
+    border: 1px solid #a9dbf4;
 }
 
 .mx_MessageComposer_row {
     display: table-row;
     width: 100%;
+    height: 50px;
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar {
     display: table-cell;
-    padding-left: 10px;
-    padding-right: 28px;
-    vertical-align: middle;
+    padding-left: 5px;
+    padding-right: 10px;
+    height: 50px;
 }
 
-.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
-    display: block;
+.mx_MessageComposer .mx_MessageComposer_avatar img {
+    margin-top: 5px;
+    border-radius: 20px;
+    background-color: #dbdbdb;
 }
 
 .mx_MessageComposer_input {
     display: table-cell;
     width: 100%;
     vertical-align: middle;
-    height: 70px;
+    height: 50px;
 }
 
 .mx_MessageComposer_input textarea {
-    display: block;
     font-size: 15px;
     width: 100%;
-    padding: 0px;
-    margin-top: 6px;
-    margin-bottom: 6px;
+    height: 1.2em;
+    padding-top: 0.7em;
+    padding-bottom: 0.7em;
     border: 0px;
     resize: none;
     outline: none;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
-    box-shadow: none;
-    color: #454545;
-    background-color: #fff;
+    box-shadow: none;    
 
     /* needed for FF */
-    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    font-family: 'Lato', Helvetica, Arial, Sans-Serif;
 }
 
 /* hack for FF as vertical alignment of custom placeholder text is broken */
 .mx_MessageComposer_input textarea::-moz-placeholder {
     line-height: 100%;
-    color: #76cfa6;
-    opacity: 1.0;
-}
-.mx_MessageComposer_input textarea::-webkit-input-placeholder {
-    color: #76cfa6;
 }
 
-.mx_MessageComposer_upload,
-.mx_MessageComposer_hangup,
-.mx_MessageComposer_voicecall,
-.mx_MessageComposer_videocall {
+.mx_MessageComposer_upload {
     display: table-cell;
     vertical-align: middle;
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-right: 15px;
     cursor: pointer;
 }
 
-.mx_MessageComposer_upload object,
-.mx_MessageComposer_hangup object,
-.mx_MessageComposer_voicecall object,
-.mx_MessageComposer_videocall object {
-    pointer-events: none;
-}
-
-.mx_MessageComposer_videocall {
-    padding-right: 10px;
-    padding-top: 4px;
-}
-
-.mx_MessageComposer_voicecall {
-    padding-right: 10px;
-    padding-top: 4px;
-}
-
-.mx_MessageComposer_upload object {
+.mx_MessageComposer_upload img {
     margin-top: 5px;
 }

skins/base/css/molecules/MessageTile.css

@@ -0,0 +1,92 @@
+/*
+Copyright 2015 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_MessageTile {
+    max-width: 100%;
+    clear: both;
+    margin-top: 32px;
+    margin-left: 56px;
+}
+
+.mx_MessageTile_avatar {
+    padding-left: 12px;
+    padding-right: 12px;
+    margin-left: -64px;
+    margin-top: -7px;
+    float: left;
+}
+
+.mx_MessageTile_avatar img {
+    background-color: #dbdbdb;
+    border-radius: 20px;
+    border: 0px;
+}
+
+.mx_MessageTile_continuation {
+    margin-top: 8px ! important;
+}
+
+.mx_MessageTile .mx_SenderProfile {
+    color: #454545;
+    opacity: 0.5;
+    font-size: 14px;
+    margin-bottom: 4px;
+    display: block;
+}
+
+.mx_MessageTile .mx_MessageTimestamp {
+    color: #454545;
+    opacity: 0.5;
+    font-size: 14px;
+    float: right;
+}
+
+.mx_MessageTile_content {
+    padding-right: 100px;
+    display: block;
+}
+
+.mx_MessageTile_notice .mx_MessageTile_content {
+    opacity: 0.5;
+}
+
+.mx_MessageTile_sending {
+    color: #ddd;
+}
+
+.mx_MessageTile_notSent {
+    color: #f11;
+}
+
+.mx_MessageTile_highlight {
+    color: #00f;
+}
+
+.mx_MessageTile_msgOption {
+    float: right;
+}
+
+.mx_MessageTimestamp {
+    display: none;
+}
+
+.mx_MessageTile_last .mx_MessageTimestamp {
+    display: block;
+}
+
+.mx_MessageTile:hover .mx_MessageTimestamp {
+    display: block;
+}

skins/base/css/molecules/ProgressBar.css

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

skins/base/css/molecules/RoomDropTarget.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,19 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomTooltip {
-    display: none;
-    position: fixed;
-    border: 1px solid #a4a4a4;
+.mx_RoomDropTarget {
+    font-size: 14px;
+    text-align: center;
+    margin-left: 8px;
+    margin-right: 8px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    background-color: #fbfbfb;
+    border: 1px dashed #d7d7d7;
     border-radius: 8px;
-    background-color: #fff;
-    z-index: 1000;
-    left: 64px;
-    padding: 6px;
-}
-
-.mx_RoomTooltip_chevron {
-    position: absolute;
-    left: -9px;
-    top: 8px;
 }

skins/base/css/molecules/RoomHeader.css

@@ -0,0 +1,154 @@
+/*
+Copyright 2015 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_RoomHeader {
+}
+
+.mx_RoomHeader_wrapper {
+    max-width: 720px;
+    margin: auto;
+    height: 88px;
+    border-bottom: 1px solid #a8dbf3;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+}
+
+.mx_RoomHeader_leftRow {
+    height: 48px;
+    margin-top: 18px;
+
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
+
+    flex: 1;
+}
+
+.mx_RoomHeader_textButton {
+    height: 48px;
+    margin-top: 18px;
+    background-color: #80cef4;
+    border-radius: 48px;
+    margin-right: 8px;
+    color: #fff;
+    line-height: 48px;
+    text-align: center;
+
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 0 0 90px;
+    flex: 0 0 90px;
+}
+
+.mx_RoomHeader_rightRow {
+    height: 48px;
+    margin-top: 18px;
+    background-color: #fff;
+    border-radius: 48px;
+    border: 1px solid #a9dbf4;
+
+    -webkit-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -ms-flex-order: 3;
+    -webkit-order: 3;
+    order: 3;
+}
+
+.mx_RoomHeader_info {
+    display: table-cell;
+    height: 48px;
+    vertical-align: middle;
+}
+
+.mx_RoomHeader_simpleHeader {
+    line-height: 88px;
+    color: #80cef4;
+    font-weight: 400;
+    font-size: 20px;
+    overflow: scroll;
+    text-overflow: ellipsis;
+}
+
+.mx_RoomHeader_name {
+    vertical-align: middle;
+    height: 28px;
+    color: #80cef4;
+    font-weight: 400;
+    font-size: 20px;
+    padding-left: 16px;
+    padding-right: 16px;
+    text-overflow: ellipsis;
+}
+
+.mx_RoomHeader_nameEditing {
+    padding-left: 16px;
+    padding-right: 16px;
+    margin-top: -5px;
+}
+
+.mx_RoomHeader_nameInput {
+    border-radius: 3px;
+    width: 260px;
+    border: 1px solid #c7c7c7;
+    font-weight: 300;
+    font-size: 14px;
+    padding: 9px;
+    margin-top: 6px;
+}
+
+.mx_RoomHeader_topic {
+    vertical-align: bottom;
+    float: left;
+    max-height: 38px;
+    color: #70b5d7;  
+    font-weight: 300;  
+    padding-left: 16px;
+    padding-right: 16px;
+    overflow-y: scroll;
+}
+
+.mx_RoomHeader_avatar {
+    display: table-cell;
+    width: 48px;
+    height: 50px;
+    vertical-align: middle;
+}
+
+.mx_RoomHeader_avatar img {
+	border-radius: 24px;
+}
+
+.mx_RoomHeader_button {
+    height: 48px;
+    display: table-cell;
+    vertical-align: middle;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.mx_RoomHeader_button img {
+    cursor: pointer;
+}

skins/base/css/molecules/RoomSettings.css

@@ -0,0 +1,70 @@
+/*
+Copyright 2015 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_RoomSettings {
+    max-height: 250px;
+    padding-top: 12px;
+}
+
+.mx_RoomSettings_settings {
+    display: table;
+    margin: 5px 0;
+}
+
+.mx_RoomSettings_settings > div {
+    display: table-row;
+}
+
+.mx_RoomSettings_settings > div > * {
+    display: table-cell;
+
+    margin: 0 10px;
+}
+
+.mx_RoomSettings input,
+.mx_RoomSettings textarea  {
+    border-radius: 3px;
+    border: 1px solid #c7c7c7;
+    font-weight: 300;
+    font-size: 14px;
+    padding: 9px;
+    margin-top: 6px;
+}
+
+.mx_RoomSettings_description {
+    width: 330px;
+}
+
+.mx_RoomSettings_buttons {
+    text-align: right;
+    margin-bottom: 16px;
+}
+
+.mx_RoomSettings_button {
+    display: inline;
+    border: 0px;
+    height: 36px;
+    border-radius: 36px;
+    font-weight: 400;
+    font-size: 16px;
+    color: #fff;
+    background-color: #80cef4;
+    width: auto;
+    margin: auto;
+    padding: 6px;
+    padding-left: 1em;
+    padding-right: 1em;
+}

skins/base/css/molecules/RoomTile.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,45 +16,33 @@ limitations under the License.
 
 .mx_RoomTile {
     cursor: pointer;
-    /* This fixes wrapping of long room names, but breaks drag & drop previews */
-    /* display: table-row; */
-    font-size: 13px;
+    display: table-row;
+    color: #818794;
 }
 
 .mx_RoomTile_avatar {
     display: table-cell;
-    padding-right: 8px;
-    padding-top: 6px;
-    padding-bottom: 6px;
-    padding-left: 18px;
-    width: 24px;
-    height: 24px;
-    position: relative;
+    padding-right: 12px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    padding-left: 16px;
     vertical-align: middle;
+    width: 40px;
+    height: 40px;
+    position: relative;
+}
+
+.mx_RoomTile_avatar img {
+    border-radius: 20px;
+    background-color: #dbdbdb;
 }
 
 .mx_RoomTile_name {
     display: table-cell;
-    width: 100%;
     vertical-align: middle;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-right: 16px;    
-    color: rgba(69, 69, 69, 0.8);
-}
-
-.mx_RoomTile_ellipsis .mx_RoomTile_name {
-    font-style: italic;
-    color: #454545;
-}
-
-.mx_RoomTile_invite {
-/*    color: rgba(69, 69, 69, 0.5);
-*/
-}
-
-.collapsed .mx_RoomTile_name {
-    display: none;
 }
 
 /*
@@ -71,7 +59,7 @@ limitations under the License.
 }
 
 .mx_RoomTile_badge {    
-    background-color: #76cfa6;
+    background-color: #80cef4;
     color: #fff;
     border-radius: 26px;
     font-weight: 400;
@@ -83,7 +71,6 @@ limitations under the License.
 }
 */
 
-/*
 .mx_RoomTile_badge {    
     background-color: #ff0064;
     border: 3px solid #fff;
@@ -94,47 +81,19 @@ limitations under the License.
     right: 9px;
     bottom: 3px;
 }
-*/
-
-.mx_RoomTile_badge {
-    background-color: #ff0064;
-    width: 4px;
-    position: absolute;
-    left: 0px;
-    top: 5px;
-    bottom: 5px;
-} 
-
-.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
-    background-color: #454545;
-}
-
-.mx_RoomTile_highlight .mx_RoomTile_badge {
-    background-color: #ff0064;
-}
 
 .mx_RoomTile_unread,
-.mx_RoomTile_highlight {
+.mx_RoomTile_highlight,
+.mx_RoomTile_invited
+{
     font-weight: bold;
+    color: #000;
 }
 
-.mx_RoomTile_selected .mx_RoomTile_name {
-    color: #76cfa6 ! important;
-}
-
-.mx_RoomTile_highlight .mx_RoomTile_name {
-    color: #ff0064 ! important;
-}
-
-.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name {
-    background: url('img/selected.png');
-    background-repeat: no-repeat;
-    background-position: right center;
-}
-
-.mx_RoomTile_arrow {
-    position: absolute;
-    right: 0px;
+.mx_RoomTile_selected {
+    background-color: #f3f8fa;
+    color: #80cef4;
+    font-weight: bold;
 }
 
 .mx_RoomTile:hover {

skins/base/css/molecules/SenderProfile.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -13,3 +13,8 @@ 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_SenderProfile_zalgo {
+    font-family: Helvetica, Arial, Sans-Serif;
+    display: table-row ! important;
+}

skins/base/css/molecules/ServerConfig.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -25,7 +25,7 @@ limitations under the License.
 
 .mx_ServerConfig_help:link {
     opacity: 0.8;
-    font-size: 13px;
+    font-size: 14px;
     font-weight: 300;
     color: #4a4a4a;
 }

skins/base/css/molecules/voip/CallView.css

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

skins/base/css/molecules/voip/IncomingCallbox.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,15 +16,14 @@ limitations under the License.
 
 .mx_IncomingCallBox {
     text-align: center;
-    border: 1px solid #a4a4a4;
+    border: 1px solid #a9dbf4;
     border-radius: 8px;
     background-color: #fff;
-    position: fixed;
+    position: absolute;
     z-index: 1000;
+    left: 235px;
+    top: 155px;
     padding: 6px;
-    margin-top: -3px;
-    margin-left: -20px;
-    width: 200px;
 }
 
 .mx_IncomingCallBox_chevron {
@@ -40,15 +39,14 @@ limitations under the License.
 }
 
 .mx_IncomingCallBox_buttons {
-    display: flex;
-    display: -webkit-flex;
+    display: table-row;
 }
 
 .mx_IncomingCallBox_buttons_cell {
     vertical-align: middle;
+    display: table-cell;
     padding: 6px;
-    flex: 1;
-    -webkit-flex: 1;
+    width: 50%;
 }
 
 .mx_IncomingCallBox_buttons_decline,
@@ -59,7 +57,6 @@ limitations under the License.
     line-height: 36px;
     border-radius: 36px;
     color: #fff;
-    margin: auto;
 }
 
 .mx_IncomingCallBox_buttons_decline {

skins/base/css/molecules/voip/VideoView.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -31,15 +31,9 @@ limitations under the License.
 }
 
 .mx_VideoView_localVideoFeed {
-    width: 25%;
-    height: 25%;
+    width: 20%;
     position: absolute;
-    left: 10px;
-    bottom: 10px;
+    left: 16px;
+    bottom: 28px;
     z-index: 100;
-}
-
-.mx_VideoView_localVideoFeed video {
-    width: auto;
-    height: 100%;
 }

skins/base/css/organisms/CreateRoom.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_CreateRoom {
-    width: 960px;
+    width: 720px;
     margin-left: auto;
     margin-right: auto;
     color: #4a4a4a;    
@@ -26,7 +26,7 @@ limitations under the License.
     border-radius: 3px;
     border: 1px solid #c7c7c7;
     font-weight: 300;
-    font-size: 13px;
+    font-size: 14px;
     padding: 9px;
     margin-top: 6px;
 }

skins/base/css/organisms/LeftPanel.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -29,26 +29,18 @@ limitations under the License.
 .mx_LeftPanel_hideButton {
     position: absolute;
     top: 10px;
-    right: 0px;
-    padding: 8px;
-    cursor: pointer;
+    right: 10px;
 }
 
-.mx_LeftPanel_callView {
-    
-}
-
-.mx_LeftPanel .mx_RoomList_scrollbar {
+.mx_LeftPanel .mx_RoomList {
     -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 1 1 0;
+    overflow-y: scroll;
     flex: 1 1 0;
-
-    overflow-y: auto; 
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu {
@@ -58,23 +50,21 @@ limitations under the License.
     -webkit-order: 3;
     order: 3;
 
-    -webkit-flex: 0 0 140px;
-    flex: 0 0 140px;
+    -webkit-flex: 0 0 170px;
+    flex: 0 0 170px;
 
-    background-color: rgba(118,207,166,0.2);
+    border-top: 1px solid #f3f8fa;
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
-    color: #454545;
+    color: #378bb4;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile_avatar {
+    padding-left: 14px;
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
-    margin-top: 15px;
+    margin-top: 12px;
     width: 100%;
-}
-
-.mx_LeftPanel .mx_BottomLeftMenu img {
-    border-radius: 0px;
-    background-color: transparent;
-    vertical-align: middle;
 }

skins/base/css/organisms/MemberList.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,43 +14,47 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomPreviewBar {
-    text-align: center;
-    height: 176px;
+.mx_MemberList {
+    height: 100%;
+    margin-bottom: 100px;
+    padding: 8px;
 
-    -webkit-align-items: center;
-    align-items: center;
-
-    flex-direction: column;
-    -webkit-flex-direction: column;
-    
-    justify-content: center;
-    -webkit-justify-content: center;
+    -webkit-flex: 1;
+    flex: 1;
 
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
 }
 
-.mx_RoomPreviewBar_wrapper {
+.mx_MemberList_chevron {
+    position: absolute;
+    right: 35px;
+    margin-top: -15px;
 }
 
-.mx_RoomPreviewBar_invite_text {
-    color: #454545;
+.mx_MemberList_border {
+    border: 1px solid #a9dbf4;
+    overflow-y: scroll;
+    border-radius: 8px;
+    padding: 20px 14px 14px 24px;
+    background-color: #fff;
+
+    order: 1;
+    flex: 1 1 0px;
 }
 
-.mx_RoomPreviewBar_join_text {
-    color: #ff0064;
+.mx_MemberList_wrapper {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
 }
 
-.mx_RoomPreviewBar_preview_text {
-    margin-top: 25px;
-    color: #a4a4a4;
-}
-
-.mx_RoomPreviewBar_join_text a {
-    text-decoration: underline;
-    cursor: pointer;
+.mx_MemberList h2 {
+    margin-top: 0px;
 }

skins/base/css/organisms/RightPanel.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -33,57 +33,32 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 83px;
-    flex: 0 0 83px;
+    -webkit-flex: 0 0 66px;
+    flex: 0 0 66px;    
 }
 
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_headerButtonGroup {
-    margin-top: 32px;
-    float: left;
+    margin-top: 18px;
+    height: 48px;
+    float: right;
     background-color: #fff;
-    margin-left: -4px;
+    border-radius: 48px;
+    border: 1px solid #a9dbf4;
+    margin-right: 22px;
 }
 
 .mx_RightPanel_headerButton {
     cursor: pointer;
+    height: 48px;
     display: table-cell;
     vertical-align: middle;    
-    padding-left: 15px;
-    padding-right: 15px;
-    position: relative;
+    padding-left: 8px;
+    padding-right: 8px;
 }
 
-.mx_RightPanel_headerButton object {
-    pointer-events: none;
-}
-
-.mx_RightPanel_headerButton_highlight {
-    position: absolute;
-    bottom: -2px;
-    left: 10px;
-    width: 25px;
-    height: 4px;
-    background-color: #76cfa6;
-}
-
-.mx_RightPanel_headerButton_badge {
-    position: absolute;
-    top: 4px;
-    left: 28px;
-    font-size: 12px;    
-    background-color: #76cfa6;
-    color: #fff;
-    font-weight: bold;
-    border-radius: 20px;
-    padding-left: 4px;
-    padding-right: 4px;
-    padding-top: 0px;
-}
-
-.mx_RightPanel .mx_MemberList,
-.mx_RightPanel .mx_MemberInfo {
+.mx_RightPanel .mx_MemberList {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;

skins/base/css/organisms/RoomDirectory.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 .mx_RoomDirectory {
-    max-width: 960px;
-    width: 100%;
+    width: 720px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 12px;
@@ -33,7 +32,6 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_list {
-    -webkit-flex: 1;    
     flex: 1;
 
     display: -webkit-box;
@@ -51,74 +49,49 @@ limitations under the License.
     border-radius: 3px;
     border: 1px solid #c7c7c7;
     font-weight: 300;
-    font-size: 13px;
+    font-size: 14px;
     padding: 9px;
     margin-top: 12px;
     margin-bottom: 12px;
 }
 
 .mx_RoomDirectory_tableWrapper {
-    overflow-y: auto;
-    -webkit-flex: 1 1 0;    
+    overflow-y: scroll;
     flex: 1 1 0;
 }
 
 .mx_RoomDirectory_table {
-    font-size: 14px;
-    color: #4a4a4a;
     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;
-    height: 15px;
-    border-radius: 11px;
-    background-color: #eaf5f0;
-    text-transform: uppercase;
-    font-weight: 600;
-    font-size: 11px;
-    color: #61c295;
-}
-
-.mx_RoomDirectory_topic {
-    cursor: initial;
-}
-
-.mx_RoomDirectory_alias {
+.mx_RoomDirectory_table th {
+    font-weight: 400;
     font-size: 12px;
-    color: #b3b3b3;
 }
 
-.mx_RoomDirectory_roomMemberCount {
-    text-align: right;
-    width: 100px;
-}
-
-.mx_RoomDirectory_table tr {
-    padding-bottom: 10px;
+.mx_RoomDirectory_table tbody {
     cursor: pointer;
 }
+
+.mx_RoomDirectory_table td {
+    font-weight: 300;
+    font-size: 16px;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+}
+
+.mx_RoomDirectory_table .mx_RoomDirectory_name {
+    font-weight: 400;
+}
+
+.mx_RoomDirectory_table .mx_RoomDirectory_topic {
+    font-weight: 400;
+    font-size: 12px;
+}
+
+.mx_RoomDirectory_table td,
+.mx_RoomDirectory_table th, {
+    padding: 6px;
+}

skins/base/css/organisms/RoomList.css

@@ -0,0 +1,30 @@
+/*
+Copyright 2015 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_RoomList {
+}
+
+.mx_RoomList_recents {
+    margin-top: -12px;
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+}
+
+.mx_RoomList h2 {
+    padding-left: 16px;
+    padding-right: 16px;
+}

skins/base/css/organisms/RoomView.css

@@ -0,0 +1,166 @@
+/*
+Copyright 2015 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: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    width: 100%;
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
+}
+
+.mx_RoomView .mx_RoomHeader {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
+
+    -webkit-flex: 0 0 88px;
+    flex: 0 0 88px;
+}
+
+.mx_RoomView_auxPanel {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    min-width: 0px;
+    max-width: 720px;
+    width: 100%;
+    margin: auto;
+
+    border-bottom: 1px solid #a8dbf3;
+
+    overflow: scroll;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
+}
+
+.mx_RoomView_messagePanel {
+    -webkit-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -ms-flex-order: 3;
+    -webkit-order: 3;
+    order: 3;
+
+    -webkit-flex: 1 1 0;
+    flex: 1 1 0;
+
+    width: 100%;
+    margin-top: 18px;
+    margin-bottom: 18px;
+
+    overflow-y: scroll;
+}
+
+.mx_RoomView_messageListWrapper {
+    max-width: 720px;
+    margin: auto;
+}
+
+.mx_RoomView_MessageList {
+    width: 100%;
+}
+
+.mx_RoomView_MessageList h2 {
+    clear: both;
+    margin-top: 32px;
+    margin-bottom: 8px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #a8dbf3;
+}
+
+.mx_RoomView_invitePrompt {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    min-width: 0px;
+    max-width: 720px;
+    width: 100%;
+    margin: auto;
+
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+.mx_RoomView_statusArea {
+    -webkit-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -ms-flex-order: 4;
+    -webkit-order: 4;
+    order: 4;
+
+    width: 100%;
+    -webkit-flex: 0 0 58px;
+    flex: 0 0 58px;
+}
+
+.mx_RoomView_statusAreaBox {
+    max-width: 720px;
+    margin: auto;
+    border-top: 1px solid #a8dbf3;
+}
+
+.mx_RoomView_typingBar {
+    margin-top: 17px;
+    margin-left: 56px;
+    color: #818794;
+}
+
+.mx_RoomView_typingBar img {
+    padding-left: 12px;
+    padding-right: 12px;
+    margin-left: -64px;
+    margin-top: -7px;
+    float: left;    
+}
+
+.mx_RoomView .mx_MessageComposer {
+    -webkit-box-ordinal-group: 5;
+    -moz-box-ordinal-group: 5;
+    -ms-flex-order: 5;
+    -webkit-order: 5;
+    order: 5;
+
+    width: 100%;
+    -webkit-flex: 0 0 63px;
+    flex: 0 0 63px;
+    margin-right: 2px;
+}
+
+.mx_RoomView_uploadProgressOuter {
+    width: 100%;
+    background-color: black;
+    height: 5px;
+}
+
+.mx_RoomView_uploadProgressInner {
+    background-color: blue;
+    height: 5px;
+}

skins/base/css/organisms/UserSettings.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MNoticeBody {
-    white-space: pre-wrap;
-    opacity: 0.6;
+.mx_UserSettings {
+    width: 720px;
+    margin-left: auto;
+    margin-right: auto;
 }

skins/base/css/pages/MatrixChat.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,18 +14,6 @@ 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: -webkit-box;
     display: -moz-box;
@@ -47,17 +35,7 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    height: 40px;
-}
-
-.mx_GuestWarningBar {
-    -webkit-box-ordinal-group: 1;
-    -moz-box-ordinal-group: 1;
-    -ms-flex-order: 1;
-    -webkit-order: 1;
-    order: 1;
-
-    height: 40px;
+    height: 21px;
 }
 
 .mx_MatrixChat_toolbarShowing {
@@ -91,15 +69,8 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    background-color: #eaf5f0;
-
-    -webkit-flex: 0 0 210px;
-    flex: 0 0 210px;
-}
-
-.mx_MatrixChat .mx_LeftPanel.collapsed {
-    -webkit-flex: 0 0 60px;
-    flex: 0 0 60px;
+    -webkit-flex: 0 0 230px;
+    flex: 0 0 230px;
 }
 
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
@@ -109,25 +80,15 @@ limitations under the License.
     -webkit-order: 2;
     order: 2;
 
-    padding-left: 25px;
-    padding-right: 22px;
-    background-color: #fff;
-
-    -webkit-flex: 1;
-    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;
+    padding-left: 12px;
+    padding-right: 12px;
+    background-color: #f3f8fa;
+    width: 100%;
 
     /* XXX: Hack: apparently if you try to nest a flex-box
      * within a non-flex-box within a flex-box, the height
      * of the innermost element gets miscalculated if the
-     * parents are both auto.  Height has to be auto here
-     * for RoomView to correctly fit when the Toolbar is shown.
+     * parents are both auto.
      * Ideally we'd launch straight into the RoomView at this
      * point, but instead we fudge it and make the middlePanel
      * flex itself.
@@ -146,11 +107,7 @@ limitations under the License.
     -webkit-order: 3;
     order: 3;
 
-    -webkit-flex: 0 0 235px;
-    flex: 0 0 235px;
-}
-
-.mx_MatrixChat .mx_RightPanel.collapsed {
-    -webkit-flex: 0 0 72px;
-    flex: 0 0 72px;
+    background-color: #f3f8fa;
+    -webkit-flex: 0 0 230px;
+    flex: 0 0 230px;
 }

skins/base/css/templates/Login.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,7 +17,6 @@ limitations under the License.
 .mx_Login {
     width: 100%;
     height: 100%;
-
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
@@ -27,8 +26,6 @@ limitations under the License.
     align-items: center;
     -webkit-justify-content: center;
     justify-content: center;
-
-    overflow: auto;
 }
 
 .mx_Login h2 {
@@ -40,10 +37,6 @@ limitations under the License.
 
 .mx_Login_box {
     width: 300px;
-    min-height: 450px;
-    padding-top: 50px;
-    padding-bottom: 50px;
-    margin: auto;
 }
 
 .mx_Login_logo {
@@ -55,7 +48,7 @@ limitations under the License.
     border-radius: 3px;
     border: 1px solid #c7c7c7;
     font-weight: 300;
-    font-size: 13px;
+    font-size: 14px;
     padding: 9px;
     margin-bottom: 14px;
 }
@@ -68,12 +61,12 @@ limitations under the License.
     height: 40px;
     border: 0px;
     background-color: #76cfa6;
-    font-size: 15px;
+    font-size: 16px;
     color: #fff;
 }
 
 .mx_Login_label {
-    font-size: 13px;
+    font-size: 14px;
     opacity: 0.8;
 }
 
@@ -85,56 +78,18 @@ limitations under the License.
     display: block;
     text-align: center;
     width: 100%;
-    font-size: 13px;
+    font-size: 14px;
     opacity: 0.8;
 }
 
-.mx_Login_create:link {
-    color: #4a4a4a;
-}
-
-.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: #4a4a4a;
-}
-
-.mx_Login_prompt {
-    padding-top: 15px;
-    padding-bottom: 15px;
-    font-size: 13px;
-}
-
-.mx_Login_forgot {
-    font-size: 13px;
-    opacity: 0.8;
-}
-
-.mx_Login_forgot:link {
-    color: #4a4a4a;
-}
-
-.mx_Login_loader {
-    position: absolute;
-    left: 50%;
-    margin-top: 12px;
-}
-
 .mx_Login_error {
     color: #ff2020;
     font-weight: bold;
     text-align: center;
-/*
-    height: 24px;
-*/
-    margin-top: 12px;
-    margin-bottom: 12px;
+    margin-bottom: 24px;
+}
+
+.mx_Login_create:link {
+    color: #4a4a4a;
 }