bfrontend/src/API/Gateway/globalGatewayConnection.js

@@ -46,7 +46,7 @@ globalGatewayConnection.onclose = function() {
     warn("Gateway connection closed");
     store.dispatch({ type: 'authenticator/updatelocaluserobject', user: undefined });
     store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: false } });
-    store.dispatch({ type: 'application/updatebannertext', text: "Hang tight! You've lost connection!" });
+    store.dispatch({ type: 'application/updatebannertext', text: "⚡ Hang tight! You've lost connection!" });
     const interval = setInterval(() => {
         if (globalGatewayConnection.ws.readyState === 1) {
             clearInterval(interval);

bfrontend/src/Components/Channels/ChannelMessageView.js

@@ -2,20 +2,28 @@ import Message from  "../Messages/Message";
 import { useRef, useEffect } from 'react';
 
 export default function ChannelMessageView({messages}) {
-    const invisibleBottomMessageRef = useRef();
+    const invisibleBottomMessageRef = useRef(null);
 
     useEffect(() => {
-        invisibleBottomMessageRef.current.scrollIntoView(true);
+        if (invisibleBottomMessageRef && invisibleBottomMessageRef.current) {
+            invisibleBottomMessageRef.current.scrollIntoView({ behaviour: 'smooth' });
+        }
     }, [messages]);
 
-    let messagesView = messages.map((message) => (<Message key={message._id} message={message} />));
+    let messagesView = messages.map((m, i) => {
-    if (messagesView === undefined || messagesView.length <= 0) 
+        return <Message key={ m._id } message={ m } />;
-        messagesView = (<div className='no-messages-warning'>
+    });
-            <span>No messages yet...</span>
+
-        </div>);
+    if (messagesView === undefined || messagesView.length <= 0) {
+        messagesView = (
+            <div className='no-messages-warning'>
+                <span>No messages yet...</span>
+            </div>
+        );
+    }
 
     return <div className="message-list-card">
         { messagesView }
-        <div className="messages-scroll-div" ref={ invisibleBottomMessageRef }></div>
+        <div ref={ invisibleBottomMessageRef }></div>
     </div>;
 }

bfrontend/src/Components/Channels/ChannelView.js

@@ -28,7 +28,7 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
     if (channel) {
         return (
             <div className="col-flex-card hidden-overflow">
-                <div className="bar-card-accent no-select">
+                <div className="bar-card-accent">
                     <ChannelProfile channel={ channel } size="24" />
                     {/*
                         { (experiments.voiceSFUTesting) && <button className="button" onClick={ () => gatewayConnection.beginVoiceSession(channel._id) }>
@@ -38,9 +38,9 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
                 </div>
 
                 <div className="row-flex-card hidden-overflow">
-                    <div className="channel-message-panel">
+                    <div className="col-flex-card channel-message-panel hidden-overflow">
                         <ChannelMessageView messages={messages}></ChannelMessageView>
-                        <div className="col-flex-card">
+                        <div className="invis-bar">
                             <input className="text-input message-input" type="text" placeholder="Go on, type something interesting!" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
                         </div>
                     </div>

bfrontend/src/Components/Main/App.js

@@ -4,6 +4,7 @@ import Root from '../Home/Root';
 import Authenticator from '../../API/Authenticator';
 import Notification from '../UI/Notification';
 import './../../Styles/App.scss';
+import Sidebar from '../UI/Sidebar';
 
 import { useEffect, useState } from 'react';
 import { useDispatch, connect } from 'react-redux'
@@ -40,7 +41,7 @@ function App({ user }) {
                         />
 
                         <Route path="/">
-                            { user && <LoggedInMount /> }
+                            { user && <Sidebar /> }
                             <Root user={user} />
                         </Route>
                     </Switch>

bfrontend/src/Components/Main/LoggedInMount.js

@@ -1,20 +1,11 @@
 import { useParams } from "react-router-dom";
 import Sidebar from "../UI/Sidebar";
 import ChannelView from "../Channels/ChannelView";
-import GradientBanner from "../UI/GradientBanner";
-import { connect } from "react-redux";
 
-function LoggedInMount({ gradientBannerNotificationText }) {
+export default function LoggedInMount() {
     const { id: channelId } = useParams();
     return <>
         <Sidebar />
-        <div className="col-flex-card">
+        <ChannelView channelId={ channelId } />
-            <GradientBanner text={ gradientBannerNotificationText }/>
-            { (channelId) && <ChannelView channelId={ channelId } /> }
-        </div>
     </>;
 }
-
-export default connect((state) => ({
-    gradientBannerNotificationText: state.gradientBannerNotificationText
-}))(LoggedInMount);

bfrontend/src/Components/UI/GradientBanner.js

@@ -1,9 +1,5 @@
-import { useDispatch } from "react-redux";
+export default function GradientBanner() {
-
+    return (gradientBannerNotificationText !== undefined) && <div className="gradient-banner-card" onClick={ () => dispatch({ type: "application/updatebannertext", text: undefined }) }>
-export default function GradientBanner({ text }) {
+        { gradientBannerNotificationText }
-    const dispatch = useDispatch();
-
-    return (text !== undefined) && <div className="gradient-banner-card" onClick={ () => dispatch({ type: "application/updatebannertext", text: undefined }) }>
-        { text }
     </div>;
 }

bfrontend/src/Components/UI/ProfileLink.js

@@ -1,4 +1,4 @@
-// TODO: This is an actual, horrible mess
+// This is a mess pls fix later
 export default function ProfileLink({ object, size, type, offset=true, children=null, hideName=false }) {
     let picture;
 

bfrontend/src/Styles/App.scss

@@ -1,3 +1,4 @@
+@import "./colors.scss";
 @import "./root.scss";
 @import "./mixins.scss";
 
@@ -7,7 +8,6 @@
 @import "./Components/ProfileLink.scss";
 @import "./Components/Message.scss";
 @import "./Components/Textbox.scss";
-@import "./Components/properties.scss";
 
 ::-webkit-scrollbar {
     width: 0px;
@@ -29,7 +29,11 @@ body {
     padding: 0px;
 }
 
-button, input, optgroup, select, textarea {
+button,
+input,
+optgroup,
+select,
+textarea {
   font-family: inherit;
   font-size: 100%;
 }

bfrontend/src/Styles/Components/Button.scss

@@ -24,13 +24,13 @@
     &-pressed {
         @extend .button;
 
-        background-color: var(--button-selected-background-color);
+        background: var(--focus-accent-background);
         color: var(--default-text-color);
     }
 }
 
 .button:hover:not(.button-pressed) {
-    background-color: var(--button-hover-background-color);
+    background: var(--focus-accent-background-deep);
 }
 
 @media only screen and (max-width: 600px) {

bfrontend/src/Styles/Components/Card.scss

@@ -11,10 +11,10 @@
 
 .bar-card {
     @include card;
-    @extend .elevated;
 
     height: 32px;
     padding: 12px;
+    box-shadow: var(--bar-card-box-shadow);
     display: flex;
     align-items: center;
     justify-content: left;

bfrontend/src/Styles/Components/Containers.scss

@@ -11,9 +11,9 @@
 .sidebar {
     @include fancy-scrollbar-firefox;
     @include card;
-    @extend .no-select;
 
     background-color: var(--sidebar-background-color);
+
     display: flex;
     flex-direction: column;
     overflow: auto;
@@ -30,10 +30,17 @@
     margin: 5px;
 }
 
-.channel-message-panel {
+.invis-bar {
-    @extend .hidden-overflow;
+    display: flex;
-    @extend .col-flex-card;
+    flex-direction: column;
+    padding: 10px;
 
+    z-index: 100;
+}
+
+.channel-message-panel {
+    display: flex;
+    flex-direction: column;
     padding: 15px;
     background-color: var(--channel-view-container-color);
 }
@@ -45,12 +52,3 @@
 .hidden {
     visibility: hidden;
 }
-
-.no-select {
-    user-select: none;
-}
-
-.messages-scroll-div {
-    height: 18px;
-    visibility: hidden;
-}

bfrontend/src/Styles/Components/Message.scss

@@ -10,8 +10,6 @@
 }
 
 .no-messages-warning {
-    @extend .no-select;
-
     display: flex;
     justify-content: center;
     align-items: center;

bfrontend/src/Styles/Components/Textbox.scss

@@ -11,9 +11,7 @@
         border-radius: var(--message-box-border-radius);
         background-color: var(--message-box-color);
         height: 32px;
-        padding: 8px;
+        padding: 6px;
-        margin: 0;
-        margin-bottom: 5px;
         padding-left: 16px;
         font-size: 16px;
     }

bfrontend/src/Styles/Components/properties.scss

@@ -1,3 +0,0 @@
-.elevated {
-    box-shadow: var(--elevation-box-shadow);
-}

bfrontend/src/Styles/colors.scss

@@ -0,0 +1,34 @@
+$nord0darker: #22262e;
+$nord1darker: #282b36;
+$nord2darker: #333947;
+$nord3darker: #40495a;
+$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;
+
+$dark1: #2d2929;
+$dark2: #332f2f;
+$dark3: #393636;
+$dark4: #423f3f;
+$dark5: #4d4a4a;
+
+$light1: #999999;
+$light2: #b0b0b0;
+$light3: #c2c2c2;
+$light4: #cfcfcf;
+$light5: #d9d9d9;

bfrontend/src/Styles/root.scss

@@ -1,9 +1,14 @@
 :root {
     --background-color: hsl(230, 12%, 15%);
-    --card-accent-color: hsl(230, 12%, 18%);
-    --card-accent-color-dark: hsl(230, 12%, 12%);
     --default-text-color: hsl(0, 0%, 79%);
     --darker-text-color: hsl(0, 0%, 53%);
+    --card-accent-color: hsl(230, 12%, 18%);
+    --card-accent-color-dark: hsl(230, 12%, 12%);
+
+    --default-scrollbar-color: var(--background-color);
+
+    --focus-accent-background: var(--card-accent-color);
+    --focus-accent-background-deep: var(--card-accent-color-dark);
 
     --default-user-background: linear-gradient(
         to bottom right,
@@ -18,11 +23,9 @@
         hsl(225, 35%, 40%)
     );
 
-    --default-scrollbar-color: var(--background-color);
-
     --channel-top-bar-color-accent: var(--background-color);
     --channel-top-bar-color: var(--background-color);
-    --elevation-box-shadow: 0 1px 0 0 hsla(230, 12%, 5%, 0.3), 0 2px 0 0 hsla(230, 12%, 6%, 0.2), 0 3px 0 0 hsla(230, 12%, 7%, 0.1);
+    --bar-card-box-shadow: 0 1px 0 0 hsla(230, 12%, 5%, 0.3), 0 2px 0 0 hsla(230, 12%, 6%, 0.2), 0 3px 0 0 hsla(230, 12%, 7%, 0.1);
     --message-box-color: var(--card-accent-color);
 
     --sidebar-background-color: hsl(230, 12%, 12%);
@@ -31,9 +34,7 @@
     --channel-message-color: var(--accent-color-dark);
     --channel-view-container-color: var(--accent-color-dark);
 
-    --button-color: var(--card-accent-color-dark);
+    --button-color: var(--background-color);
-    --button-hover-background-color: var(--card-accent-color);
-    --button-selected-background-color: var(--card-accent-color);
     --channel-button-background: none;
 
     --default-border-radius: 0px;