From 65ac483901374f2be65c77c789358f427f46eee0 Mon Sep 17 00:00:00 2001 From: HoonBaek Date: Mon, 2 Dec 2024 10:25:41 +0900 Subject: [PATCH 1/3] fixed broken UI on message input & channel settings operator menu --- .../channel-settings-ui.scss | 6 +- .../components/ModerationPanel/MemberList.tsx | 58 ++++++++++--------- src/ui/MessageInput/index.scss | 1 + 3 files changed, 34 insertions(+), 31 deletions(-) diff --git a/src/modules/ChannelSettings/components/ChannelSettingsUI/channel-settings-ui.scss b/src/modules/ChannelSettings/components/ChannelSettingsUI/channel-settings-ui.scss index 7ac870e82..665a1f117 100644 --- a/src/modules/ChannelSettings/components/ChannelSettingsUI/channel-settings-ui.scss +++ b/src/modules/ChannelSettings/components/ChannelSettingsUI/channel-settings-ui.scss @@ -57,9 +57,6 @@ padding: 12px 22px 10px 56px; @include themed() { border-top: 1px solid t(on-bg-4); - &:last-child { - border-bottom: 1px solid t(on-bg-4); - } } &:focus { outline: none; @@ -71,7 +68,8 @@ .sendbird-channel-settings__panel-item__leave-channel { @include themed() { - border-top: 0; + border-top: 1px solid t(on-bg-4); + border-bottom: 1px solid t(on-bg-4); } } diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx index e2e515ea5..52bc23c71 100644 --- a/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx +++ b/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx @@ -5,6 +5,7 @@ import React, { useCallback, useContext, ReactNode, + useMemo, } from 'react'; import type { Member, MemberListQueryParams } from '@sendbird/chat/groupChannel'; import { Role } from '@sendbird/chat'; @@ -34,6 +35,7 @@ export const MemberList = ({ const { state: { channel, forceUpdateUI } } = useChannelSettings(); const { stringSet } = useContext(LocalizationContext); + const isOperator = useMemo(() => (channel.myRole === Role.OPERATOR), [channel?.myRole]); const refreshList = useCallback(() => { if (!channel) { setMembers([]); @@ -60,35 +62,37 @@ export const MemberList = ({ channel, size: 'small', avatarSize: '24px', - renderListItemMenu: (props) => ( - { - const newMembers = [...members]; - for (const newMember of newMembers) { - if (newMember.userId === member.userId) { - newMember.role = isOperator ? Role.OPERATOR : Role.NONE; - break; + renderListItemMenu: isOperator + ? (props) => ( + { + const newMembers = [...members]; + for (const newMember of newMembers) { + if (newMember.userId === member.userId) { + newMember.role = isOperator ? Role.OPERATOR : Role.NONE; + break; + } } - } - setMembers(newMembers); - }} - onToggleMuteState={({ newStatus: isMuted }) => { - const newMembers = [...members]; - for (const newMember of newMembers) { - if (newMember.userId === member.userId) { - newMember.isMuted = isMuted; - break; + setMembers(newMembers); + }} + onToggleMuteState={({ newStatus: isMuted }) => { + const newMembers = [...members]; + for (const newMember of newMembers) { + if (newMember.userId === member.userId) { + newMember.isMuted = isMuted; + break; + } } - } - setMembers(newMembers); - }} - onToggleBanState={() => { - setMembers(members.filter(({ userId }) => { - return userId !== member.userId; - })); - }} - /> - ), + setMembers(newMembers); + }} + onToggleBanState={() => { + setMembers(members.filter(({ userId }) => { + return userId !== member.userId; + })); + }} + /> + ) + : () => <>, }) } diff --git a/src/ui/MessageInput/index.scss b/src/ui/MessageInput/index.scss index d8a13ba6b..2ce4ff5cb 100644 --- a/src/ui/MessageInput/index.scss +++ b/src/ui/MessageInput/index.scss @@ -15,6 +15,7 @@ font-style: normal; line-height: 1.43; max-height: 92px; + min-height: 58px; overflow-y: scroll; letter-spacing: normal; padding: 18px 64px 18px 16px; From 6af1b7fea0065010cb0a3c64bfe4da00a5d69bf2 Mon Sep 17 00:00:00 2001 From: Baek EunSeo Date: Mon, 2 Dec 2024 11:34:34 +0900 Subject: [PATCH 2/3] Do not use useMemo --- .../ChannelSettings/components/ModerationPanel/MemberList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx index 52bc23c71..a8cc9709b 100644 --- a/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx +++ b/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx @@ -35,7 +35,7 @@ export const MemberList = ({ const { state: { channel, forceUpdateUI } } = useChannelSettings(); const { stringSet } = useContext(LocalizationContext); - const isOperator = useMemo(() => (channel.myRole === Role.OPERATOR), [channel?.myRole]); + const isOperator = channel.myRole === Role.OPERATOR; const refreshList = useCallback(() => { if (!channel) { setMembers([]); From 48a2583ed9e7d61f6457d943bd6c8a3dc07e2184 Mon Sep 17 00:00:00 2001 From: Baek EunSeo Date: Mon, 2 Dec 2024 11:41:20 +0900 Subject: [PATCH 3/3] Update MemberList.tsx --- .../ChannelSettings/components/ModerationPanel/MemberList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx index a8cc9709b..baf86ba2f 100644 --- a/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx +++ b/src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx @@ -5,7 +5,6 @@ import React, { useCallback, useContext, ReactNode, - useMemo, } from 'react'; import type { Member, MemberListQueryParams } from '@sendbird/chat/groupChannel'; import { Role } from '@sendbird/chat';