minor visual improvements - add gradient banner back, polish some elements, combine some classes

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,28 +2,20 @@ import Message from  "../Messages/Message";
 import { useRef, useEffect } from 'react';
 
 export default function ChannelMessageView({messages}) {
-    const invisibleBottomMessageRef = useRef(null);
+    const invisibleBottomMessageRef = useRef();
 
     useEffect(() => {
-        if (invisibleBottomMessageRef && invisibleBottomMessageRef.current) {
+        invisibleBottomMessageRef.current.scrollIntoView(true);
-            invisibleBottomMessageRef.current.scrollIntoView({ behaviour: 'smooth' });
-        }
     }, [messages]);
 
-    let messagesView = messages.map((m, i) => {
+    let messagesView = messages.map((message) => (<Message key={message._id} message={message} />));
-        return <Message key={ m._id } message={ m } />;
+    if (messagesView === undefined || messagesView.length <= 0) 
-    });
+        messagesView = (<div className='no-messages-warning'>
-
+            <span>No messages yet...</span>
-    if (messagesView === undefined || messagesView.length <= 0) {
+        </div>);
-        messagesView = (
-            <div className='no-messages-warning'>
-                <span>No messages yet...</span>
-            </div>
-        );
-    }
 
     return <div className="message-list-card">
         { messagesView }
-        <div ref={ invisibleBottomMessageRef }></div>
+        <div className="messages-scroll-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">
+                <div className="bar-card-accent no-select">
                     <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="col-flex-card channel-message-panel hidden-overflow">
+                    <div className="channel-message-panel">
                         <ChannelMessageView messages={messages}></ChannelMessageView>
-                        <div className="invis-bar">
+                        <div className="col-flex-card">
                             <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,7 +4,6 @@ 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'
@@ -41,7 +40,7 @@ function App({ user }) {
                         />
 
                         <Route path="/">
-                            { user && <Sidebar /> }
+                            { user && <LoggedInMount /> }
                             <Root user={user} />
                         </Route>
                     </Switch>

bfrontend/src/Components/Main/LoggedInMount.js

@@ -1,11 +1,20 @@
 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";
 
-export default function LoggedInMount() {
+function LoggedInMount({ gradientBannerNotificationText }) {
     const { id: channelId } = useParams();
     return <>
         <Sidebar />
-        <ChannelView channelId={ channelId } />
+        <div className="col-flex-card">
+            <GradientBanner text={ gradientBannerNotificationText }/>
+            { (channelId) && <ChannelView channelId={ channelId } /> }
+        </div>
     </>;
-}
+}
+
+export default connect((state) => ({
+    gradientBannerNotificationText: state.gradientBannerNotificationText
+}))(LoggedInMount);

bfrontend/src/Components/UI/GradientBanner.js

@@ -1,5 +1,9 @@
-export default function GradientBanner() {
+import { useDispatch } from "react-redux";
-    return (gradientBannerNotificationText !== undefined) && <div className="gradient-banner-card" onClick={ () => dispatch({ type: "application/updatebannertext", text: undefined }) }>
+
-        { gradientBannerNotificationText }
+export default function GradientBanner({ text }) {
+    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 @@
-// This is a mess pls fix later
+// TODO: This is an actual, horrible mess
 export default function ProfileLink({ object, size, type, offset=true, children=null, hideName=false }) {
     let picture;
 

bfrontend/src/Styles/App.scss

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

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,17 +30,10 @@
     margin: 5px;
 }
 
-.invis-bar {
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-
-    z-index: 100;
-}
-
 .channel-message-panel {
-    display: flex;
+    @extend .hidden-overflow;
-    flex-direction: column;
+    @extend .col-flex-card;
+
     padding: 15px;
     background-color: var(--channel-view-container-color);
 }
@@ -51,4 +44,13 @@
 
 .hidden {
     visibility: hidden;
+}
+
+.no-select {
+    user-select: none;
+}
+
+.messages-scroll-div {
+    height: 18px;
+    visibility: hidden;
 }

bfrontend/src/Styles/Components/Message.scss

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

bfrontend/src/Styles/Components/Textbox.scss

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

bfrontend/src/Styles/Components/properties.scss

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

bfrontend/src/Styles/root.scss

@@ -25,7 +25,7 @@
 
     --channel-top-bar-color-accent: var(--background-color);
     --channel-top-bar-color: var(--background-color);
-    --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);
+    --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);
     --message-box-color: var(--card-accent-color);
 
     --sidebar-background-color: hsl(230, 12%, 12%);