2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
009dc94c 1 parent 0f3fe067

update ChatPresenter

Inline Side-by-side
Showing 1 changed file with 26 additions and 14 deletions
......@@ -107,28 +107,38 @@ const ChatScreenBox = styled.div`
}
`;
const InputWrapper = styled.div`
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
`;
const InputContainer = styled.div`
position: fixed;
bottom: 0;
justify-content: center;
align-items: center;
width: 70%;
margin: 10px;
width: 50%;
margin-bottom: 20px;
display: flex;
flex-direction: row;
background-color: #b2bec3;
border: none;
form {
width: 100%;
button {
background-color: #27ae60;
width: 10%;
width: 20%;
color: white;
border-radius: 10px;
}
input {
background-color: #b2bec3;
width: 70%;
}
}
border: 1px solid rgba(0, 0, 0, 0.7);
border-radius: 10px;
`;
......@@ -188,16 +198,18 @@ export default ({
avatar={e.sender.avatarUrl}
/>
))}
<InputContainer className="InputContainer">
<form onSubmit={onSubmit}>
<Input
placeholder={"Enter any words"}
type="text"
{...message}
/>
<Button text={"Submit"} />
</form>
</InputContainer>
<InputWrapper>
<InputContainer className="InputContainer">
<form onSubmit={onSubmit}>
<Input
placeholder={"Enter any words"}
type="text"
{...message}
/>
<Button text={"Submit"} />
</form>
</InputContainer>
</InputWrapper>
</ChatScreenBox>
</ChatScreenContainer>
</ChatWrapper>
......