organize files and overhaul ui

bfrontend/src/Components/Channels/ChannelUserList.js

@@ -2,16 +2,17 @@ import UserProfileButton from '../Users/UserButton';
 
 import { connect } from 'react-redux';
 
-function Sidebar({ channelPresenceClientList }) {
+function ChannelUserList({ channelPresenceClientList }) {
     const users = [
-        { username: "thgitrhiorg" },
+        { username: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", _id: "a" },
-        { username: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" },
+        { username: "FDGFEGSDFHRFGHNERTYBNRNBTYJMNUM", _id: "b" }
-        { username: "FDGFEGSDFHRFGHNERTYBNRNBTYJMNUM" }
     ];
 
     return (
         <div className="main-card sidebar">
-            { users.map((user) => <UserProfileButton user={ user }></UserProfileButton>) }
+            <div className="channel-list">
+                { users.map((user) => <UserProfileButton key={ user._id } user={ user } />) }
+            </div>
         </div>
     )
 }
@@ -22,4 +23,4 @@ const stateToProps = (state) => {
     };
 };
 
-export default connect(stateToProps)(Sidebar);
+export default connect(stateToProps)(ChannelUserList);

bfrontend/src/Components/Channels/ChannelView.js

@@ -53,12 +53,12 @@ const ChannelView = ({ channels, messages, channel, selectedChannelId }) => {
 
         return (
             <div className="col-flex-card">
-                <div className="bar-card">
+                <div className="bar-card-accent">
                     <ChannelProfile channel={ channel } size="24" />
                 </div>
 
                 <div className="main-card row-flex-card">
-                    <div className="col-flex-card">
+                    <div className="col-flex-card channel-view">
                         <div className="message-list-card">
                             { messagesView }
                             <div ref={ invisibleBottomMessageRef }></div>

bfrontend/src/Components/Messages/Message.js

@@ -4,7 +4,7 @@ export default function Message({ message }) {
     return (
         <div className="message">
             <UserProfileLink size="0" user={ message.author }></UserProfileLink>
-            <span style={ {"padding-left": "5px"} }>{ message.content }</span>
+            <span style={ {paddingLeft: "5px"} }>{ message.content }</span>
         </div>
     );
 }

bfrontend/src/Components/UI/Sidebar.js

@@ -9,7 +9,7 @@ function Sidebar({ user }) {
         <div className="main-card sidebar">
             <div className="bar-card">
                 { user && <UserProfileLink user={ user } /> }
-                { !user && <ProfileLinkLoader></ProfileLinkLoader> }
+                { !user && <ProfileLinkLoader /> }
             </div>
             <ChannelList />
         </div>

bfrontend/src/Global/store.js

@@ -42,8 +42,8 @@ const reducer = (state = intitialState, payload) => {
                 ...state,
                 messages: {
                     ...state.messages,
-                    [payload.message.channel._id]: [
+                    [payload.message.channel_id]: [
-                        ...state.messages[payload.message.channel._id] || [],
+                        ...state.messages[payload.message.channel_id] || [],
                         payload.message
                     ]
                 }

bfrontend/src/Styles/Components/Button.scss

@@ -17,8 +17,7 @@
         box-shadow: none;
 
         border-radius: var(--channel-button-border-radius);
-        min-width: 200px;
+        width: 200px;
-        max-width: 250px;
         min-height: 40px;
         margin: 4px;
         padding: 2px;
@@ -27,12 +26,12 @@
     &-pressed {
         @extend .button;
 
-        background-color: var(--accent-color-very-light);
+        background-color: var(--button-selected-color);
     }
 }
 
 .button:hover:not(.button-pressed) {
-    background-color: var(--accent-color-light);
+    background-color: var(--button-hover-color);
 }
 
 @media only screen and (max-width: 600px) {

bfrontend/src/Styles/Components/Card.scss

@@ -16,7 +16,8 @@
     @include card;
 
     background-color: var(--channel-top-bar-color);
-    box-shadow: 0 1px 1px var(--card-box-shadow-color);
+    // box-shadow: 0 8px 6px -6px black;
+    box-shadow: 1px 1px 1px -0px var(--card-box-shadow-color);
 
     height: 32px;
     padding: 8px;
@@ -26,6 +27,12 @@
     justify-content: left;
     font-size: medium;
     z-index: 100;
+
+    &-accent {
+        @extend .bar-card;
+
+        background-color: var(--channel-top-bar-color-accent);
+    }
 }
     
 .message-list-card {

bfrontend/src/Styles/Components/Containers.scss

@@ -35,4 +35,8 @@
     padding: 10px;
 
     z-index: 100;
+}
+
+.channel-view {
+    background-color: var(--channel-view-container-color);
 }

bfrontend/src/Styles/Components/Message.scss

@@ -9,7 +9,7 @@
     margin-left: 10px;
     padding: 1px;
     border-radius: var(--channel-message-border-radius);
-    background-color: var(--background-color);
+    background-color: var(--channel-message-color);
 }
 
 .no-messages-warning {

bfrontend/src/Styles/Components/Textbox.scss

@@ -1,7 +1,7 @@
 .text-input {
     @include card;
 
-    margin: 5px;
+    margin: 1px;
     padding: 5px;
     border: none;
     color: var(--default-text-color);
@@ -9,7 +9,7 @@
 
     &.message-input {
         border-radius: var(--message-box-border-radius);
-        background-color: var(--accent-color-dark);
+        background-color: var(--message-box-color);
-        height: 24px;
+        height: 32px;
     }
 }

bfrontend/src/Styles/root.scss

@@ -2,7 +2,7 @@
     --background-color: #{$dark1};
 
     --default-main-card-color: var(--background-color);
-    --card-box-shadow-color:#1f1c1c;
+    --card-box-shadow-color: #111010be;
 
     --default-text-color: #{$light3};
     --darker-text-color: #{$light1};
@@ -11,15 +11,19 @@
     --accent-color-light: #{$dark3};
     --accent-color-very-light: #{$dark4};
 
-    --channel-top-bar-color: var(--accent-color-light);
+    --channel-top-bar-color-accent: var(--accent-color-light);
-    --channel-bottom-text-bar-color: var(--accent-color-light);
+    --channel-top-bar-color: var(--background-color);
+    --message-box-color: var(--accent-color-light);
+    --channel-top-bar-border-color: var(--accent-color-dark);
 
-    --channel-list-background-color: var(--accent-color-dark);
+    --channel-list-background-color: var(--background-color);
-    --channel-message-list-background-color: var(--background-color);
+    --channel-message-list-background-color: var(--accent-color-dark);
     --channel-message-color: var(--accent-color-dark);
+    --channel-view-container-color: var(--accent-color-dark);
 
-    --button-color: var(--accent-color-dark);
+    --button-color: var(--background-color);
-    --button-hover-color: var(--accent-color-light);
+    --button-hover-color: var(--accent-color-dark);
+    --button-selected-color: var(--accent-color-light);
 
     --default-transition-duration: 50ms;