Fix creation mode alignment (#195)

packages/react-chat/src/components/Buttons/BackButton.tsx

@@ -21,7 +21,7 @@ const BackBtn = styled.button`
   left: 0;
   top: 8px;
   width: 32px;
-  height: 32px;
+  height: 44px;
   padding: 0;
 
   &.narrow {

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -134,7 +134,7 @@ export function ChatBody({ onClick, showMembers, permission }: ChatBodyProps) {
   return <ChatBodyLoading />;
 }
 
-const Wrapper = styled.div`
+export const Wrapper = styled.div`
   width: 61%;
   display: flex;
   flex-direction: column;

packages/react-chat/src/components/Chat/ChatCreation.tsx

@@ -15,6 +15,7 @@ import { Member } from "../Members/Member";
 import { SearchBlock } from "../SearchBlock";
 import { textMediumStyles } from "../Text";
 
+import { Wrapper } from "./ChatBody";
 import { ChatInput } from "./ChatInput";
 
 interface ChatCreationProps {
@@ -82,17 +83,19 @@ export function ChatCreation({
   );
 
   return (
+    <Wrapper>
       <CreationWrapper>
-      <CreationBar>
+        <CreationBar className={`${styledGroup.length === 5 && "limit"}`}>
           {narrow && (
             <BackButton
               onBtnClick={() => setChatState(ChatState.ChatBody)}
               className="narrow"
             />
           )}
-        <InputBar className={`${narrow && "narrow"}`}>
+          <Column className={`${narrow && "narrow"}`}>
+            <InputBar>
               <InputText>To:</InputText>
-          <StyledList className={`${narrow && "narrow"}`}>
+              <StyledList>
                 {styledGroup.map((member) => (
                   <StyledMember key={member}>
                     <StyledName>{member.slice(0, 10)}</StyledName>
@@ -115,10 +118,14 @@ export function ChatCreation({
                   />
                 </SearchMembers>
               )}
-          {styledGroup.length === 5 && (
+              {!narrow && styledGroup.length === 5 && (
                 <LimitAlert>5 user Limit reached</LimitAlert>
               )}
             </InputBar>
+            {narrow && styledGroup.length === 5 && (
+              <LimitAlert className="narrow">5 user Limit reached</LimitAlert>
+            )}
+          </Column>
           <CreationBtn
             disabled={styledGroup.length === 0}
             onClick={() => {
@@ -160,6 +167,7 @@ export function ChatCreation({
           <ChatInput createChat={createChat} group={styledGroup} />
         )}
       </CreationWrapper>
+    </Wrapper>
   );
 }
 
@@ -167,6 +175,7 @@ const CreationWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   background-color: ${({ theme }) => theme.bodyBackgroundColor};
   padding: 8px 16px;
 `;
@@ -175,24 +184,35 @@ const CreationBar = styled.div`
   display: flex;
   align-items: center;
   margin-bottom: 32px;
+
+  &.limit {
+    align-items: flex-start;
+  }
+`;
+
+const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  margin-right: 16px;
+  overflow-x: hidden;
+
+  &.narrow {
+  }
 `;
 
 const InputBar = styled.div`
   display: flex;
   align-items: center;
-  flex: 1;
   width: 100%;
+  height: 44px;
   background-color: ${({ theme }) => theme.inputColor};
   border: 1px solid ${({ theme }) => theme.inputColor};
   border-radius: 8px;
-  padding: 8px 16px;
-  margin-right: 16px;
+  padding: 6px 16px;
 
   ${textMediumStyles}
-
-  &.narrow {
-    overflow-x: hidden;
-  }
 `;
 
 const Input = styled.input`
@@ -227,14 +247,12 @@ const CreationBtn = styled.button`
 
 const StyledList = styled.div`
   display: flex;
-
-  &.narrow {
   overflow-x: scroll;
+  margin-right: 8px;
 
   &::-webkit-scrollbar {
     display: none;
   }
-  }
 `;
 
 const StyledMember = styled.div`
@@ -244,7 +262,10 @@ const StyledMember = styled.div`
   background: ${({ theme }) => theme.tertiary};
   color: ${({ theme }) => theme.bodyBackgroundColor};
   border-radius: 8px;
-  margin-right: 8px;
+
+  & + & {
+    margin-left: 8px;
+  }
 `;
 
 const StyledName = styled.p`
@@ -259,6 +280,7 @@ const CloseButton = styled.button`
 `;
 
 const Contacts = styled.div`
+  height: calc(100% - 44px);
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -285,4 +307,9 @@ const LimitAlert = styled.p`
   text-transform: uppercase;
   margin-left: auto;
   color: ${({ theme }) => theme.redColor};
+  white-space: nowrap;
+
+  &.narrow {
+    margin: 8px 0 0;
+  }
 `;

packages/react-chat/src/components/Chat/ChatInput.tsx

@@ -217,7 +217,7 @@ export function ChatInput({
   );
 
   return (
-    <View>
+    <View className={`${createChat && "creation"}`}>
       <SizeLimitModal />
       <EmojiWrapper ref={ref}>
         <EmojiPicker addEmoji={addEmoji} showEmoji={showEmoji} />
@@ -348,6 +348,10 @@ const View = styled.div`
   align-items: flex-end;
   padding: 6px 8px 6px 10px;
   position: relative;
+
+  &.creation {
+    padding: 0;
+  }
 `;
 
 const InputArea = styled.div`