diff --git a/package.json b/package.json index 224f1f6..96158c4 100644 --- a/package.json +++ b/package.json @@ -116,6 +116,7 @@ "webpack-serve": "3.2.0" }, "dependencies": { + "linkifyjs": "^2.1.9", "matrix-js-sdk": "^4.0.0", "node-localstorage": "^2.1.5", "olm": "https://packages.matrix.org/npm/olm/olm-3.1.4.tgz", diff --git a/src/components/_chat.scss b/src/components/_chat.scss index 8e983dc..8dbff05 100644 --- a/src/components/_chat.scss +++ b/src/components/_chat.scss @@ -30,6 +30,7 @@ right: 10px; z-index: 9999; width: 400px; + max-width: 100vw; } .dock { @@ -323,6 +324,14 @@ margin-left: 10%; padding: 0.5rem 0.75rem; } + + a { + color: $white; + + &:hover, &:focus { + color: $light-purple; + } + } } &.from-support { @@ -337,6 +346,14 @@ margin-right: 10%; padding: 0.5rem 0.75rem; } + + a { + color: $dark-color; + + &:hover, &:focus { + color: $medium-purple; + } + } } } diff --git a/src/components/_dark_mode.scss b/src/components/_dark_mode.scss index b55678f..d661025 100644 --- a/src/components/_dark_mode.scss +++ b/src/components/_dark_mode.scss @@ -85,6 +85,34 @@ color: $light-text-color; border: 1px solid $dark-theme-color; } + + a { + color: $light-text-color; + + &:hover, &:focus { + color: $light-purple; + } + } + } + + .buttons { + button { + background-color: transparent; + border: 1px solid $theme-color; + + &:hover { + border: 1px solid $light-purple; + box-shadow: inset 0px 0px 0px 1px $light-purple; + } + + &:focus { + outline: none; + color: $white; + border: 1px solid $light-purple; + box-shadow: inset 0px 0px 0px 1px $light-purple; + background-color: $dark-theme-highlight-color; + } + } } } diff --git a/src/components/chatbox.jsx b/src/components/chatbox.jsx index beebf71..bb3ae0b 100644 --- a/src/components/chatbox.jsx +++ b/src/components/chatbox.jsx @@ -174,7 +174,6 @@ class ChatBox extends React.Component { userId: data.user_id, deviceId: data.device_id, sessionStore: new matrix.WebStorageSessionStore(localStorage), - displayName: this.props.anonymousDisplayName, } client = matrix.createClient(opts) @@ -184,6 +183,7 @@ class ChatBox extends React.Component { }) .then(() => client.initCrypto()) .catch(err => this.initializeUnencryptedChat()) + .then(() => client.setDisplayName(this.props.anonymousDisplayName)) .then(() => client.startClient()) .then(() => { this.setState({ @@ -202,12 +202,12 @@ class ChatBox extends React.Component { accessToken: this.state.accessToken, userId: this.state.userId, deviceId: this.state.deviceId, - displayName: this.props.anonymousDisplayName, } let client; try { client = matrix.createClient(opts) + client.setDisplayName(this.props.anonymousDisplayName) } catch { return this.handleInitError() } @@ -287,12 +287,8 @@ class ChatBox extends React.Component { }) } - sendMessage = () => { - this.state.client.sendTextMessage(this.state.roomId, this.state.inputValue) - .then((res) => { - this.setState({ inputValue: "" }) - this.chatboxInput.current.focus() - }) + sendMessage = (message) => { + this.state.client.sendTextMessage(this.state.roomId, message) .catch((err) => { switch (err["name"]) { case "UnknownDeviceError": @@ -301,9 +297,10 @@ class ChatBox extends React.Component { this.state.client.setDeviceKnown(userId, deviceId, true); }); }); - this.sendMessage() + this.sendMessage(message) break; default: + this.displayBotMessage({ body: "Your message was not sent." }) console.log("Error sending message", err); } }) @@ -434,10 +431,13 @@ class ChatBox extends React.Component { handleSubmit = e => { e.preventDefault() - if (!Boolean(this.state.inputValue)) return null; + const message = this.state.inputValue + if (!Boolean(message)) return null; if (this.state.client && this.state.roomId) { - return this.sendMessage() + this.setState({ inputValue: "" }) + this.chatboxInput.current.focus() + return this.sendMessage(message) } } @@ -461,7 +461,7 @@ class ChatBox extends React.Component {