add some hover/focus effects

src/components/_chat.scss

@@ -1,4 +1,4 @@
-* { min-height: 0 } /* hacky fix for overflow scroll bug in nexted flex containers in firefox */
+* { box-sizing: border-box; }
 
 @keyframes slideInUp {
   from {
@@ -55,6 +55,7 @@
     flex: 1 1 auto;
     text-align: left;
     margin-right: 0.25rem;
+    border: 1px solid $theme-color;
   }
 
   .label-icon {
@@ -65,6 +66,22 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    border: 1px solid $theme-color;
+  }
+
+  &:hover {
+    #open-chatbox-label, .label-icon {
+      border: 1px solid $dark-color;
+    }
+  }
+
+  &:focus {
+    outline: none;
+
+    #open-chatbox-label, .label-icon {
+      border: 1px solid $dark-color;
+      background-color: transparentize($theme-color, 0.15);
+    }
   }
 }
 
@@ -140,6 +157,19 @@
     line-height: 30px;
     padding-left: 10px;
   }
+
+  button {
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      border-color: $theme-color;
+    }
+
+    &:focus {
+      background: $theme-light-color;
+      outline: none;
+    }
+  }
 }
 
 .btn-icon {
@@ -164,19 +194,6 @@
 
 }
 
-@media screen and (max-width: 420px){
-  .docked-widget {
-    right: 0;
-    left: 0;
-    bottom: 0;
-  }
-
-  .dock, .widget {
-    width: 100vw;
-    max-width: 100vw;
-  }
-}
-
 #ocrcc-chatbox {
   font-family: $theme-font;
   display: flex;
@@ -188,6 +205,11 @@
 
   a {
     color: inherit;
+    transition: all 0.2s ease-in-out;
+
+    &:hover, &:focus {
+      color: $theme-color;
+    }
   }
 
   .message-window {
@@ -279,9 +301,12 @@
       color: $dark-color;
       font-family: $theme-font;
       margin-right: 0.2rem;
+      transition: all 0.2s ease-in-out;
 
       &:focus {
-        border: none;
+        outline: none;
+        border: 1px solid $theme-color;
+        background: $theme-light-color;
       }
     }
 
@@ -292,12 +317,40 @@
       font-size: 1rem;
       color: $white;
       font-weight: bold;
-      border: 1px solid $theme-color;
       font-family: $theme-font;
       cursor: pointer;
       display: flex;
-      flex: 1 0 auto;
+      flex: 0 1 auto;
+      border: 1px solid $theme-color;
+      transition: all 0.2s ease-in-out;
+
+      &:hover {
+        border: 1px solid $dark-color;
+      }
+
+      &:focus {
+        outline: none;
+        border: 1px solid $dark-color;
+        background-color: transparentize($theme-color, 0.15);
+      }
     }
   }
 
-}
+}
+
+@media screen and (max-width: 420px){
+  .docked-widget {
+    right: 0;
+    left: 0;
+    bottom: 0;
+  }
+
+  .dock, .widget {
+    width: 100vw;
+    max-width: 100vw;
+  }
+
+  #ocrcc-chatbox {
+    height: 80vh;
+  }
+}

src/components/_variables.scss

@@ -1,6 +1,7 @@
-@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Assistant&display=swap');
 
 $purple: #785BEC;
+$light-purple: #f1eefd;
 $charcoal: #828282;
 $light-color: #F2F2F2;
 $gray-color: $charcoal;
@@ -10,7 +11,8 @@ $dark-blue: #2660A4;
 $white: #ffffff;
 $highlight-color: $yellow;
 $theme-color: $purple;
-$theme-font: 'Poppins', 'Helvetica', sans-serif;
+$theme-light-color: $light-purple;
+$theme-font: 'Assistant', 'Helvetica', sans-serif;
 $drop-shadow-color: #BDBEBF;
 
 /* Dark mode colors */

src/components/chatbox.jsx

@@ -313,8 +313,6 @@ class ChatBox extends React.Component {
       this.chatboxInput.current.focus()
     }
 
-    console.log('OPENED STATE', this.state.opened)
-
     if (!prevState.opened && this.state.opened) {
       this.chatboxInput.current.focus()
     }
@@ -345,8 +343,16 @@ class ChatBox extends React.Component {
           sender: 'from-me',
           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()