@rpg-engine/long-bow 0.3.23 → 0.3.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.23",
+  "version": "0.3.25",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Chat/Chat.tsx

@@ -99,7 +99,6 @@ export const Chat: React.FC<IChatProps> = ({
               id="inputMessage"
               onChange={e => getInputValue(e.target.value)}
               height={20}
-              className="chat-input dark-background"
               type="text"
               autoComplete="off"
               onFocus={onFocus}
@@ -113,7 +112,7 @@ export const Chat: React.FC<IChatProps> = ({
               id="chat-send-button"
               style={{ borderRadius: '20%' }}
             >
-              <CiPaperplane size={20} />
+              <CiPaperplane size={15} />
             </Button>
           </Column>
         </Form>
@@ -139,22 +138,22 @@ interface IButtonProps {
 const ChatContainer = styled.div<IContainerProps>`
   height: ${props => props.height};
   width: ${({ width }) => width};
-  border-radius: 10px;
-  padding: 40px 30px;
+  padding: 10px;
   margin-top: 100px;
-  box-shadow: -3px -3px 9px #aaa9a9a2, 3px 3px 7px rgba(147, 149, 151, 0.671);
+  background-color: rgba(0, 0, 0, 0.2);
 `;
 
 const TextField = styled.input`
   width: 100%;
-  border-radius: 10px;
-  box-shadow: -3px -3px 9px #aaa9a9a2, 3px 3px 7px rgba(147, 149, 151, 0.671);
+  background-color: rgba(0, 0, 0, 0.25) !important;
+  border: none !important;
+  max-height: 28px !important;
 `;
 
 const MessagesContainer = styled.div`
-  overflow: hidden;
+  overflow-x: scroll;
   height: 70%;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 `;
 
 const Message = styled.div<IMessageProps>`
@@ -172,6 +171,7 @@ const Form = styled.form`
 const Button = styled.button<IButtonProps>`
   color: ${({ buttonColor }) => buttonColor};
   background-color: ${({ buttonBackgroundColor }) => buttonBackgroundColor};
-  width: 50px;
-  height: 40px;
+  width: 28px;
+  height: 28px;
+  border: none !important;
 `;