sdy

update ChatPresenter

...@@ -107,28 +107,38 @@ const ChatScreenBox = styled.div` ...@@ -107,28 +107,38 @@ const ChatScreenBox = styled.div`
107 } 107 }
108 `; 108 `;
109 109
110 +const InputWrapper = styled.div`
111 + width: 100%;
112 + display: flex;
113 + flex-direction: row;
114 + justify-content: center;
115 + align-items: center;
116 +`;
117 +
110 const InputContainer = styled.div` 118 const InputContainer = styled.div`
111 position: fixed; 119 position: fixed;
112 bottom: 0; 120 bottom: 0;
113 justify-content: center; 121 justify-content: center;
114 align-items: center; 122 align-items: center;
115 - width: 70%; 123 + width: 50%;
116 - margin: 10px; 124 + margin-bottom: 20px;
117 display: flex; 125 display: flex;
118 flex-direction: row; 126 flex-direction: row;
127 + background-color: #b2bec3;
128 + border: none;
119 form { 129 form {
120 width: 100%; 130 width: 100%;
121 button { 131 button {
122 background-color: #27ae60; 132 background-color: #27ae60;
123 - width: 10%; 133 + width: 20%;
124 color: white; 134 color: white;
125 border-radius: 10px; 135 border-radius: 10px;
126 } 136 }
127 input { 137 input {
138 + background-color: #b2bec3;
128 width: 70%; 139 width: 70%;
129 } 140 }
130 } 141 }
131 - border: 1px solid rgba(0, 0, 0, 0.7);
132 border-radius: 10px; 142 border-radius: 10px;
133 `; 143 `;
134 144
...@@ -188,16 +198,18 @@ export default ({ ...@@ -188,16 +198,18 @@ export default ({
188 avatar={e.sender.avatarUrl} 198 avatar={e.sender.avatarUrl}
189 /> 199 />
190 ))} 200 ))}
191 - <InputContainer className="InputContainer"> 201 + <InputWrapper>
192 - <form onSubmit={onSubmit}> 202 + <InputContainer className="InputContainer">
193 - <Input 203 + <form onSubmit={onSubmit}>
194 - placeholder={"Enter any words"} 204 + <Input
195 - type="text" 205 + placeholder={"Enter any words"}
196 - {...message} 206 + type="text"
197 - /> 207 + {...message}
198 - <Button text={"Submit"} /> 208 + />
199 - </form> 209 + <Button text={"Submit"} />
200 - </InputContainer> 210 + </form>
211 + </InputContainer>
212 + </InputWrapper>
201 </ChatScreenBox> 213 </ChatScreenBox>
202 </ChatScreenContainer> 214 </ChatScreenContainer>
203 </ChatWrapper> 215 </ChatWrapper>
......