diff --git a/web/components/label.css b/web/components/label.css --- a/web/components/label.css +++ b/web/components/label.css @@ -10,3 +10,13 @@ margin-left: 4px; color: inherit; } + +.default { + color: var(--label-default-color); + background-color: var(--label-default-bg); +} + +.grey { + color: var(--label-grey-color); + background-color: var(--label-grey-bg); +} diff --git a/web/components/label.react.js b/web/components/label.react.js --- a/web/components/label.react.js +++ b/web/components/label.react.js @@ -1,5 +1,6 @@ // @flow +import classNames from 'classnames'; import * as React from 'react'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; @@ -7,32 +8,31 @@ import Button from './button.react.js'; import css from './label.css'; +type LabelVariant = 'default' | 'grey'; + type Props = { +size?: string | number, - +color?: string, - +bg?: string, + +variant?: LabelVariant, +children: React.Node, +onClose?: () => mixed, }; function Label(props: Props): React.Node { - const { - size = '12px', - color = 'var(--label-default-color)', - bg = 'var(--label-default-bg)', - children, - onClose, - } = props; + const { size = '12px', variant = 'default', children, onClose } = props; const labelStyle = React.useMemo( () => ({ fontSize: size, - color: color, - background: bg, }), - [bg, color, size], + [size], ); + const labelClassNames = classNames({ + [css.label]: true, + [css.default]: variant === 'default', + [css.grey]: variant === 'grey', + }); + const closeButton = React.useMemo(() => { if (!onClose) { return null; @@ -45,7 +45,7 @@ }, [onClose, size]); return ( -
+
{children} {closeButton}
diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js --- a/web/modals/threads/members/member.react.js +++ b/web/modals/threads/members/member.react.js @@ -10,7 +10,6 @@ import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import { memberIsAdmin, - memberHasAdminPowers, removeMemberFromThread, switchMemberAdminRoleInThread, getAvailableThreadMemberActions, @@ -42,6 +41,8 @@ function ThreadMember(props: Props): React.Node { const { memberInfo, threadInfo, setOpenMenu, isMenuOpen } = props; const userName = stringForUser(memberInfo); + const { roles } = threadInfo; + const { role } = memberInfo; const onMenuChange = React.useCallback( menuOpen => { @@ -133,14 +134,12 @@ [], ); - const label = React.useMemo(() => { - if (memberIsAdmin(memberInfo, threadInfo)) { - return ; - } else if (memberHasAdminPowers(memberInfo)) { - return ; - } - return null; - }, [memberInfo, threadInfo]); + const roleName = role && roles[role].name; + + const label = React.useMemo( + () => , + [roleName], + ); const memberContainerClasses = classNames(css.memberContainer, { [css.memberContainerWithMenuOpen]: isMenuOpen, diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -153,6 +153,8 @@ --members-modal-member-text-hover: var(--shades-white-100); --label-default-bg: var(--violet-dark-80); --label-default-color: var(--shades-white-80); + --label-grey-bg: var(--shades-black-80); + --label-grey-color: var(--shades-white-80); --subchannels-modal-color: var(--shades-black-60); --subchannels-modal-color-hover: var(--shades-white-100); --color-selector-active-bg: var(--shades-black-80);