diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 18c360cb8b..eaeb7bb91a 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -372,7 +372,7 @@ export default class Sidebar extends React.Component {
if (channel.status === 'online') {
statusIcon = Constants.ONLINE_ICON_SVG;
} else if (channel.status === 'away') {
- statusIcon = Constants.ONLINE_ICON_SVG;
+ statusIcon = Constants.AWAY_ICON_SVG;
} else {
statusIcon = Constants.OFFLINE_ICON_SVG;
}
diff --git a/web/react/components/user_settings/import_theme_modal.jsx b/web/react/components/user_settings/import_theme_modal.jsx
index 3df9dfedfb..45b05f19b7 100644
--- a/web/react/components/user_settings/import_theme_modal.jsx
+++ b/web/react/components/user_settings/import_theme_modal.jsx
@@ -55,6 +55,7 @@ export default class ImportThemeModal extends React.Component {
theme.sidebarHeaderBg = colors[1];
theme.sidebarHeaderTextColor = colors[5];
theme.onlineIndicator = colors[6];
+ theme.awayIndicator = '#E0B333';
theme.mentionBj = colors[7];
theme.mentionColor = '#ffffff';
theme.centerChannelBg = '#ffffff';
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 0298ce5332..d6ccb9eddb 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -163,8 +163,9 @@ export default {
OPEN_TEAM: 'O',
MAX_POST_LEN: 4000,
EMOJI_SIZE: 16,
- ONLINE_ICON_SVG: "",
- OFFLINE_ICON_SVG: "",
+ ONLINE_ICON_SVG: "",
+ AWAY_ICON_SVG: "",
+ OFFLINE_ICON_SVG: "",
MENU_ICON: "",
COMMENT_ICON: "",
UPDATE_TYPING_MS: 5000,
@@ -180,6 +181,7 @@ export default {
sidebarHeaderBg: '#2f81b7',
sidebarHeaderTextColor: '#FFFFFF',
onlineIndicator: '#7DBE00',
+ awayIndicator: '#DCBD4E',
mentionBj: '#136197',
mentionColor: '#bfcde8',
centerChannelBg: '#f2f4f8',
@@ -203,6 +205,7 @@ export default {
sidebarHeaderBg: '#2389d7',
sidebarHeaderTextColor: '#ffffff',
onlineIndicator: '#7DBE00',
+ awayIndicator: '#DCBD4E',
mentionBj: '#2389d7',
mentionColor: '#ffffff',
centerChannelBg: '#ffffff',
@@ -226,6 +229,7 @@ export default {
sidebarHeaderBg: '#1B2C3E',
sidebarHeaderTextColor: '#FFFFFF',
onlineIndicator: '#55C5B2',
+ awayIndicator: '#A9A14C',
mentionBj: '#B74A4A',
mentionColor: '#FFFFFF',
centerChannelBg: '#2F3E4E',
@@ -249,6 +253,7 @@ export default {
sidebarHeaderBg: '#1f1f1f',
sidebarHeaderTextColor: '#FFFFFF',
onlineIndicator: '#0177e7',
+ awayIndicator: '#A9A14C',
mentionBj: '#0177e7',
mentionColor: '#FFFFFF',
centerChannelBg: '#1F1F1F',
@@ -299,6 +304,10 @@ export default {
id: 'onlineIndicator',
uiName: 'Online Indicator'
},
+ {
+ id: 'awayIndicator',
+ uiName: 'Away Indicator'
+ },
{
id: 'mentionBj',
uiName: 'Mention Jewel BG'
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 95eca7c3a1..c0da0e2c67 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -557,7 +557,7 @@ export function applyTheme(theme) {
changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1);
changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1);
changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1);
- changeCss('.sidebar--left .status path', 'fill:' + theme.sidebarText, 1);
+ changeCss('.sidebar--left .status .offline--icon, .sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText, 1);
changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 2);
}
@@ -602,6 +602,10 @@ export function applyTheme(theme) {
changeCss('.sidebar--left .status .online--icon', 'fill:' + theme.onlineIndicator, 1);
}
+ if (theme.awayIndicator) {
+ changeCss('.sidebar--left .status .away--icon', 'fill:' + theme.awayIndicator, 1);
+ }
+
if (theme.mentionBj) {
changeCss('.sidebar--left .nav-pills__unread-indicator', 'background:' + theme.mentionBj, 1);
changeCss('.sidebar--left .badge', 'background:' + theme.mentionBj, 1);
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
index e99e212573..6f969ed47f 100644
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -42,9 +42,9 @@
margin-right: 6px;
width: 12px;
display: inline-block;
- i, path {
+ i, path, ellipse {
@include opacity(0.5);
- &.online--icon {
+ &.online--icon, &.away--icon {
@include opacity(1);
}
}