fb8238ab0b
* new themes and theme type updates * update theme processing port newer functionality from webapp * update theme UI including new svg-based thumbnail * lint fixes * update snapshots and tests * update theme tile border approach * remove unused path component * remove old variable typo * remove old variable type from theme type * lint and snapshot updates * update snapshots
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import React from 'react';
|
|
|
|
import CompassIcon from '@components/compass_icon';
|
|
import {General} from '@mm-redux/constants';
|
|
import {changeOpacity} from '@utils/theme';
|
|
|
|
import type {Theme} from '@mm-redux/types/theme';
|
|
|
|
type UserStatusProps = {
|
|
size: number;
|
|
status: string;
|
|
theme: Theme;
|
|
};
|
|
|
|
const UserStatus = ({size, status, theme}: UserStatusProps) => {
|
|
let iconName;
|
|
let iconColor;
|
|
switch (status) {
|
|
case General.AWAY:
|
|
iconName = 'clock';
|
|
iconColor = theme.awayIndicator;
|
|
break;
|
|
case General.DND:
|
|
iconName = 'minus-circle';
|
|
iconColor = theme.dndIndicator;
|
|
break;
|
|
case General.ONLINE:
|
|
iconName = 'check-circle';
|
|
iconColor = theme.onlineIndicator;
|
|
break;
|
|
default:
|
|
iconName = 'circle-outline';
|
|
iconColor = changeOpacity('#B8B8B8', 0.64);
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<CompassIcon
|
|
name={iconName}
|
|
style={{fontSize: size, color: iconColor}}
|
|
testID={`user_status.icon.${status}`}
|
|
/>
|
|
);
|
|
};
|
|
|
|
UserStatus.defaultProps = {
|
|
size: 6,
|
|
status: General.OFFLINE,
|
|
};
|
|
|
|
export default UserStatus;
|