diff --git a/src/components/_chat.scss b/src/components/_chat.scss index 9227ceb..c27efc7 100644 --- a/src/components/_chat.scss +++ b/src/components/_chat.scss @@ -51,11 +51,13 @@ #open-chatbox-label { background: $theme-color; - padding: 0.75rem 1.5rem; + padding: 0.75rem; flex: 1 1 auto; text-align: left; margin-right: 0.25rem; border: 1px solid $theme-color; + border-radius: 10px; + transition: all 0.2s ease-in-out; } .label-icon { @@ -67,6 +69,7 @@ justify-content: center; align-items: center; border: 1px solid $theme-color; + transition: all 0.2s ease-in-out; } &:hover { @@ -131,6 +134,18 @@ font-family: $theme-font; font-size: 1rem; padding: 0.5rem; + border-radius: 10px; + transition: all 0.2s ease-in-out; + + &:hover { + border: 1px solid $theme-color; + } + + &:focus { + outline: none; + border: 1px solid $theme-color; + background-color: $theme-light-color; + } } &-close { @@ -145,6 +160,17 @@ width: 40px; margin-left: 0.2rem; color: $dark-color; + transition: all 0.2s ease-in-out; + + &:hover { + border: 1px solid $theme-color; + } + + &:focus { + outline: none; + border: 1px solid $theme-color; + background-color: $theme-light-color; + } } } &-body { @@ -198,9 +224,8 @@ font-family: $theme-font; display: flex; flex-direction: column; - height: 60vh; + height: calc(40vh + 180px); max-height: 100vh; - min-height: 180px; padding: 5px; a { @@ -222,6 +247,7 @@ flex-direction: column-reverse; justify-content: space-between; margin-bottom: 0.2rem; + border-radius: 10px; } .notices { @@ -302,6 +328,7 @@ font-family: $theme-font; margin-right: 0.2rem; transition: all 0.2s ease-in-out; + border-radius: 10px; &:focus { outline: none; @@ -323,6 +350,7 @@ flex: 0 1 auto; border: 1px solid $theme-color; transition: all 0.2s ease-in-out; + border-radius: 10px; &:hover { border: 1px solid $dark-color; @@ -336,6 +364,10 @@ } } + .highlight-text { + color: $theme-color; + } + } @media screen and (max-width: 420px){ @@ -351,6 +383,6 @@ } #ocrcc-chatbox { - height: 80vh; + height: calc(180px + 60vh); } } diff --git a/src/components/_dark_mode.scss b/src/components/_dark_mode.scss index 7a8f839..49a13e4 100644 --- a/src/components/_dark_mode.scss +++ b/src/components/_dark_mode.scss @@ -8,13 +8,36 @@ background: $dark-background-color; color: $light-text-color; border: 1px solid $white; + transition: all 0.2s ease-in-out; + + &:hover { + border-color: $theme-color; + } + + &:focus { + background: $dark-theme-color; + outline: none; + } + } + + .widget { + button { + transition: all 0.2s ease-in-out; + + &:hover { + border-color: $theme-color; + } + + &:focus { + background: $dark-theme-color; + outline: none; + } + } } #ocrcc-chatbox { .btn-icon { color: $light-text-color; } - - .message-window { background-color: $dark-background-color; border: 1px solid $white; @@ -49,9 +72,14 @@ .input-window { input[type="text"] { - background-color: $dark-theme-color; + background-color: $dark-background-color; color: $light-text-color; border: 1px solid $white; + + &:focus { + border: 1px solid $theme-color; + background: $dark-theme-color; + } } ::placeholder { @@ -64,5 +92,9 @@ border: 1px solid $white; } } + + .highlight-text { + color: $light-text-color; + } } } diff --git a/src/components/chatbox.jsx b/src/components/chatbox.jsx index 755c58c..86a7e32 100644 --- a/src/components/chatbox.jsx +++ b/src/components/chatbox.jsx @@ -25,8 +25,8 @@ const BOT_USERNAME = "@help-bot:rhok.space" const ENCRYPTION_CONFIG = { "algorithm": "m.megolm.v1.aes-sha2" }; const ENCRYPTION_NOTICE = "Messages in this chat are secured with end-to-end encryption." const INTRO_MESSAGE = "This chat application does not collect any of your personal data or any data from your use of this service." -const AGREEMENT_MESSAGE = "Do you want to continue? Type yes or no." -const CONFIRMATION_MESSAGE = "Starting the chat - a facilitator will be with you soon." +const AGREEMENT_MESSAGE = "👉 Do you want to continue? Type yes or no." +const CONFIRMATION_MESSAGE = "Waiting for a facilitator to join the chat..." const EXIT_MESSAGE = "The chat was not started." const FACILITATOR_ROOM_ID = '!pYVVPyFKacZeKZbWyz:rhok.space' const TERMS_URL="https://tosdr.org/" @@ -59,8 +59,7 @@ const initialState = { id: 'agreement-msg-id', type: 'm.room.message', sender: BOT_USERNAME, - content: { body: AGREEMENT_MESSAGE }, - }, + content: { body: AGREEMENT_MESSAGE }, }, ], inputValue: "", errors: [], @@ -76,6 +75,7 @@ class ChatBox extends React.Component { const client = matrix.createClient(this.props.matrixServerUrl) this.state = initialState this.chatboxInput = React.createRef(); + this.messageWindow = React.createRef(); } handleToggleOpen = () => { @@ -212,8 +212,18 @@ class ChatBox extends React.Component { this.state.client.setPowerLevel(data.room_id, BOT_USERNAME, 100) .then(() => console.log("Set bot power level to 100")) .catch(err => console.log("Error setting bot power level", err)) + + const confirmationMsg = { + id: 'confirmation-msg-id', + type: 'm.room.message', + sender: BOT_USERNAME, + content: { body: CONFIRMATION_MESSAGE }, + } + const messages = [...this.state.messages] + messages.push(confirmationMsg) this.setState({ - roomId: data.room_id + roomId: data.room_id, + messages }) }) .catch(err => { @@ -316,6 +326,10 @@ class ChatBox extends React.Component { if (!prevState.opened && this.state.opened) { this.chatboxInput.current.focus() } + + if (prevState.messages.length !== this.state.messages.length) { + this.messageWindow.current.scrollTo(0, this.messageWindow.current.scrollHeight) + } } componentDidMount() { @@ -344,15 +358,8 @@ class ChatBox extends React.Component { content: { body: this.state.inputValue }, } - const confirmationMsg = { - id: 'confirmation-msg-id', - type: 'm.room.message', - sender: BOT_USERNAME, - content: { body: CONFIRMATION_MESSAGE }, - } const messages = [...this.state.messages] messages.push(fakeUserMsg) - messages.push(confirmationMsg) this.setState({ inputValue: "", messages }) return this.initializeChat() @@ -398,7 +405,7 @@ class ChatBox extends React.Component {
-
+
{ messages.map((message, index) => {