diff --git a/web/modals/threads/members/change-member-role-modal.css b/web/modals/threads/members/change-member-role-modal.css
index 78daa271b..47802ef7a 100644
--- a/web/modals/threads/members/change-member-role-modal.css
+++ b/web/modals/threads/members/change-member-role-modal.css
@@ -1,50 +1,74 @@
.roleModalDescription {
color: var(--change-member-role-modal-description-text);
padding: 16px 32px 0 32px;
font-size: medium;
line-height: 1.5;
}
.roleModalMember {
display: flex;
align-items: center;
justify-content: center;
margin-top: 24px;
}
.roleModalMemberAvatar {
margin-right: 4px;
}
.roleModalMemberName {
margin-left: 4px;
font-size: large;
color: var(--change-member-role-modal-generic-text);
}
.roleModalRoleSelector {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 20px 20px 0 20px;
}
.roleModalActionButtons {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-self: center;
align-items: stretch;
margin: 16px 200px 16px 0;
}
.roleModalSaveButton {
margin-left: 8px;
padding: 14px 32px;
}
.roleModalBackButton {
padding: 14px 32px;
}
+
+.roleModalDisabled {
+ color: var(--change-member-role-modal-description-text);
+ background-color: var(--change-member-role-modal-disabled-background);
+ padding: 8px;
+ width: 73%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ margin: 0 auto;
+ border-radius: 10px;
+ margin-bottom: 20px;
+}
+
+.infoIcon {
+ margin-right: 4px;
+ margin-bottom: 12px;
+}
+
+.infoText {
+ font-size: var(--s-font-14);
+ padding: 4px;
+}
diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js
index 74bb0079f..637b2b936 100644
--- a/web/modals/threads/members/change-member-role-modal.react.js
+++ b/web/modals/threads/members/change-member-role-modal.react.js
@@ -1,128 +1,163 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
import {
changeThreadMemberRoles,
changeThreadMemberRolesActionTypes,
} from 'lib/actions/thread-actions.js';
import { useModalContext } from 'lib/components/modal-provider.react.js';
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import { otherUsersButNoOtherAdmins } from 'lib/selectors/thread-selectors.js';
+import { roleIsAdminRole } from 'lib/shared/thread-utils.js';
import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types';
import {
useDispatchActionPromise,
useServerCall,
} from 'lib/utils/action-utils.js';
import { values } from 'lib/utils/objects.js';
import css from './change-member-role-modal.css';
import UserAvatar from '../../../avatars/user-avatar.react.js';
import Button, { buttonThemes } from '../../../components/button.react.js';
import Dropdown from '../../../components/dropdown.react.js';
+import { useSelector } from '../../../redux/redux-utils.js';
import Modal from '../../modal.react.js';
import UnsavedChangesModal from '../../unsaved-changes-modal.react.js';
type ChangeMemberRoleModalProps = {
+memberInfo: RelativeMemberInfo,
+threadInfo: ThreadInfo,
};
function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node {
const { memberInfo, threadInfo } = props;
const { pushModal, popModal } = useModalContext();
const dispatchActionPromise = useDispatchActionPromise();
const callChangeThreadMemberRoles = useServerCall(changeThreadMemberRoles);
+ const otherUsersButNoOtherAdminsValue = useSelector(
+ otherUsersButNoOtherAdmins(threadInfo.id),
+ );
const roleOptions = React.useMemo(
() =>
values(threadInfo.roles).map(role => ({
id: role.id,
name: role.name,
})),
[threadInfo.roles],
);
const initialSelectedRole = memberInfo.role;
invariant(initialSelectedRole, "Member's role must be defined");
const [selectedRole, setSelectedRole] = React.useState(initialSelectedRole);
const onBackClick = React.useCallback(() => {
if (selectedRole === initialSelectedRole) {
popModal();
return;
}
pushModal();
}, [initialSelectedRole, popModal, pushModal, selectedRole]);
+ const disabledRoleChangeMessage = React.useMemo(() => {
+ const memberIsAdmin = roleIsAdminRole(
+ threadInfo.roles[initialSelectedRole],
+ );
+
+ if (!otherUsersButNoOtherAdminsValue || !memberIsAdmin) {
+ return null;
+ }
+
+ return (
+ <>
+
+
+
+ There must be at least one admin at any given time in a community.
+
+
+ >
+ );
+ }, [initialSelectedRole, otherUsersButNoOtherAdminsValue, threadInfo.roles]);
+
const onSave = React.useCallback(() => {
if (selectedRole === initialSelectedRole) {
popModal();
return;
}
const createChangeThreadMemberRolesPromise = () => {
return callChangeThreadMemberRoles(
threadInfo.id,
[memberInfo.id],
selectedRole,
);
};
dispatchActionPromise(
changeThreadMemberRolesActionTypes,
createChangeThreadMemberRolesPromise(),
);
popModal();
}, [
callChangeThreadMemberRoles,
dispatchActionPromise,
initialSelectedRole,
memberInfo.id,
popModal,
selectedRole,
threadInfo.id,
]);
return (
Members can only be assigned to one role at a time. Changing a
member’s role will replace their previously assigned role.
+ {disabledRoleChangeMessage}
);
}
export default ChangeMemberRoleModal;
diff --git a/web/theme.css b/web/theme.css
index c4044b640..22531245c 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,239 +1,240 @@
:root {
/* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
The reason we never use color values defined here directly in CSS is
1. It makes changing themes from light / dark / user generated impossible.
2. Gives the programmer context into the color being used.
3. If our color system changes it's much easier to change color values in one place.
Add a color value to the theme below, and then use it in your CSS.
naming convention:
- bg: background.
- fg: foreground.
- color: text-color
*/
--shades-white-100: #ffffff;
--shades-white-90: #f5f5f5;
--shades-white-80: #ebebeb;
--shades-white-70: #e0e0e0;
--shades-white-60: #cccccc;
--shades-black-100: #0a0a0a;
--shades-black-90: #1f1f1f;
--shades-black-80: #404040;
--shades-black-70: #666666;
--shades-black-60: #808080;
--violet-dark-100: #7e57c2;
--violet-dark-80: #6d49ab;
--violet-dark-60: #563894;
--violet-dark-40: #44297a;
--violet-dark-20: #331f5c;
--violet-light-100: #ae94db;
--violet-light-80: #b9a4df;
--violet-light-60: #d3c6ec;
--violet-light-40: #e8e0f5;
--violet-light-20: #f3f0fa;
--success-light-10: #d5f6e3;
--success-light-50: #6cdf9c;
--success-primary: #00c853;
--success-dark-50: #029841;
--success-dark-90: #034920;
--error-light-10: #feebe6;
--error-light-50: #f9947b;
--error-primary: #f53100;
--error-dark-50: #b62602;
--error-dark-90: #4f1203;
--logo-bg: #111827;
--spoiler-color: #33332c;
--loading-foreground: #1b0e38;
--bg: var(--shades-black-100);
--fg: var(--shades-white-100);
--color-disabled: var(--shades-black-60);
--text-input-bg: var(--shades-black-80);
--text-input-color: var(--shades-white-60);
--text-input-placeholder: var(--shades-white-60);
--border: var(--shades-black-80);
--error: var(--error-primary);
--success: var(--success-dark-50);
/* Color Theme */
--btn-bg-filled: var(--violet-dark-100);
--btn-bg-outline: var(--shades-black-90);
--btn-bg-success: var(--success-dark-50);
--btn-bg-danger: var(--error-primary);
--btn-bg-disabled: var(--shades-black-80);
--btn-disabled-color: var(--shades-black-60);
--chat-bg: var(--violet-dark-80);
--chat-confirmation-icon: var(--violet-dark-100);
--keyserver-selection: var(--violet-dark-60);
--thread-selection: var(--violet-light-80);
--thread-hover-bg: var(--shades-black-80);
--thread-active-bg: var(--shades-black-80);
--chat-timestamp-color: var(--shades-black-60);
--tool-tip-bg: var(--shades-black-80);
--tool-tip-color: var(--shades-white-60);
--border-color: var(--shades-black-80);
--calendar-chevron: var(--shades-black-60);
--calendar-day-bg: var(--shades-black-60);
--calendar-day-selected-color: var(--violet-dark-80);
--community-bg: var(--shades-black-90);
--community-settings-selected: var(--violet-dark-60);
--unread-bg: var(--error-primary);
--settings-btn-bg: var(--violet-dark-100);
--community-creation-btn-bg: var(--shades-black-80);
--community-creation-ancestry-bg: var(--shades-black-80);
--community-creation-ancestry-text: var(--shades-black-60);
--community-creation-form-notice: var(--shades-white-60);
--community-creation-keyserver-container: var(--shades-black-100);
--modal-bg: var(--shades-black-90);
--modal-fg: var(--shades-white-60);
--join-bg: var(--shades-black-90);
--help-color: var(--shades-black-60);
--breadcrumb-color: var(--shades-white-60);
--breadcrumb-color-unread: var(--shades-white-60);
--btn-outline-border: var(--shades-black-60);
--thread-color-read: var(--shades-black-60);
--thread-preview-secondary: var(--shades-black-70);
--relationship-button-green: var(--success-dark-50);
--relationship-button-red: var(--error-primary);
--relationship-button-text: var(--fg);
--disconnected-bar-alert-bg: var(--error-dark-50);
--disconnected-bar-alert-color: var(--shades-white-100);
--disconnected-bar-connecting-bg: var(--shades-white-70);
--disconnected-bar-connecting-color: var(--shades-black-100);
--permission-color: var(--shades-white-60);
--thread-top-bar-color: var(--shades-white-100);
--thread-top-bar-menu-color: var(--shades-white-70);
--thread-ancestor-keyserver-border: var(--shades-black-70);
--thread-ancestor-color: var(--shades-white-100);
--thread-ancestor-separator-color: var(--shades-white-60);
--text-message-default-background: var(--shades-black-80);
--message-action-tooltip-bg: var(--shades-black-90);
--message-action-tooltip-bg-light: var(--shades-black-80);
--menu-bg: var(--shades-black-90);
--menu-bg-light: var(--shades-black-80);
--menu-separator-color: var(--shades-black-80);
--menu-color: var(--shades-black-60);
--menu-color-light: var(--shades-white-60);
--menu-color-hover: var(--shades-white-100);
--menu-color-dangerous: var(--error-primary);
--menu-color-dangerous-hover: var(--error-light-50);
--app-list-icon-read-only-color: var(--shades-black-60);
--app-list-icon-enabled-color: var(--success-primary);
--app-list-icon-disabled-color: var(--shades-white-80);
--account-settings-label: var(--shades-black-60);
--account-button-color: var(--violet-dark-100);
--chat-thread-list-color-active: var(--shades-white-60);
--chat-thread-list-menu-color: var(--shades-white-60);
--chat-thread-list-menu-bg: var(--shades-black-80);
--chat-thread-list-menu-active-color: var(--shades-white-60);
--chat-thread-list-menu-active-bg: var(--shades-black-90);
--search-clear-color: var(--shades-white-100);
--search-clear-bg: var(--shades-black-70);
--search-input-color: var(--shades-white-100);
--search-input-placeholder: var(--shades-black-60);
--search-icon-color: var(--shades-black-60);
--tabs-header-active-color: var(--shades-white-100);
--tabs-header-active-border: var(--violet-light-100);
--tabs-header-active-background: var(--violet-dark-100);
--tabs-header-background-color: var(--shades-black-60);
--tabs-header-background-color-pill: var(--shades-white-60);
--tabs-header-background-border: var(--shades-black-80);
--tabs-header-background-color-hover: var(--shades-white-80);
--tabs-header-background-border-hover: var(--shades-black-70);
--members-modal-member-text: var(--shades-black-60);
--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);
--relationship-modal-color: var(--shades-black-60);
--arrow-extension-color: var(--shades-black-60);
--modal-close-color: var(--shades-black-60);
--modal-close-color-hover: var(--shades-white-100);
--add-members-group-header-color: var(--shades-black-60);
--add-members-item-color: var(--shades-black-60);
--add-members-item-color-hover: var(--shades-white-100);
--add-members-item-disabled-color: var(--shades-black-80);
--add-members-item-disabled-color-hover: var(--shades-black-60);
--add-members-remove-pending-color: var(--error-primary);
--add-members-remove-pending-color-hover: var(--error-light-50);
--radio-border: var(--shades-black-70);
--radio-color: var(--shades-white-60);
--notification-settings-option-selected-bg: var(--shades-black-80);
--notification-settings-option-title-color: var(--shades-white-90);
--notification-settings-option-color: var(--shades-white-60);
--notification-settings-option-invalid-color: var(--shades-black-80);
--notification-settings-option-invalid-selected-color: var(--shades-black-60);
--danger-zone-subheading-color: var(--shades-white-60);
--danger-zone-explanation-color: var(--shades-black-60);
--thread-creation-search-container-bg: var(--shades-black-90);
--thread-creation-close-search-color: var(--shades-black-60);
--thread-creation-search-item-bg-hover: var(--shades-black-80);
--thread-creation-search-item-info-color: var(--shades-black-60);
--chat-message-list-active-border: #5989d6;
--sidebars-modal-color: var(--shades-black-60);
--sidebars-modal-color-hover: var(--shades-white-100);
--inline-engagement-bg: var(--shades-black-70);
--inline-engagement-bg-hover: var(--shades-black-80);
--inline-engagement-color: var(--fg);
--compose-subchannel-header-fg: var(--shades-black-60);
--compose-subchannel-header-bg: var(--shades-black-80);
--compose-subchannel-label-color: var(--shades-black-60);
--compose-subchannel-mark-color: var(--violet-light-100);
--enum-option-icon-color: var(--violet-dark-100);
--show-password-bg-hover: var(--shades-black-70);
--typeahead-overlay-light: var(--shades-black-80);
--typeahead-overlay-dark: var(--shades-black-90);
--typeahead-overlay-text: var(--shades-white-100);
--typeahead-overlay-shadow-primary: rgba(0, 0, 0, 0.25);
--typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4);
--spoiler-text-color: var(--spoiler-color);
--spoiler-background-color: var(--spoiler-color);
--purple-link: var(--violet-light-100);
--drawer-expand-button: var(--shades-black-60);
--drawer-expand-button-disabled: var(--shades-black-80);
--drawer-item-color: var(--shades-white-60);
--drawer-active-item-color: var(--shades-white-100);
--drawer-open-community-bg: #191919;
--active-drawer-item-bg: rgba(0, 0, 0, 0.5);
--community-drawer-lines: rgba(255, 255, 255, 0.08);
--topbar-button-bg: var(--shades-black-90);
--filters-button-bg: var(--shades-black-100);
--filters-button-border: var(--shades-black-80);
--filters-button-hover-bg: var(--shades-black-90);
--filter-panel-fg: var(--shades-black-60);
--filter-panel-bg: #0d0d0d;
--topbar-button-bg-hover: var(--shades-black-80);
--topbar-button-fg: var(--shades-white-60);
--message-label-color: var(--shades-black-60);
--topbar-lines: rgba(255, 255, 255, 0.08);
--pin-message-information-text-color: var(--shades-white-60);
--pin-message-modal-border-color: var(--shades-black-80);
--pinned-count-banner-color: var(--shades-black-90);
--pinned-count-text-color: var(--shades-white-90);
--modal-overlay-background-90: rgba(0, 0, 0, 0.9);
--modal-overlay-background-80: rgba(0, 0, 0, 0.8);
--edit-avatar-button: var(--violet-dark-60);
--dropdown-text: var(--shades-white-100);
--dropdown-select-bg: var(--shades-black-90);
--dropdown-select-border: var(--shades-white-60);
--dropdown-option-bg: var(--shades-black-80);
--dropdown-option-hover-bg: var(--shades-black-70);
--dropdown-selected-option-check-color: var(--violet-dark-100);
--dropdown-disabled-color: var(--shades-black-60);
--change-member-role-modal-description-text: var(--shades-white-60);
--change-member-role-modal-generic-text: var(--shades-white-100);
+ --change-member-role-modal-disabled-background: var(--shades-black-80);
--unsaved-changes-modal-text-color: var(--shades-white-60);
}