fix: Broken UI - message input & settings menu (#1264)

[CLNP-5910](https://sendbird.atlassian.net/browse/CLNP-5910)
[CLNP-5909](https://sendbird.atlassian.net/browse/CLNP-5909)

* fixed broken UI on message input & channel settings operator menu

[CLNP-5910]:
https://sendbird.atlassian.net/browse/CLNP-5910?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
[CLNP-5909]:
https://sendbird.atlassian.net/browse/CLNP-5909?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Irene Ryu <[email protected]>

Author: HoonBaek

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);
     }
   }
 

src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx

@@ -34,6 +34,7 @@ export const MemberList = ({
   const { state: { channel, forceUpdateUI } } = useChannelSettings();
   const { stringSet } = useContext(LocalizationContext);
 
+  const isOperator = channel.myRole === Role.OPERATOR;
   const refreshList = useCallback(() => {
     if (!channel) {
       setMembers([]);
@@ -60,35 +61,37 @@ export const MemberList = ({
                 channel,
                 size: 'small',
                 avatarSize: '24px',
-                renderListItemMenu: (props) => (
-                  <UserListItemMenu {...props}
-                    onToggleOperatorState={({ newStatus: isOperator }) => {
-                      const newMembers = [...members];
-                      for (const newMember of newMembers) {
-                        if (newMember.userId === member.userId) {
-                          newMember.role = isOperator ? Role.OPERATOR : Role.NONE;
-                          break;
+                renderListItemMenu: isOperator
+                  ? (props) => (
+                    <UserListItemMenu {...props}
+                      onToggleOperatorState={({ newStatus: isOperator }) => {
+                        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;
+                        }));
+                      }}
+                    />
+                  )
+                  : () => <></>,
               })
             }
           </React.Fragment>

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;