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}

+ {errorMsg} ) : null}