change colors and redesign a few elements, also fix a few bugs

bfrontend/src/Components/Categories/CategoryButton.js

@@ -1,7 +1,7 @@
-// import CategoryProfile from './CategoryProfile';
+import CategoryProfile from './CategoryProfileLink';
+import gatewayConnection from '../../Gateway/globalGatewayConnection';
 
 import { useHistory } from 'react-router-dom';
-import gatewayConnection from '../../Gateway/globalGatewayConnection';
 
 export default function CategoryButton({ category }) {
     const history = useHistory();
@@ -14,12 +14,7 @@ export default function CategoryButton({ category }) {
 
     return (
         <button className="button category-button" onClick={ handleClick }>
-            {/* 
-            maybe enable someday...
             <CategoryProfile category={ category } size="32" /> 
-            */}
-
-            { category.title }
         </button>
     );
 }

bfrontend/src/Components/Categories/CategoryView.js

@@ -10,29 +10,28 @@ import { useState, useRef, useEffect } from 'react';
 function CategoryView({ categories, messages, isHandlingRoute=true, subscribedToCategories, gateway: { isConnected: isGatewayConnected } }) {
     const { id } = useParams();
     const [ textInput, setTextInput ] = useState('');
+    const [ category, setCategory ] = useState();
+
     const textInputRef = useRef(null);
     const invisibleBottomMessageRef = useRef(null);
-    const dispatch = useDispatch();
 
-    let category;
+    const dispatch = useDispatch();
 
     const scrollToBottom = () => {
         if (invisibleBottomMessageRef && invisibleBottomMessageRef.current) {
             invisibleBottomMessageRef.current.scrollIntoView({ behaviour: 'smooth' });
         }
     }
-    
+    useEffect(scrollToBottom, [messages]);
+
     const handleTextboxKeydown = (e) => {
         if (e.key === 'Enter') {
-            // Send message written in textbox
-
             gatewayConnection.sendMessage(id, textInput);
             textInputRef.current.value = '';
+            setTextInput('');
         }
     }
 
-    useEffect(scrollToBottom, [messages]);
-
     useEffect(() => {
         if (isHandlingRoute) {
             if (!id || id === '') return;
@@ -43,19 +42,31 @@ function CategoryView({ categories, messages, isHandlingRoute=true, subscribedTo
             gatewayConnection.subscribeToCategoryChat(id);
         }
     }, [dispatch, id, isHandlingRoute, subscribedToCategories, isGatewayConnected]);
-    
-    if (categories) {
-        category = categories.find(x => x._id === id);
-    }
+
+    useEffect(() => {
+        if (!categories) return;
+
+        setCategory(categories.find(x => x._id === id));
+    }, [ categories, id ]);
 
     if (category) {
+        let messagesView = messages.map(m => <Message key={ m._id } message={ m } />);
+
+        if (messagesView === undefined || messagesView.length <= 0) {
+            messagesView = (
+                <div class='no-messages-warning'>
+                    A bit empty in here...
+                </div>
+            );
+        }
+
         return (
             <div className="card main-card main-content-card">
                 <div className="card bar-card">
                     <CategoryProfile category={ category } />
                 </div>
                 <div className="card message-list-card">
-                    { messages.map(m => <Message key={ m._id } message={ m } />) }
+                    { messagesView }
                     <div ref={ invisibleBottomMessageRef }></div>
                 </div>
                 <div className="card bar-card-bottom">

bfrontend/src/Components/Messages/Message.js

@@ -3,7 +3,7 @@ import UserProfileLink from '../Users/UserProfileLink';
 export default function Message({ message }) {
     return (
         <div className="message">
-            <UserProfileLink user={ message.author } />
+            <UserProfileLink size="40" user={ message.author } />
             <span>{ message.content }</span>
         </div>
     );

bfrontend/src/Components/UI/Sidebar.js

@@ -1,9 +1,23 @@
 import CategoryList from '../Categories/CategoryList';
+import UserProfileLink from '../Users/UserProfileLink';
 
-export default function Sidebar() {
+import { connect } from 'react-redux';
+
+function Sidebar({ user }) {
     return (
         <div className="card main-card category-list-container">
+            <div className="card bar-card">
+                <UserProfileLink user={ user } />
+            </div>
             <CategoryList />
         </div>
     )
-}
+}
+
+const stateToProps = (state) => {
+    return {
+        user: state?.user
+    };
+};
+
+export default connect(stateToProps)(Sidebar);

bfrontend/src/Components/Users/UserProfileLink.js

@@ -19,7 +19,7 @@ export default function UserProfileLink({ user, size }) {
     }
 
     return (
-        <div className="profile-link">
+        <div className="profile-link user-profile-link">
             { picture }
             <span className="profile-username">{ user.username }</span>
         </div>

bfrontend/src/Styles/App.scss

@@ -1,15 +1,37 @@
-@import "../../node_modules/nord/src/sass/nord.scss";
+$nord0darker: #22262e;
+$nord1darker: #282b36;
+$nord2darker: #333947;
+
+$nord4darker: #9da2ad;
+
+$nord0: #2E3440;
+$nord1: #3B4252;
+$nord2: #434C5E;
+$nord3: #4C566A;
+$nord4: #D8DEE9;
+$nord5: #E5E9F0;
+$nord6: #ECEFF4;
+$nord7:  #8FBCBB;
+$nord8:  #88C0D0;
+$nord9:  #81A1C1;
+$nord10: #5E81AC;
+$nord11: #BF616A;
+$nord12: #D08770;
+$nord13: #EBCB8B;
+$nord14: #A3BE8C;
+$nord15: #B48EAD;
 
 :root {
-    --background-color: #{$nord0};
+    --background-color: #{$nord0darker};
 
     --default-main-card-color: var(--background-color);
     --card-box-shadow-color:rgba(0, 0, 0, 0.27);
 
     --default-text-color: #{$nord5};
+    --darker-text-color: #{$nord4darker};
 
-    --accent-color-dark: #{$nord1};
-    --accent-color-light: #{$nord2};
+    --accent-color-dark: #{$nord1darker};
+    --accent-color-light: #{$nord2darker};
 
     --category-top-bar-color: var(--accent-color-light);
     --category-bottom-text-bar-color: var(--accent-color-light);
@@ -21,7 +43,7 @@
     --button-color: var(--accent-color-dark);
     --button-hover-color: var(--accent-color-light);
 
-    --default-transition-duration: 200ms;
+    --default-transition-duration: 50ms;
 
     --default-border-radius: 0px;
     --default-button-border-radius: 0px;
@@ -133,13 +155,19 @@ body {
     background-color: var(--button-color);
     color: var(--default-text-color);
     cursor: pointer;
-    transition: background-color, var(--default-transition-duration);
+    // transition: background-color, var(--default-transition-duration);
     border-radius: var(--default-button-border-radius);
     min-height: 25px;
 
     &.category-button {
-        min-width: 100px;
-        max-width: 100px;
+        min-width: 200px;
+        max-width: 200px;
+
+        min-height: 40px;
+        max-height: 100px;
+
+        margin: 4px;
+        border-radius: 4px;
     }
 
     &.pressed {
@@ -163,9 +191,6 @@ body {
     overflow: auto;
     overflow-x: hidden;
 
-    min-width: 110px;
-    max-width: 110px;
-
     background-color: var(--category-list-background-color);
 }
 
@@ -189,6 +214,11 @@ body {
         width: 32px;
         height: 32px;
     }
+    
+    &.profile-picture-40 {
+        width: 40px;
+        height: 40px;
+    }
 
     &.profile-picture-64 {
         width: 64px;
@@ -201,6 +231,11 @@ body {
     flex-direction: row;
     align-items: center;
     justify-content: left;
+
+    &.user-profile-link {
+        align-items: unset;
+        text-align: start;
+    }
 }
 
 .profile-username {
@@ -210,6 +245,8 @@ body {
 .message {
     @include card;
 
+    box-shadow: none;
+
     display: flex;
     flex-direction: column;
     margin-top: 5px;
@@ -218,7 +255,7 @@ body {
     margin-right: 5px;
     padding: 5px;
     border-radius: var(--category-message-border-radius);
-    background-color: var(--category-message-color);
+    background-color: var(--background-color);
 }
 
 .text-input {
@@ -231,14 +268,15 @@ body {
     flex-grow: 1;
 }
 
+.no-messages-warning {
+    text-align: center;
+    padding: 50px;
+    color: var(--darker-text-color);
+}
+
 @media only screen and (max-width: 600px) {
     .button.category-button {
-        min-width: 50px;
-        max-width: 50px;
+        min-width: 100px;
+        max-width: 100px;
     }
-
-    .category-list-container {
-        min-width: 60px;
-        max-width: 60px;
-    }
-}
+}