bfrontend/src/API/Gateway/GatewayConnection.js

@@ -14,8 +14,7 @@ const opcodes = {
     22: { name: "EVENT_VOICE_ASSIGN_SERVER", data: "JSON" },
     23: { name: "ACTION_VOICE_CONNECTION_REQUEST", data: "JSON" },
     24: { name: "EVENT_VOICE_CONNECTION_ANSWER", data: "JSON" },
-    25: { name: "EVENT_RENEGOTIATE_REQUIRED", data: "JSON" },
+    25: { name: "EVENT_RENEGOTIATE_REQUIRED", data: "JSON" }
-    26: { name: "EVENT_TRACK_NOTIFICATION", data: "JSON" }
 };
 
 const opcodeSeparator = "@";
@@ -99,7 +98,7 @@ GatewayConnection.prototype.connect = function(token) {
                 break;
             }
             case "EVENT_VOICE_CONNECTION_ANSWER": {
-                if (!this.webrtcConnection) throw new Error("rtc: got remote answer without local connection");
+                if (!this.webrtcConnection) throw new Error("rtc: got remote answer without local offer");
                 if (this.webrtcConnection.signalingState === "stable") {
                     logRtc("Server sent answer, but we were in stable state");
                     return;
@@ -114,7 +113,7 @@ GatewayConnection.prototype.connect = function(token) {
                 break;
             }
             case "EVENT_RENEGOTIATE_REQUIRED": {
-                if (!this.webrtcConnection) throw new Error("rtc: got remote EVENT_RENEGOTIATE_REQUIRED without local connection");
+                if (!this.webrtcConnection) throw new Error("rtc: got remote EVENT_RENEGOTIATE_REQUIRED without local offer");
                 
                 logRtc("Server requested renegotiation");
 
@@ -122,12 +121,6 @@ GatewayConnection.prototype.connect = function(token) {
 
                 break;
             }
-            case "EVENT_TRACK_NOTIFICATION": {
-                if (!this.webrtcConnection) throw new Error("rtc: got remote EVENT_TRACK_NOTIFICATION without local connection");
-                this.webrtcConnection.addTransceiver(packet.data.kind);
-
-                break;
-            }
             default: {
                 logGateway("Got unknown packet", message.data);
                 break;

bfrontend/src/Components/Messages/Message.js

@@ -3,8 +3,8 @@ import UserProfileLink from '../Users/UserProfileLink';
 export default function Message({ message }) {
     return (
         <div className="message">
-            <UserProfileLink size="0" user={ message.author } />
+            <UserProfileLink size="0" user={ message.author }></UserProfileLink>
-            <span className="message-content">{ message.content }</span>
+            <span style={ {paddingLeft: "5px"} }>{ message.content }</span>
         </div>
     );
 }

bfrontend/src/Components/UI/ProfileLink.js

@@ -1,6 +1,5 @@
 import defaultProfile from '../../Content/Images/defaultprofile_256px-256px.png'
 
-// This is a mess pls fix later
 export default function ProfileLink({ object, size, type, offset=true, children=null }) {
     let picture;
 
@@ -12,16 +11,13 @@ export default function ProfileLink({ object, size, type, offset=true, children=
             // Not actually implemented on the server and can be unsafe, this is just futureproofing
             picture = <img className={ pictureClass } src={ object.picture } alt="Profile"></img>
         } else {
-            picture = <div className={`profile-picture default-${type}`} alt="Profile">
+            picture = <img className={ pictureClass } src={ defaultProfile } alt="Profile"></img>
-                <span className={`default-${type}-styled-text`}>{ (type === "user") ? "@" : "#" }</span>
-            </div>
         }
     } else {
         picture = null;
     }
 
-    let classes = offset ? 'profile-link profile-link-offset-text' : 'profile-link';
+    const classes = offset ? 'profile-link profile-link-offset-text' : 'profile-link';
-    if (type === "user") classes += " darker-text";
     const title = type === 'channel' ? object.title : object.username;
     const bottomInfo = offset ? children : null;
 

bfrontend/src/Components/UI/Sidebar.js

@@ -7,9 +7,7 @@ import { connect } from 'react-redux';
 function Sidebar({ user }) {
     return (
         <div className="main-card sidebar">
-            <div className="bar-card" style={{
+            <div className="bar-card">
-                color: "var(--darker-text-color)"
-            }}>
                 { user && <UserProfileLink user={ user } /> }
                 { !user && <ProfileLinkLoader /> }
             </div>

bfrontend/src/Styles/App.scss

@@ -27,8 +27,4 @@ body {
     max-height: 100vh;
     margin: 0px;
     padding: 0px;
-}
-
-* {
-    font-size: 18px !important;
 }

bfrontend/src/Styles/Components/Button.scss

@@ -9,25 +9,24 @@
     padding: 5px;
     margin: 5px;
     border: 0px;
-    flex-shrink: 0;
+    min-height: 25px;
 
     &-channel {
         @extend .button;
 
         box-shadow: none;
+
         border-radius: var(--channel-button-border-radius);
         width: 200px;
         min-height: 40px;
         margin: 4px;
         padding: 2px;
-        color: var(--darker-text-color);
     }
 
     &-pressed {
         @extend .button;
 
         background-color: var(--button-selected-color);
-        color: var(--default-text-color);
     }
 }
 

bfrontend/src/Styles/Components/Card.scss

@@ -16,9 +16,12 @@
     @include card;
 
     background-color: var(--channel-top-bar-color);
+    // box-shadow: 0 8px 6px -6px black;
+    box-shadow: var(--card-box-shadow-color);
+
     height: 32px;
     padding: 8px;
-    border-bottom: var(--bar-card-border-bottom);
+    border-radius: var(--bar-cards-border-radius);
     display: flex;
     align-items: center;
     justify-content: left;

bfrontend/src/Styles/Components/Containers.scss

@@ -17,7 +17,6 @@
     flex-direction: column;
     overflow: auto;
     overflow-x: hidden;
-    min-width: 230px;
 }
 
 .channel-list {

bfrontend/src/Styles/Components/Message.scss

@@ -6,7 +6,7 @@
     display: flex;
     flex-direction: row;
     margin: 3px;
-    margin-left: 15px;
+    margin-left: 10px;
     padding: 1px;
     border-radius: var(--channel-message-border-radius);
     background-color: var(--channel-message-color);
@@ -20,9 +20,4 @@
 
 .unread-indicator {
     float: right;
-}
-
-.message-content {
-    padding-left: 6px;
-    text-rendering: "optimizeLegibility";
 }

bfrontend/src/Styles/Components/ProfileLink.scss

@@ -1,32 +1,9 @@
 .profile-picture {
     border-radius: 50%;
-    flex-shrink: 0;
     margin: 5px;
     width: 32px;
     height: 32px;
 
-    &.default-channel {
-        display: flex;
-        align-items: center; 
-        justify-content: center;
-        background: linear-gradient(
-            hsl(225, 80%, 50%),
-            hsl(299, 80%, 50%)
-        );
-        color: var(--default-text-color);
-    }
-
-    &.default-user {
-        display: flex;
-        align-items: center; 
-        justify-content: center;
-        background: linear-gradient(
-            hsl(9, 100%, 62%),
-            hsl(327, 100%, 62%)
-        );
-        color: var(--default-text-color);
-    }
-
     &.profile-picture-8 {
         width: 8px;
         height: 8px;
@@ -67,21 +44,5 @@
 }
 
 .profile-username {
-    font-weight: 500;
+    font-weight: 550;
-    font-size: 1rem;
-    line-height: 1.256rem;
-}
-
-.darker-text {
-    color: var(--darker-text-color);
-}
-
-.default-channel-styled-text {
-    font-size: 24px !important;
-    user-select: none;
-}
-
-.default-user-styled-text {
-    font-size: 24px !important;
-    user-select: none;
 }

bfrontend/src/Styles/Components/Textbox.scss

@@ -11,8 +11,5 @@
         border-radius: var(--message-box-border-radius);
         background-color: var(--message-box-color);
         height: 32px;
-        padding: 6px;
-        padding-left: 16px;
-        font-size: 16px !important;
     }
 }

bfrontend/src/Styles/root.scss

@@ -1,21 +1,19 @@
 :root {
-    --background-color: #030303;
+    --background-color: #{$dark1};
 
     --default-main-card-color: var(--background-color);
     --card-box-shadow-color: 0 1px 0 #1d1a1abe;
 
-    --default-text-color: #cacaca;
+    --default-text-color: #{$light3};
-    --darker-text-color: #808080;
+    --darker-text-color: #{$light1};
 
-    --card-accent-color: #212121;
+    --accent-color-dark: #{$dark2};
-    --focus-accent-color: hsl(246, 57%, 38%);
+    --accent-color-light: #{$dark3};
-    --focus-accent-color-deep: hsl(255, 70%, 30%);
+    --accent-color-very-light: #{$dark4};
 
-    --channel-top-bar-color-accent: var(--background-color);
+    --channel-top-bar-color-accent: var(--accent-color-light);
     --channel-top-bar-color: var(--background-color);
-    --bar-card-border-bottom: solid 1px #1d1d1d;
+    --message-box-color: var(--accent-color-light);
-    --message-box-color: var(--card-accent-color);
-    --message-box-shadow: #22222273 6px 8px 12px;
     --channel-top-bar-border-color: var(--accent-color-dark);
 
     --channel-list-background-color: var(--background-color);
@@ -24,8 +22,8 @@
     --channel-view-container-color: var(--accent-color-dark);
 
     --button-color: var(--background-color);
-    --button-hover-color: var(--focus-accent-color-deep);
+    --button-hover-color: var(--accent-color-dark);
-    --button-selected-color: var(--focus-accent-color);
+    --button-selected-color: var(--accent-color-light);
 
     --default-transition-duration: 50ms;
 
@@ -33,6 +31,6 @@
     --default-button-border-radius: 0px;
     --channel-message-border-radius: 0px;
     --bar-cards-border-radius: 0px;
-    --channel-button-border-radius: 10px;
+    --channel-button-border-radius: 4px;
-    --message-box-border-radius: 10px;
+    --message-box-border-radius: 4px;
 }