From 9d17ed74074e3d94ca2b6d957941968b765b79fa Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Sat, 14 Oct 2017 14:33:55 -0600
Subject: [PATCH] CSS for presence member avatar

Signed-off-by: Travis Ralston <travpc@gmail.com>
---
 src/skins/vector/css/_components.scss         |  1 +
 .../views/avatars/_MemberPresenceAvatar.scss  | 43 +++++++++++++++++++
 src/skins/vector/css/themes/_base.scss        |  5 +++
 3 files changed, 49 insertions(+)
 create mode 100644 src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss

diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 4948ac8520..809c6384ca 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -15,6 +15,7 @@
 @import "./matrix-react-sdk/structures/_UserSettings.scss";
 @import "./matrix-react-sdk/structures/login/_Login.scss";
 @import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss";
+@import "./matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss";
 @import "./matrix-react-sdk/views/dialogs/_BugReportDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_ChatCreateOrReuseChatDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss";
diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss b/src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss
new file mode 100644
index 0000000000..a15f8eaa65
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/_MemberPresenceAvatar.scss
@@ -0,0 +1,43 @@
+/*
+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_MemberPresenceAvatar {
+    display: inline-block;
+    position: relative;
+}
+
+.mx_MemberPresenceAvatar_status {
+    display: block;
+    width: 10px;
+    height: 10px;
+    border-radius: 10px;
+
+    position: absolute;
+    bottom: -2px;
+    right: -3px;
+}
+
+.mx_MemberPresenceAvatar_status_online {
+    background-color: $presence-online;
+}
+
+.mx_MemberPresenceAvatar_status_unavailable {
+    background-color: $presence-unavailable;
+}
+
+.mx_MemberPresenceAvatar_status_offline {
+    background-color: $presence-offline;
+}
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index a13c517bd0..44c5440a5f 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -114,6 +114,11 @@ $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
 $e2e-unverified-color: #e8bf37;
 $e2e-warning-color: #ba6363;
 
+// presence
+$presence-online: #60de00;
+$presence-unavailable: #deb800;
+$presence-offline: #b7b7b7;
+
 /*** ImageView ***/
 $lightbox-bg-color: #454545;
 $lightbox-fg-color: #ffffff;