Showing
1 changed file
with
16 additions
and
4 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,6 +198,7 @@ export default ({ | ... | @@ -188,6 +198,7 @@ export default ({ |
188 | avatar={e.sender.avatarUrl} | 198 | avatar={e.sender.avatarUrl} |
189 | /> | 199 | /> |
190 | ))} | 200 | ))} |
201 | + <InputWrapper> | ||
191 | <InputContainer className="InputContainer"> | 202 | <InputContainer className="InputContainer"> |
192 | <form onSubmit={onSubmit}> | 203 | <form onSubmit={onSubmit}> |
193 | <Input | 204 | <Input |
... | @@ -198,6 +209,7 @@ export default ({ | ... | @@ -198,6 +209,7 @@ export default ({ |
198 | <Button text={"Submit"} /> | 209 | <Button text={"Submit"} /> |
199 | </form> | 210 | </form> |
200 | </InputContainer> | 211 | </InputContainer> |
212 | + </InputWrapper> | ||
201 | </ChatScreenBox> | 213 | </ChatScreenBox> |
202 | </ChatScreenContainer> | 214 | </ChatScreenContainer> |
203 | </ChatWrapper> | 215 | </ChatWrapper> | ... | ... |
-
Please register or login to post a comment