Page MenuHomePhorge
Files F32220908

D8067.1765195397.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D8067.1765195397.diff
View Options

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 (
- <div style={labelStyle} className={css.label}>
+ <div style={labelStyle} className={labelClassNames}>
{children}
{closeButton}
</div>
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
@@ -42,6 +42,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 +135,20 @@
[],
);
+ const roleName = role && roles[role].name;
+
const label = React.useMemo(() => {
- if (memberIsAdmin(memberInfo, threadInfo)) {
- return <Label>Admin</Label>;
- } else if (memberHasAdminPowers(memberInfo)) {
- return <Label>Parent admin</Label>;
+ // The parent admin is not associated to a role ID, so check for it first.
+ if (memberHasAdminPowers(memberInfo)) {
+ return <Label variant="grey">Admins</Label>;
+ }
+
+ if (roleName) {
+ return <Label variant="grey">{roleName}</Label>;
}
+
return null;
- }, [memberInfo, threadInfo]);
+ }, [memberInfo, 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);

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 8, 12:03 PM (11 h, 36 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5848158
Default Alt Text
D8067.1765195397.diff (3 KB)

Event Timeline