From 6b312df268ebf1e1fb147ffb2c56868396c1083d Mon Sep 17 00:00:00 2001
From: Saturnino Abril <saturnino.abril@gmail.com>
Date: Tue, 9 Oct 2018 20:46:49 +0800
Subject: [PATCH] add opacity of 0.3 to circle stroke of offline status (#2233)

---
 .../__snapshots__/user_status.test.js.snap    | 69 +++++++++++++++++++
 app/components/user_status/user_status.js     |  5 +-
 .../user_status/user_status.test.js           | 58 ++++++++++++++++
 3 files changed, 131 insertions(+), 1 deletion(-)
 create mode 100644 app/components/user_status/__snapshots__/user_status.test.js.snap
 create mode 100644 app/components/user_status/user_status.test.js

diff --git a/app/components/user_status/__snapshots__/user_status.test.js.snap b/app/components/user_status/__snapshots__/user_status.test.js.snap
new file mode 100644
index 000000000..0f3fdf55b
--- /dev/null
+++ b/app/components/user_status/__snapshots__/user_status.test.js.snap
@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserStatus should match snapshot, away status 1`] = `
+<Component
+  source={
+    Object {
+      "testUri": "../../../dist/assets/images/status/away.png",
+    }
+  }
+  style={
+    Object {
+      "height": 32,
+      "tintColor": "#ffbc42",
+      "width": 32,
+    }
+  }
+/>
+`;
+
+exports[`UserStatus should match snapshot, dnd status 1`] = `
+<Component
+  source={
+    Object {
+      "testUri": "../../../dist/assets/images/status/dnd.png",
+    }
+  }
+  style={
+    Object {
+      "height": 32,
+      "tintColor": "#f74343",
+      "width": 32,
+    }
+  }
+/>
+`;
+
+exports[`UserStatus should match snapshot, online status 1`] = `
+<Component
+  source={
+    Object {
+      "testUri": "../../../dist/assets/images/status/online.png",
+    }
+  }
+  style={
+    Object {
+      "height": 32,
+      "tintColor": "#06d6a0",
+      "width": 32,
+    }
+  }
+/>
+`;
+
+exports[`UserStatus should match snapshot, should default to offline status 1`] = `
+<Component
+  source={
+    Object {
+      "testUri": "../../../dist/assets/images/status/offline.png",
+    }
+  }
+  style={
+    Object {
+      "height": 32,
+      "tintColor": "rgba(61,60,64,0.3)",
+      "width": 32,
+    }
+  }
+/>
+`;
diff --git a/app/components/user_status/user_status.js b/app/components/user_status/user_status.js
index 8666d96a1..9e2f1511c 100644
--- a/app/components/user_status/user_status.js
+++ b/app/components/user_status/user_status.js
@@ -6,6 +6,9 @@ import {Image} from 'react-native';
 import PropTypes from 'prop-types';
 
 import {General} from 'mattermost-redux/constants';
+
+import {changeOpacity} from 'app/utils/theme';
+
 import away from 'assets/images/status/away.png';
 import dnd from 'assets/images/status/dnd.png';
 import offline from 'assets/images/status/offline.png';
@@ -47,7 +50,7 @@ export default class UserStatus extends PureComponent {
             iconColor = theme.onlineIndicator;
             break;
         default:
-            iconColor = theme.centerChannelColor;
+            iconColor = changeOpacity(theme.centerChannelColor, 0.3);
             break;
         }
 
diff --git a/app/components/user_status/user_status.test.js b/app/components/user_status/user_status.test.js
new file mode 100644
index 000000000..4e9c06fae
--- /dev/null
+++ b/app/components/user_status/user_status.test.js
@@ -0,0 +1,58 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import {General} from 'mattermost-redux/constants';
+import Preferences from 'mattermost-redux/constants/preferences';
+
+import UserStatus from './user_status';
+
+describe('UserStatus', () => {
+    const baseProps = {
+        size: 32,
+        theme: Preferences.THEMES.default,
+    };
+
+    test('should match snapshot, should default to offline status', () => {
+        const wrapper = shallow(
+            <UserStatus {...baseProps}/>
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot, away status', () => {
+        const wrapper = shallow(
+            <UserStatus
+                {...baseProps}
+                status={General.AWAY}
+            />
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot, dnd status', () => {
+        const wrapper = shallow(
+            <UserStatus
+                {...baseProps}
+                status={General.DND}
+            />
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot, online status', () => {
+        const wrapper = shallow(
+            <UserStatus
+                {...baseProps}
+                status={General.ONLINE}
+            />
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+});