From 850187e913cafdba7d8006a6fcec47de5cef9c81 Mon Sep 17 00:00:00 2001
From: hippoz <paperplanelive@gmail.com>
Date: Sat, 21 Aug 2021 19:53:52 +0300
Subject: [PATCH] minor visual improvements - add gradient banner back, polish
 some elements, combine some classes

---
 .../API/Gateway/globalGatewayConnection.js    |  2 +-
 .../Components/Channels/ChannelMessageView.js | 24 +++++++------------
 .../src/Components/Channels/ChannelView.js    |  6 ++---
 bfrontend/src/Components/Main/App.js          |  3 +--
 .../src/Components/Main/LoggedInMount.js      | 15 +++++++++---
 bfrontend/src/Components/UI/GradientBanner.js | 10 +++++---
 bfrontend/src/Components/UI/ProfileLink.js    |  2 +-
 bfrontend/src/Styles/App.scss                 |  7 ++----
 bfrontend/src/Styles/Components/Card.scss     |  2 +-
 .../src/Styles/Components/Containers.scss     | 24 ++++++++++---------
 bfrontend/src/Styles/Components/Message.scss  |  2 ++
 bfrontend/src/Styles/Components/Textbox.scss  |  4 +++-
 .../src/Styles/Components/properties.scss     |  3 +++
 bfrontend/src/Styles/root.scss                |  2 +-
 14 files changed, 58 insertions(+), 48 deletions(-)
 create mode 100644 bfrontend/src/Styles/Components/properties.scss

diff --git a/bfrontend/src/API/Gateway/globalGatewayConnection.js b/bfrontend/src/API/Gateway/globalGatewayConnection.js
index 346fa38..e8c2f42 100644
--- a/bfrontend/src/API/Gateway/globalGatewayConnection.js
+++ b/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);
diff --git a/bfrontend/src/Components/Channels/ChannelMessageView.js b/bfrontend/src/Components/Channels/ChannelMessageView.js
index f8a5056..f9c7f4d 100644
--- a/bfrontend/src/Components/Channels/ChannelMessageView.js
+++ b/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({ behaviour: 'smooth' });
-        }
+        invisibleBottomMessageRef.current.scrollIntoView(true);
     }, [messages]);
 
-    let messagesView = messages.map((m, i) => {
-        return <Message key={ m._id } message={ m } />;
-    });
-
-    if (messagesView === undefined || messagesView.length <= 0) {
-        messagesView = (
-            <div className='no-messages-warning'>
-                <span>No messages yet...</span>
-            </div>
-        );
-    }
+    let messagesView = messages.map((message) => (<Message key={message._id} message={message} />));
+    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 ref={ invisibleBottomMessageRef }></div>
+        <div className="messages-scroll-div" ref={ invisibleBottomMessageRef }></div>
     </div>;
 }
\ No newline at end of file
diff --git a/bfrontend/src/Components/Channels/ChannelView.js b/bfrontend/src/Components/Channels/ChannelView.js
index 59111dd..d1c2cc8 100644
--- a/bfrontend/src/Components/Channels/ChannelView.js
+++ b/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>
diff --git a/bfrontend/src/Components/Main/App.js b/bfrontend/src/Components/Main/App.js
index 35469fb..69e7a9a 100644
--- a/bfrontend/src/Components/Main/App.js
+++ b/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>
diff --git a/bfrontend/src/Components/Main/LoggedInMount.js b/bfrontend/src/Components/Main/LoggedInMount.js
index 2a897e9..c7e693d 100644
--- a/bfrontend/src/Components/Main/LoggedInMount.js
+++ b/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>
     </>;
-}
\ No newline at end of file
+}
+
+export default connect((state) => ({
+    gradientBannerNotificationText: state.gradientBannerNotificationText
+}))(LoggedInMount);
\ No newline at end of file
diff --git a/bfrontend/src/Components/UI/GradientBanner.js b/bfrontend/src/Components/UI/GradientBanner.js
index 1937b5e..a7f2cbe 100644
--- a/bfrontend/src/Components/UI/GradientBanner.js
+++ b/bfrontend/src/Components/UI/GradientBanner.js
@@ -1,5 +1,9 @@
-export default function GradientBanner() {
-    return (gradientBannerNotificationText !== undefined) && <div className="gradient-banner-card" onClick={ () => dispatch({ type: "application/updatebannertext", text: undefined }) }>
-        { gradientBannerNotificationText }
+import { useDispatch } from "react-redux";
+
+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>;
 }
diff --git a/bfrontend/src/Components/UI/ProfileLink.js b/bfrontend/src/Components/UI/ProfileLink.js
index b5f32f5..599ff67 100644
--- a/bfrontend/src/Components/UI/ProfileLink.js
+++ b/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;
 
diff --git a/bfrontend/src/Styles/App.scss b/bfrontend/src/Styles/App.scss
index 329c9e8..f124b01 100644
--- a/bfrontend/src/Styles/App.scss
+++ b/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,
-input,
-optgroup,
-select,
-textarea {
+button, input, optgroup, select, textarea {
   font-family: inherit;
   font-size: 100%;
 }
diff --git a/bfrontend/src/Styles/Components/Card.scss b/bfrontend/src/Styles/Components/Card.scss
index 217d3b5..abac853 100644
--- a/bfrontend/src/Styles/Components/Card.scss
+++ b/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;
diff --git a/bfrontend/src/Styles/Components/Containers.scss b/bfrontend/src/Styles/Components/Containers.scss
index c4b32aa..a2b6890 100644
--- a/bfrontend/src/Styles/Components/Containers.scss
+++ b/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;
-    flex-direction: column;
+    @extend .hidden-overflow;
+    @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;
 }
\ No newline at end of file
diff --git a/bfrontend/src/Styles/Components/Message.scss b/bfrontend/src/Styles/Components/Message.scss
index 472b62d..b3661b4 100644
--- a/bfrontend/src/Styles/Components/Message.scss
+++ b/bfrontend/src/Styles/Components/Message.scss
@@ -10,6 +10,8 @@
 }
 
 .no-messages-warning {
+    @extend .no-select;
+
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/bfrontend/src/Styles/Components/Textbox.scss b/bfrontend/src/Styles/Components/Textbox.scss
index 1642a04..165480f 100644
--- a/bfrontend/src/Styles/Components/Textbox.scss
+++ b/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;
     }
diff --git a/bfrontend/src/Styles/Components/properties.scss b/bfrontend/src/Styles/Components/properties.scss
new file mode 100644
index 0000000..e9572a5
--- /dev/null
+++ b/bfrontend/src/Styles/Components/properties.scss
@@ -0,0 +1,3 @@
+.elevated {
+    box-shadow: var(--elevation-box-shadow);
+}
\ No newline at end of file
diff --git a/bfrontend/src/Styles/root.scss b/bfrontend/src/Styles/root.scss
index 6988b41..30877e9 100644
--- a/bfrontend/src/Styles/root.scss
+++ b/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%);