From 57e72d24c7d336ffefa39ebc669ecd7b5b71191f Mon Sep 17 00:00:00 2001 From: hippoz Date: Tue, 9 Feb 2021 18:35:06 +0200 Subject: [PATCH] change colors and redesign a few elements, also fix a few bugs --- .../Components/Categories/CategoryButton.js | 9 +-- .../src/Components/Categories/CategoryView.js | 35 ++++++--- bfrontend/src/Components/Messages/Message.js | 2 +- bfrontend/src/Components/UI/Sidebar.js | 18 ++++- .../src/Components/Users/UserProfileLink.js | 2 +- bfrontend/src/Styles/App.scss | 78 ++++++++++++++----- 6 files changed, 101 insertions(+), 43 deletions(-) diff --git a/bfrontend/src/Components/Categories/CategoryButton.js b/bfrontend/src/Components/Categories/CategoryButton.js index fee5bb8..e53fd5f 100644 --- a/bfrontend/src/Components/Categories/CategoryButton.js +++ b/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 ( ); } \ No newline at end of file diff --git a/bfrontend/src/Components/Categories/CategoryView.js b/bfrontend/src/Components/Categories/CategoryView.js index 53ca5a0..01c192b 100644 --- a/bfrontend/src/Components/Categories/CategoryView.js +++ b/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 => ); + + if (messagesView === undefined || messagesView.length <= 0) { + messagesView = ( +
+ A bit empty in here... +
+ ); + } + return (
- { messages.map(m => ) } + { messagesView }
diff --git a/bfrontend/src/Components/Messages/Message.js b/bfrontend/src/Components/Messages/Message.js index f7b4336..dfd7d5f 100644 --- a/bfrontend/src/Components/Messages/Message.js +++ b/bfrontend/src/Components/Messages/Message.js @@ -3,7 +3,7 @@ import UserProfileLink from '../Users/UserProfileLink'; export default function Message({ message }) { return (
- + { message.content }
); diff --git a/bfrontend/src/Components/UI/Sidebar.js b/bfrontend/src/Components/UI/Sidebar.js index 8e1f1c1..6c8e453 100644 --- a/bfrontend/src/Components/UI/Sidebar.js +++ b/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 (
+
+ +
) -} \ No newline at end of file +} + +const stateToProps = (state) => { + return { + user: state?.user + }; +}; + +export default connect(stateToProps)(Sidebar); \ No newline at end of file diff --git a/bfrontend/src/Components/Users/UserProfileLink.js b/bfrontend/src/Components/Users/UserProfileLink.js index 1618005..7b29322 100644 --- a/bfrontend/src/Components/Users/UserProfileLink.js +++ b/bfrontend/src/Components/Users/UserProfileLink.js @@ -19,7 +19,7 @@ export default function UserProfileLink({ user, size }) { } return ( -
+
{ picture } { user.username }
diff --git a/bfrontend/src/Styles/App.scss b/bfrontend/src/Styles/App.scss index 23aba47..aef0763 100644 --- a/bfrontend/src/Styles/App.scss +++ b/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; - } -} +} \ No newline at end of file