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 ; - }); - - if (messagesView === undefined || messagesView.length <= 0) { - messagesView = ( -
- No messages yet... -
- ); - } + let messagesView = messages.map((message) => ()); + if (messagesView === undefined || messagesView.length <= 0) + messagesView = (
+ No messages yet... +
); return
{ messagesView } -
+
; } \ 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 (
-
+
{/* { (experiments.voiceSFUTesting) &&
-
+
-
+
setTextInput(target.value) }>
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 }) { /> - { user && } + { user && } 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 <> - +
+ + { (channelId) && } +
; -} \ 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) &&
dispatch({ type: "application/updatebannertext", text: undefined }) }> - { gradientBannerNotificationText } +import { useDispatch } from "react-redux"; + +export default function GradientBanner({ text }) { + const dispatch = useDispatch(); + + return (text !== undefined) &&
dispatch({ type: "application/updatebannertext", text: undefined }) }> + { text }
; } 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%);