transitions styling and better messaging on chat initialization

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);
   }
 }

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;
+    }
   }
 }

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 {
               <div id="ocrcc-chatbox" aria-haspopup="dialog">
                 <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />
 
-                <div className="message-window">
+                <div className="message-window" ref={this.messageWindow}>
                   <div className="messages">
                     {
                       messages.map((message, index) => {