diff --git a/bfrontend/src/Components/Auth/Login.js b/bfrontend/src/Components/Auth/Login.js index 3e53b3f..974f3d3 100644 --- a/bfrontend/src/Components/Auth/Login.js +++ b/bfrontend/src/Components/Auth/Login.js @@ -49,7 +49,7 @@ export default function Login() { } return ( -
+

setUsernameInput(target.value) } /> diff --git a/bfrontend/src/Components/Channels/ChannelButton.js b/bfrontend/src/Components/Channels/ChannelButton.js index e5b2e76..66d790d 100644 --- a/bfrontend/src/Components/Channels/ChannelButton.js +++ b/bfrontend/src/Components/Channels/ChannelButton.js @@ -6,8 +6,8 @@ import { useHistory } from 'react-router-dom'; export default function ChannelButton({ channel, selected }) { const history = useHistory(); - let buttonClasses = 'button channel-button'; - if (selected) buttonClasses += ' pressed'; + let buttonClasses = 'button button-channel'; + if (selected) buttonClasses += ' button-pressed'; const handleClick = () => { if (gatewayConnection.handshakeCompleted) { diff --git a/bfrontend/src/Components/Channels/ChannelList.js b/bfrontend/src/Components/Channels/ChannelList.js index d750ab2..8d217f9 100644 --- a/bfrontend/src/Components/Channels/ChannelList.js +++ b/bfrontend/src/Components/Channels/ChannelList.js @@ -6,9 +6,9 @@ import { connect } from 'react-redux' function ChannelList({ selectedChannelId, channels }) { if (!channels) { return ( -
+ <> -
+ ); } else { return ( diff --git a/bfrontend/src/Components/Channels/ChannelListLoader.js b/bfrontend/src/Components/Channels/ChannelListLoader.js index ebc7111..90dfcf3 100644 --- a/bfrontend/src/Components/Channels/ChannelListLoader.js +++ b/bfrontend/src/Components/Channels/ChannelListLoader.js @@ -5,39 +5,39 @@ export default function ChannelListLoader(props) { const lessThan600 = useMediaPredicate("(max-width: 600px)"); if (lessThan600) { - return ( - - - - - - + + + + + ); } else { - return ( - - - - - - + + + + + ); } diff --git a/bfrontend/src/Components/Channels/ChannelUserList.js b/bfrontend/src/Components/Channels/ChannelUserList.js new file mode 100644 index 0000000..cffe0f8 --- /dev/null +++ b/bfrontend/src/Components/Channels/ChannelUserList.js @@ -0,0 +1,25 @@ +import UserProfileButton from '../Users/UserButton'; + +import { connect } from 'react-redux'; + +function Sidebar({ channelPresenceClientList }) { + const users = [ + { username: "thgitrhiorg" }, + { username: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" }, + { username: "FDGFEGSDFHRFGHNERTYBNRNBTYJMNUM" } + ]; + + return ( +
+ { users.map((user) => ) } +
+ ) +} + +const stateToProps = (state) => { + return { + channelPresenceClientList: state?.channelPresenceClientList + }; +}; + +export default connect(stateToProps)(Sidebar); \ No newline at end of file diff --git a/bfrontend/src/Components/Channels/ChannelView.js b/bfrontend/src/Components/Channels/ChannelView.js index 2424390..621df78 100644 --- a/bfrontend/src/Components/Channels/ChannelView.js +++ b/bfrontend/src/Components/Channels/ChannelView.js @@ -1,28 +1,28 @@ -import ChannelViewLoader from './ChannelViewLoader'; +import ChannelViewLoader from '../UI/ProfileLinkLoader'; import ChannelProfile from './ChannelProfileLink'; import Message from '../Messages/Message'; import gatewayConnection from '../../API/Gateway/globalGatewayConnection'; +import ChannelUserList from "./ChannelUserList"; import { useParams } from 'react-router-dom'; import { connect, useDispatch } from 'react-redux'; import { useState, useRef, useEffect } from 'react'; -function ChannelView({ channels, messages }) { + +const ChannelView = ({ channels, messages, channel, selectedChannelId }) => { const { id } = useParams(); const [ textInput, setTextInput ] = useState(''); - const [ channel, setChannel ] = useState(); const textInputRef = useRef(null); const invisibleBottomMessageRef = useRef(null); const dispatch = useDispatch(); - const scrollToBottom = () => { + useEffect(() => { if (invisibleBottomMessageRef && invisibleBottomMessageRef.current) { invisibleBottomMessageRef.current.scrollIntoView({ behaviour: 'smooth' }); } - } - useEffect(scrollToBottom, [messages]); + }, [messages]); const handleTextboxKeydown = (e) => { if (e.key === 'Enter') { @@ -34,15 +34,11 @@ function ChannelView({ channels, messages }) { useEffect(() => { if (!channels) return; - - setChannel(channels.find(x => x._id === id)); - }, [channels, id]); - - useEffect(() => { if (!channel) return; + if (channel._id === selectedChannelId) return; dispatch({ type: 'channels/selectchannel', channelId: channel._id }); - }, [channel, dispatch]); + }, [channels, id, dispatch, channel, selectedChannelId]); if (channel) { let messagesView = messages.map(m => ); @@ -50,49 +46,57 @@ function ChannelView({ channels, messages }) { if (messagesView === undefined || messagesView.length <= 0) { messagesView = (
- A bit empty in here... + Wow, such empty!
); } return ( -
-
- +
+
+
-
- { messagesView } -
-
-
- setTextInput(target.value) }> + +
+
+
+ { messagesView } +
+
+ +
+ setTextInput(target.value) }> +
+
+
) } else { return ( -
-
+
+
-
+
-
+
) } - -} +}; const stateToProps = (state, ownProps) => { const channelId = ownProps.match.params.id; // NOTE(hippoz): kind of a hack, but it works and idk if theres any other solution return { channels: state?.channels, + channel: state?.channels?.find(x => x._id === channelId), messages: state?.messages[channelId] || [], + selectedChannelId: state?.selectedChannelId, }; }; diff --git a/bfrontend/src/Components/Main/App.js b/bfrontend/src/Components/Main/App.js index 5c508c6..3799f27 100644 --- a/bfrontend/src/Components/Main/App.js +++ b/bfrontend/src/Components/Main/App.js @@ -33,12 +33,21 @@ function App({ user }) {
- { user && } - + { + return ( + <> + + + + ); + }} + /> + { user && } diff --git a/bfrontend/src/Components/Messages/Message.js b/bfrontend/src/Components/Messages/Message.js index a2a1f98..c2c56a2 100644 --- a/bfrontend/src/Components/Messages/Message.js +++ b/bfrontend/src/Components/Messages/Message.js @@ -3,8 +3,8 @@ import UserProfileLink from '../Users/UserProfileLink'; export default function Message({ message }) { return (
-

a

 - { message.content } + + { message.content }
); } \ No newline at end of file diff --git a/bfrontend/src/Components/UI/ProfileLink.js b/bfrontend/src/Components/UI/ProfileLink.js index e1e3628..5b57d45 100644 --- a/bfrontend/src/Components/UI/ProfileLink.js +++ b/bfrontend/src/Components/UI/ProfileLink.js @@ -1,9 +1,9 @@ import defaultProfile from '../../Content/Images/defaultprofile_256px-256px.png' -export default function ProfileLink({ object, size=32, type, offset=true, children=null }) { +export default function ProfileLink({ object, size, type, offset=true, children=null }) { let picture; - if (size !== 0) { + if (size !== "0") { // TODO: Make a debug error message for then the size does not exist const pictureClass = `profile-picture profile-picture-${size}`; @@ -28,4 +28,4 @@ export default function ProfileLink({ object, size=32, type, offset=true, childr { bottomInfo }
); -} \ No newline at end of file +}; \ No newline at end of file diff --git a/bfrontend/src/Components/Channels/ChannelViewLoader.js b/bfrontend/src/Components/UI/ProfileLinkLoader.js similarity index 85% rename from bfrontend/src/Components/Channels/ChannelViewLoader.js rename to bfrontend/src/Components/UI/ProfileLinkLoader.js index 535c8a0..63eaa85 100644 --- a/bfrontend/src/Components/Channels/ChannelViewLoader.js +++ b/bfrontend/src/Components/UI/ProfileLinkLoader.js @@ -7,8 +7,8 @@ export default function ChannelViewLoader(props) { width={100} height={46} viewBox="0 0 100 46" - backgroundColor="#434c5e" - foregroundColor="#4c566a" + backgroundColor="#423f3f" + foregroundColor="#4d4a4a" {...props} > diff --git a/bfrontend/src/Components/UI/Sidebar.js b/bfrontend/src/Components/UI/Sidebar.js index adaf3a5..65ffff5 100644 --- a/bfrontend/src/Components/UI/Sidebar.js +++ b/bfrontend/src/Components/UI/Sidebar.js @@ -1,13 +1,15 @@ import ChannelList from '../Channels/ChannelList'; import UserProfileLink from '../Users/UserProfileLink'; +import ProfileLinkLoader from "../UI/ProfileLinkLoader"; import { connect } from 'react-redux'; function Sidebar({ user }) { return ( -
-
- +
+
+ { user && } + { !user && }
diff --git a/bfrontend/src/Components/Users/UserButton.js b/bfrontend/src/Components/Users/UserButton.js new file mode 100644 index 0000000..ea6fca4 --- /dev/null +++ b/bfrontend/src/Components/Users/UserButton.js @@ -0,0 +1,19 @@ +import UserProfile from './UserProfileLink'; + +import { useHistory } from 'react-router-dom'; + +export default function ChannelUserButton({ user }) { + const history = useHistory(); + + let buttonClasses = 'button button-channel'; + + const handleClick = () => { + history.push(`/user/${user._id}`); + }; + + return ( + + ); +} \ No newline at end of file diff --git a/bfrontend/src/Content/Images/defaultprofile_256px-256px.png b/bfrontend/src/Content/Images/defaultprofile_256px-256px.png index 0ace865..3851142 100644 Binary files a/bfrontend/src/Content/Images/defaultprofile_256px-256px.png and b/bfrontend/src/Content/Images/defaultprofile_256px-256px.png differ diff --git a/bfrontend/src/Styles/App.scss b/bfrontend/src/Styles/App.scss index e2fe908..36af9ec 100644 --- a/bfrontend/src/Styles/App.scss +++ b/bfrontend/src/Styles/App.scss @@ -1,57 +1,13 @@ -$nord0darker: #22262e; -$nord1darker: #282b36; -$nord2darker: #333947; -$nord3darker: #40495a; -$nord4darker: #9da2ad; +@import "./colors.scss"; +@import "./root.scss"; +@import "./mixins.scss"; -$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: #{$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: #{$nord1darker}; - --accent-color-light: #{$nord2darker}; - --accent-color-very-light: #{$nord3darker}; - - --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(--background-color); - --channel-message-color: var(--accent-color-dark); - - --button-color: var(--accent-color-dark); - --button-hover-color: var(--accent-color-light); - - --default-transition-duration: 50ms; - - --default-border-radius: 0px; - --default-button-border-radius: 0px; - --channel-message-border-radius: 0px; - --bar-cards-border-radius: 0px; - --channel-button-border-radius: 4px; -} +@import "./Components/Card.scss"; +@import "./Components/Button.scss"; +@import "./Components/Containers.scss"; +@import "./Components/ProfileLink.scss"; +@import "./Components/Message.scss"; +@import "./Components/Textbox.scss"; ::-webkit-scrollbar { width: 0px; @@ -59,230 +15,15 @@ $nord15: #B48EAD; ::-webkit-scrollbar-track { background: var(--accent-color-light); } - ::-webkit-scrollbar-thumb { background: var(--default-main-card-color); } -@mixin card { - padding: 0px; - margin: 0px; - background-color: var(--default-main-card-color); - border-radius: var(--default-border-radius); - box-shadow: 0px 3px 5px var(--card-box-shadow-color); -} - -@mixin fancy-scrollbar-firefox { - scrollbar-width: none; - scrollbar-color: var(--default-main-card-color) var(--accent-color-light); -} - body { - margin: 0px; - padding: 0px; - color: var(--default-text-color); background-color: var(--background-color); font-family: Noto Sans,-apple-system,BlinkMacSystemFont,sans-serif; -} -.main-display { - padding: 0px; margin: 0px; - display: flex; - background-color: var(--background-color); - min-height: 100vh; - max-height: 100vh; - flex-direction: row; -} - -.card { - @include card; - - &.bar-card { - background-color: var(--channel-top-bar-color); - min-height: 50px; - padding: 5px; - - border-radius: var(--bar-cards-border-radius); - display: flex; - align-items: center; - justify-content: left; - - font-size: large; - - z-index: 99; - } - - &.bar-card-bottom { - background-color: var(--channel-bottom-text-bar-color); - box-shadow: 0px -3px 5px var(--card-box-shadow-color); - - min-height: 40px; - - border-radius: var(--bar-cards-border-radius); - display: flex; - - z-index: 100; - } - - &.message-list-card { - @include fancy-scrollbar-firefox; - border-radius: 0px; - flex-grow: 1; - box-shadow: none; - overflow: auto; - background-color: var(--channel-message-list-background-color); - } -} - -.main-card { - @include card; - - box-shadow: none; - - &.main-content-card { - flex-grow: 1; - display: flex; - flex-direction: column; - } -} - -.button { - @include card; - - padding: 5px; - margin: 5px; - border: 0px; - background-color: var(--button-color); - color: var(--default-text-color); - cursor: pointer; - // transition: background-color, var(--default-transition-duration); - border-radius: var(--default-button-border-radius); - min-height: 25px; - - &.channel-button { - min-width: 200px; - max-width: 200px; - - min-height: 40px; - max-height: 100px; - - margin: 4px; - border-radius: var(--channel-button-border-radius); - } - - &.pressed { - background-color: var(--accent-color-very-light); - } -} - -.button:hover:not(.pressed) { - background-color: var(--accent-color-light); -} - -.channel-list { - display: flex; - flex-direction: column; - word-wrap: break-word; -} - -.channel-list-container { - @include fancy-scrollbar-firefox; - - overflow: auto; - overflow-x: hidden; - - background-color: var(--channel-list-background-color); -} - -.profile-picture { - border-radius: 50%; - margin: 5px; - width: 32px; - height: 32px; - - &.profile-picture-8 { - width: 8px; - height: 8px; - } - - &.profile-picture-16 { - width: 16px; - height: 16px; - } - - &.profile-picture-32 { - width: 32px; - height: 32px; - } - - &.profile-picture-40 { - width: 40px; - height: 40px; - } - - &.profile-picture-64 { - width: 64px; - height: 64px; - } -} - -.profile-link { - display: flex; - flex-direction: row; - align-items: center; - justify-content: left; - - &.profile-link-offset-text { - align-items: unset; - text-align: start; - } -} - -.profile-username { - font-weight: bold; -} - -.message { - @include card; - - box-shadow: none; - - display: flex; - flex-direction: column; - margin-top: 5px; - margin-bottom: 5px; - margin-left: 5px; - margin-right: 5px; - padding: 5px; - border-radius: var(--channel-message-border-radius); - background-color: var(--background-color); -} - -.text-input { - @include card; - - margin: 5px; - padding: 5px; - border: none; - color: var(--default-text-color); - flex-grow: 1; -} - -.no-messages-warning { - text-align: center; - padding: 50px; - color: var(--darker-text-color); -} - -.unread-indicator { - float: right; -} - -@media only screen and (max-width: 600px) { - .button.channel-button { - min-width: 100px; - max-width: 100px; - } + padding: 0px; } \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/Button.scss b/bfrontend/src/Styles/Components/Button.scss new file mode 100644 index 0000000..9beccc8 --- /dev/null +++ b/bfrontend/src/Styles/Components/Button.scss @@ -0,0 +1,43 @@ +.button { + @include card; + + background-color: var(--button-color); + color: var(--default-text-color); + + border-radius: var(--default-button-border-radius); + cursor: pointer; + padding: 5px; + margin: 5px; + border: 0px; + min-height: 25px; + + &-channel { + @extend .button; + + box-shadow: none; + + border-radius: var(--channel-button-border-radius); + min-width: 200px; + max-width: 250px; + min-height: 40px; + margin: 4px; + padding: 2px; + } + + &-pressed { + @extend .button; + + background-color: var(--accent-color-very-light); + } +} + +.button:hover:not(.button-pressed) { + background-color: var(--accent-color-light); +} + +@media only screen and (max-width: 600px) { + .button.channel-button { + min-width: 100px; + max-width: 100px; + } +} \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/Card.scss b/bfrontend/src/Styles/Components/Card.scss new file mode 100644 index 0000000..416064f --- /dev/null +++ b/bfrontend/src/Styles/Components/Card.scss @@ -0,0 +1,67 @@ +@mixin card { + padding: 0px; + margin: 0px; + background-color: var(--default-main-card-color); + border-radius: var(--default-border-radius); + box-shadow: 0px 1px 1px var(--card-box-shadow-color); +} + + + +.card { + @include card; +} + +.bar-card { + @include card; + + background-color: var(--channel-top-bar-color); + box-shadow: 0 1px 1px var(--card-box-shadow-color); + + height: 32px; + padding: 8px; + border-radius: var(--bar-cards-border-radius); + display: flex; + align-items: center; + justify-content: left; + font-size: medium; + z-index: 100; +} + +.message-list-card { + @include card; + @include fancy-scrollbar-firefox; + + background-color: var(--channel-message-list-background-color); + box-shadow: none; + + border-radius: 0px; + flex-grow: 1; + overflow: auto; +} + +.main-card { + @include card; + + box-shadow: none; +} + +.col-flex-card { + @include card; + + box-shadow: none; + + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.row-flex-card { + @include card; + + box-shadow: none; + + flex-grow: 10; + display: flex; + flex-direction: row; +} \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/Containers.scss b/bfrontend/src/Styles/Components/Containers.scss new file mode 100644 index 0000000..1ab0efa --- /dev/null +++ b/bfrontend/src/Styles/Components/Containers.scss @@ -0,0 +1,38 @@ +.main-display { + padding: 0px; + margin: 0px; + display: flex; + background-color: var(--background-color); + min-height: 100vh; + max-height: 100vh; + flex-direction: row; +} + +.sidebar { + @include fancy-scrollbar-firefox; + + background-color: var(--channel-list-background-color); + + display: flex; + flex-direction: column; + overflow: auto; + overflow-x: hidden; +} + +.channel-list { + display: flex; + flex-direction: column; + text-overflow: ellipsis; + white-space: nowrap; + overflow-x: hidden; + flex-grow: 10; + margin: 5px; +} + +.invis-bar { + display: flex; + flex-direction: column; + padding: 10px; + + z-index: 100; +} \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/Message.scss b/bfrontend/src/Styles/Components/Message.scss new file mode 100644 index 0000000..0b06440 --- /dev/null +++ b/bfrontend/src/Styles/Components/Message.scss @@ -0,0 +1,23 @@ +.message { + @include card; + + box-shadow: none; + + display: flex; + flex-direction: row; + margin: 3px; + margin-left: 10px; + padding: 1px; + border-radius: var(--channel-message-border-radius); + background-color: var(--background-color); +} + +.no-messages-warning { + text-align: center; + padding: 50px; + color: var(--darker-text-color); +} + +.unread-indicator { + float: right; +} \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/ProfileLink.scss b/bfrontend/src/Styles/Components/ProfileLink.scss new file mode 100644 index 0000000..53b0245 --- /dev/null +++ b/bfrontend/src/Styles/Components/ProfileLink.scss @@ -0,0 +1,48 @@ +.profile-picture { + border-radius: 50%; + margin: 5px; + width: 32px; + height: 32px; + + &.profile-picture-8 { + width: 8px; + height: 8px; + } + + &.profile-picture-16 { + width: 16px; + height: 16px; + } + + &.profile-picture-32 { + width: 32px; + height: 32px; + } + + &.profile-picture-40 { + width: 40px; + height: 40px; + } + + &.profile-picture-64 { + width: 64px; + height: 64px; + } +} + +.profile-link { + display: flex; + align-items: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow-x: hidden; + + &.profile-link-offset-text { + align-items: unset; + text-align: start; + } +} + +.profile-username { + font-weight: 550; +} \ No newline at end of file diff --git a/bfrontend/src/Styles/Components/Textbox.scss b/bfrontend/src/Styles/Components/Textbox.scss new file mode 100644 index 0000000..8f54f7d --- /dev/null +++ b/bfrontend/src/Styles/Components/Textbox.scss @@ -0,0 +1,15 @@ +.text-input { + @include card; + + margin: 5px; + padding: 5px; + border: none; + color: var(--default-text-color); + flex-grow: 1; + + &.message-input { + border-radius: var(--message-box-border-radius); + background-color: var(--accent-color-dark); + height: 24px; + } +} \ No newline at end of file diff --git a/bfrontend/src/Styles/colors.scss b/bfrontend/src/Styles/colors.scss new file mode 100644 index 0000000..f39dead --- /dev/null +++ b/bfrontend/src/Styles/colors.scss @@ -0,0 +1,34 @@ +$nord0darker: #22262e; +$nord1darker: #282b36; +$nord2darker: #333947; +$nord3darker: #40495a; +$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; + +$dark1: #2d2929; +$dark2: #332f2f; +$dark3: #393636; +$dark4: #423f3f; +$dark5: #4d4a4a; + +$light1: #999999; +$light2: #b0b0b0; +$light3: #c2c2c2; +$light4: #cfcfcf; +$light5: #d9d9d9; \ No newline at end of file diff --git a/bfrontend/src/Styles/mixins.scss b/bfrontend/src/Styles/mixins.scss new file mode 100644 index 0000000..22f9e70 --- /dev/null +++ b/bfrontend/src/Styles/mixins.scss @@ -0,0 +1,4 @@ +@mixin fancy-scrollbar-firefox { + scrollbar-width: none; + scrollbar-color: var(--default-main-card-color) var(--accent-color-light); +} \ No newline at end of file diff --git a/bfrontend/src/Styles/root.scss b/bfrontend/src/Styles/root.scss new file mode 100644 index 0000000..5f7b189 --- /dev/null +++ b/bfrontend/src/Styles/root.scss @@ -0,0 +1,32 @@ +:root { + --background-color: #{$dark1}; + + --default-main-card-color: var(--background-color); + --card-box-shadow-color:#1f1c1c; + + --default-text-color: #{$light3}; + --darker-text-color: #{$light1}; + + --accent-color-dark: #{$dark2}; + --accent-color-light: #{$dark3}; + --accent-color-very-light: #{$dark4}; + + --channel-top-bar-color: var(--accent-color-light); + --channel-bottom-text-bar-color: var(--accent-color-light); + + --channel-list-background-color: var(--accent-color-dark); + --channel-message-list-background-color: var(--background-color); + --channel-message-color: var(--accent-color-dark); + + --button-color: var(--accent-color-dark); + --button-hover-color: var(--accent-color-light); + + --default-transition-duration: 50ms; + + --default-border-radius: 0px; + --default-button-border-radius: 0px; + --channel-message-border-radius: 0px; + --bar-cards-border-radius: 0px; + --channel-button-border-radius: 4px; + --message-box-border-radius: 4px; +} \ No newline at end of file