diff --git a/res/css/views/globals/_MatrixToolbar.scss b/res/css/views/globals/_MatrixToolbar.scss
index be69b15f37..1109b9e264 100644
--- a/res/css/views/globals/_MatrixToolbar.scss
+++ b/res/css/views/globals/_MatrixToolbar.scss
@@ -28,6 +28,12 @@ limitations under the License.
margin-top: -2px;
}
+.mx_MatrixToolbar_error {
+ padding-left: 16px;
+ padding-right: 8px;
+ background-color: $warning-bg-color;
+}
+
.mx_MatrixToolbar_content {
flex: 1;
}
@@ -59,4 +65,4 @@ limitations under the License.
.mx_MatrixToolbar_changelog {
white-space: pre;
-}
\ No newline at end of file
+}
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 31773ebd09..ad4630d668 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -19,6 +19,7 @@ $focus-brightness: 200%;
// red warning colour
$warning-color: #ff0064;
+$warning-bg-color: #DF2A8B;
// groups
$info-plinth-bg-color: #454545;
diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss
index 55c761e8d9..dedfeaeb2f 100644
--- a/res/themes/light/css/_base.scss
+++ b/res/themes/light/css/_base.scss
@@ -25,6 +25,8 @@ $focus-brightness: 125%;
// red warning colour
$warning-color: #ff0064;
+// background colour for warnings
+$warning-bg-color: #DF2A8B;
$mention-user-pill-bg-color: #ff0064;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index de35e41086..3273989630 100644
--- a/src/components/structures/LoggedInView.js
+++ b/src/components/structures/LoggedInView.js
@@ -98,6 +98,7 @@ const LoggedInView = React.createClass({
this._setStateFromSessionStore();
this._matrixClient.on("accountData", this.onAccountData);
+ this._matrixClient.on("sync", this.onSync);
},
componentWillUnmount: function() {
@@ -142,6 +143,20 @@ const LoggedInView = React.createClass({
}
},
+ onSync: function(syncState, oldSyncState, data) {
+ if (syncState === oldSyncState) return;
+
+ if (syncState === 'ERROR') {
+ this.setState({
+ syncErrorData: data,
+ });
+ } else {
+ this.setState({
+ syncErrorData: null,
+ });
+ }
+ },
+
_onKeyDown: function(ev) {
/*
// Remove this for now as ctrl+alt = alt-gr so this breaks keyboards which rely on alt-gr for numbers
@@ -286,6 +301,7 @@ const LoggedInView = React.createClass({
const NewVersionBar = sdk.getComponent('globals.NewVersionBar');
const UpdateCheckBar = sdk.getComponent('globals.UpdateCheckBar');
const PasswordNagBar = sdk.getComponent('globals.PasswordNagBar');
+ const ServerLimitBar = sdk.getComponent('globals.ServerLimitBar');
let page_element;
let right_panel = '';
@@ -370,7 +386,9 @@ const LoggedInView = React.createClass({
let topBar;
const isGuest = this.props.matrixClient.isGuest();
- if (this.props.showCookieBar &&
+ if (this.state.syncErrorData && this.state.syncErrorData.error.errcode === 'M_MAU_LIMIT_EXCEEDED') {
+ topBar =