text box, you can send messages! woohoo!

bfrontend/src/Components/Categories/CategoryView.js

@@ -1,12 +1,16 @@
 import CategoryViewLoader from './CategoryViewLoader';
 import CategoryProfile from './CategoryProfileLink';
 import Message from '../Messages/Message';
+import gatewayConnection from '../../Gateway/globalGatewayConnection';
 
 import { useParams } from 'react-router-dom';
-import { connect } from 'react-redux'
+import { connect } from 'react-redux';
+import { useState, useRef } from 'react';
 
 function CategoryView({ categories, messages }) {
     const { id } = useParams();
+    const [ textInput, setTextInput ] = useState('');
+    const textInputRef = useRef(null);
 
     let category;
 
@@ -14,6 +18,15 @@ function CategoryView({ categories, messages }) {
         category = categories.find(x => x._id === id);
     }
 
+    const handleTextboxKeydown = (e) => {
+        if (e.key === 'Enter') {
+            // Send message written in textbox
+
+            gatewayConnection.sendMessage(id, textInput);
+            textInputRef.current.value = '';
+        }
+    }
+
     if (category) {
         return (
             <div className="card main-card main-content-card">
@@ -24,8 +37,7 @@ function CategoryView({ categories, messages }) {
                     { messages.map(m => <Message key={ m._id } message={ m } />) }
                 </div>
                 <div className="card bar-card-bottom">
-                    The hearing of the average cat is at least five times keener than that of a human adult.
-                    In the largest cat breed, the average male weighs approximately 20 pounds.
+                    <input className="text-input" type="text" placeholder="Go on, type something interesting!" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
                 </div>
             </div>
         )

bfrontend/src/Styles/App.scss

@@ -3,13 +3,23 @@
 :root {
     --background-color: #{$nord0};
 
-    --default-main-card-color: #{$nord1};
-    --card-box-shadow-color:rgba(0, 0, 0, 0.25);
+    --default-main-card-color: var(--background-color);
+    --card-box-shadow-color:rgba(0, 0, 0, 0.27);
 
     --default-text-color: #{$nord5};
 
-    --accent-color-dark: #{$nord2};
-    --accent-color-light: #{$nord3};
+    --accent-color-dark: #{$nord1};
+    --accent-color-light: #{$nord2};
+
+    --category-top-bar-color: var(--accent-color-light);
+    --category-bottom-text-bar-color: var(--accent-color-light);
+
+    --category-list-background-color: var(--background-color);
+    --category-message-list-background-color: var(--background-color);
+    --category-message-color: var(--accent-color-dark);
+
+    --button-color: var(--accent-color-dark);
+    --button-hover-color: var(--accent-color-light);
 
     --default-transition-duration: 200ms;
     --default-border-radius: 0px;
@@ -63,8 +73,9 @@ body {
     @include card;
 
     &.bar-card {
-        background-color: var(--accent-color-dark);
-        min-height: 40px;
+        background-color: var(--category-top-bar-color);
+        min-height: 50px;
+        padding: 5px;
 
         border-radius: var(--default-button-border-radius) var(--default-button-border-radius) 0px 0px;
         display: flex;
@@ -72,27 +83,35 @@ body {
         justify-content: left;
 
         font-size: large;
+
+        z-index: 99;
     }
 
     &.bar-card-bottom {
-        background-color: var(--accent-color-dark);
-        min-height: 30px;
+        background-color: var(--category-bottom-text-bar-color);
+        box-shadow: 0px -3px 5px var(--card-box-shadow-color);
+
+        min-height: 40px;
 
         border-radius: 0px 0px var(--default-button-border-radius) var(--default-button-border-radius);
+        display: flex;
+
+        z-index: 100;
     }
     
     &.message-list-card {
+        @include fancy-scrollbar-firefox;
         border-radius: 0px;
         flex-grow: 1;
         box-shadow: none;
+        overflow: auto;
+        background-color: var(--category-message-list-background-color);
     }
 }
 
 .main-card {
     @include card;
 
-    margin: 12px;
-
     &.main-content-card {
         flex-grow: 1;
         display: flex;
@@ -106,7 +125,7 @@ body {
     padding: 5px;
     margin: 5px;
     border: 0px;
-    background-color: var(--accent-color-dark);
+    background-color: var(--button-color);
     color: var(--default-text-color);
     cursor: pointer;
     transition: background-color, var(--default-transition-duration);
@@ -141,6 +160,8 @@ body {
 
     min-width: 110px;
     max-width: 110px;
+
+    background-color: var(--category-list-background-color);
 }
 
 .profile-picture {
@@ -186,6 +207,21 @@ body {
 
     display: flex;
     flex-direction: column;
+    margin-top: 15px;
+    margin-left: 5px;
+    margin-right: 5px;
+    padding: 5px;
+    background-color: var(--category-message-color);
+}
+
+.text-input {
+    @include card;
+
+    margin: 5px;
+    padding: 5px;
+    border: none;
+    color: var(--default-text-color);
+    flex-grow: 1;
 }
 
 @media only screen and (max-width: 600px) {
@@ -198,8 +234,4 @@ body {
         min-width: 60px;
         max-width: 60px;
     }
-
-    .main-card {
-        margin: 6px;
-    }
 }