diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss
index 8446da1a3..78bf60a05 100644
--- a/stylesheets/_modal.scss
+++ b/stylesheets/_modal.scss
@@ -78,28 +78,6 @@
}
}
-.add-moderators-dialog,
-.remove-moderators-dialog,
-.edit-profile-dialog {
- .error-message {
- text-align: center;
- color: var(--danger-color);
- display: block;
- user-select: none;
- }
-
- .error-faded {
- opacity: 0;
- margin-top: -5px;
- transition: all 100ms linear;
- }
-
- .error-shown {
- opacity: 1;
- transition: all 250ms linear;
- }
-}
-
.loki-dialog {
display: flex;
align-items: center;
diff --git a/ts/components/dialog/UpdateGroupNameDialog.tsx b/ts/components/dialog/UpdateGroupNameDialog.tsx
index 83cf07c1e..7a45b93cd 100644
--- a/ts/components/dialog/UpdateGroupNameDialog.tsx
+++ b/ts/components/dialog/UpdateGroupNameDialog.tsx
@@ -1,9 +1,9 @@
/* eslint-disable @typescript-eslint/no-misused-promises */
-import classNames from 'classnames';
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import useKey from 'react-use/lib/useKey';
+import styled from 'styled-components';
import { useIsClosedGroup, useIsPublic } from '../../hooks/useParamSelector';
import { ConvoHub } from '../../session/conversations';
import { ClosedGroup } from '../../session/group/closed-group';
@@ -50,6 +50,13 @@ function GroupAvatar({
);
}
+const StyledError = styled.p`
+ text-align: center;
+ color: var(--danger-color);
+ display: block;
+ user-select: none;
+`;
+
export function UpdateGroupNameDialog(props: { conversationId: string }) {
const dispatch = useDispatch();
const { conversationId } = props;
@@ -112,7 +119,7 @@ export function UpdateGroupNameDialog(props: { conversationId: string }) {
});
dispatch(updateNameAction as any);
- return; // keeping the dialog open until the async thunk is done
+ return; // keeping the dialog open until the async thunk is done (via isNameChangePending)
}
void ClosedGroup.initiateClosedGroupUpdate(conversationId, trimmedGroupName, null);
@@ -135,8 +142,6 @@ export function UpdateGroupNameDialog(props: { conversationId: string }) {
originalGroupName || window.i18n('unknown'),
]);
- const errorMessageClasses = classNames('error-message', errorMsg ? 'error-shown' : 'error-faded');
-
const isAdmin = !isCommunity;
// return null;
@@ -149,7 +154,7 @@ export function UpdateGroupNameDialog(props: { conversationId: string }) {
{errorMsg ? (
<>
{errorMsg}
+