hippoz/brainlet-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: hippoz:f09062a68060a6bfce56b6dda34cc56c783c261f
Branches Tags
hippoz:master
..
compare: hippoz:6517ac605bf66aac6bfe3c438de078cc49fbdcba
Branches Tags
hippoz:master

No commits in common. "f09062a68060a6bfce56b6dda34cc56c783c261f" and "6517ac605bf66aac6bfe3c438de078cc49fbdcba" have entirely different histories.
f09062a680 ... 6517ac605b

11 changed files with 28 additions and 43 deletions
Show stats Expand all files Collapse all files

13
bfrontend/src/Components/Channels/ChannelUserList.js
View file

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

4
bfrontend/src/Components/Channels/ChannelView.js
View file

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

2
bfrontend/src/Components/Messages/Message.js
View file

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

2
bfrontend/src/Components/UI/Sidebar.js
View file

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

4
bfrontend/src/Global/store.js
View file

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

7
bfrontend/src/Styles/Components/Button.scss
View file

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

9
bfrontend/src/Styles/Components/Card.scss
View file

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

4
bfrontend/src/Styles/Components/Containers.scss
View file

@ -36,7 +36,3 @@
z-index: 100;
}
.channel-view {
background-color: var(--channel-view-container-color);
}

2
bfrontend/src/Styles/Components/Message.scss
View file

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

6
bfrontend/src/Styles/Components/Textbox.scss
View file

@ -1,7 +1,7 @@
.text-input {
@include card;
margin: 1px;
margin: 5px;
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(--message-box-color);
height: 32px;
background-color: var(--accent-color-dark);
height: 24px;
}
}

18
bfrontend/src/Styles/root.scss
View file

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