Showing
1 changed file
with
26 additions
and
14 deletions
... | @@ -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> | ... | ... |
-
Please register or login to post a comment