massive redesign and voice sort of works (this time the actual commit)

bfrontend/src/API/Gateway/GatewayConnection.js

@@ -14,7 +14,8 @@ 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 = "@";
@@ -98,7 +99,7 @@ GatewayConnection.prototype.connect = function(token) {
                 break;
             }
             case "EVENT_VOICE_CONNECTION_ANSWER": {
-                if (!this.webrtcConnection) throw new Error("rtc: got remote answer without local offer");
+                if (!this.webrtcConnection) throw new Error("rtc: got remote answer without local connection");
                 if (this.webrtcConnection.signalingState === "stable") {
                     logRtc("Server sent answer, but we were in stable state");
                     return;
@@ -113,7 +114,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 offer");
+                if (!this.webrtcConnection) throw new Error("rtc: got remote EVENT_RENEGOTIATE_REQUIRED without local connection");
                 
                 logRtc("Server requested renegotiation");
 
@@ -121,6 +122,12 @@ 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>
+            <UserProfileLink size="0" user={ message.author } />
-            <span style={ {paddingLeft: "5px"} }>{ message.content }</span>
+            <span className="message-content">{ message.content }</span>
         </div>
     );
 }

bfrontend/src/Components/UI/ProfileLink.js

@@ -1,5 +1,6 @@
 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;
 
@@ -11,13 +12,16 @@ 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 = <img className={ pictureClass } src={ defaultProfile } alt="Profile"></img>
+            picture = <div className={`profile-picture default-${type}`} alt="Profile">
+                <span className={`default-${type}-styled-text`}>{ (type === "user") ? "@" : "#" }</span>
+            </div>
         }
     } else {
         picture = null;
     }
 
-    const classes = offset ? 'profile-link profile-link-offset-text' : 'profile-link';
+    let 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,7 +7,9 @@ import { connect } from 'react-redux';
 function Sidebar({ user }) {
     return (
         <div className="main-card sidebar">
-            <div className="bar-card">
+            <div className="bar-card" style={{
+                color: "var(--darker-text-color)"
+            }}>
                 { user && <UserProfileLink user={ user } /> }
                 { !user && <ProfileLinkLoader /> }
             </div>

bfrontend/src/Styles/App.scss

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

bfrontend/src/Styles/Components/Card.scss

@@ -16,12 +16,9 @@
     @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-radius: var(--bar-cards-border-radius);
+    border-bottom: var(--bar-card-border-bottom);
     display: flex;
     align-items: center;
     justify-content: left;

bfrontend/src/Styles/Components/Containers.scss

@@ -17,6 +17,7 @@
     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: 10px;
+    margin-left: 15px;
     padding: 1px;
     border-radius: var(--channel-message-border-radius);
     background-color: var(--channel-message-color);
@@ -20,4 +20,9 @@
 
 .unread-indicator {
     float: right;
+}
+
+.message-content {
+    padding-left: 6px;
+    text-rendering: "optimizeLegibility";
 }

bfrontend/src/Styles/Components/ProfileLink.scss

@@ -1,9 +1,32 @@
 .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;
@@ -44,5 +67,21 @@
 }
 
 .profile-username {
-    font-weight: 550;
+    font-weight: 500;
+    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,5 +11,8 @@
         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,19 +1,21 @@
 :root {
-    --background-color: #{$dark1};
+    --background-color: #030303;
 
     --default-main-card-color: var(--background-color);
     --card-box-shadow-color: 0 1px 0 #1d1a1abe;
 
-    --default-text-color: #{$light3};
+    --default-text-color: #cacaca;
-    --darker-text-color: #{$light1};
+    --darker-text-color: #808080;
 
-    --accent-color-dark: #{$dark2};
+    --card-accent-color: #212121;
-    --accent-color-light: #{$dark3};
+    --focus-accent-color: hsl(246, 57%, 38%);
-    --accent-color-very-light: #{$dark4};
+    --focus-accent-color-deep: hsl(255, 70%, 30%);
 
-    --channel-top-bar-color-accent: var(--accent-color-light);
+    --channel-top-bar-color-accent: var(--background-color);
     --channel-top-bar-color: var(--background-color);
-    --message-box-color: var(--accent-color-light);
+    --bar-card-border-bottom: solid 1px #1d1d1d;
+    --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);
@@ -22,8 +24,8 @@
     --channel-view-container-color: var(--accent-color-dark);
 
     --button-color: var(--background-color);
-    --button-hover-color: var(--accent-color-dark);
+    --button-hover-color: var(--focus-accent-color-deep);
-    --button-selected-color: var(--accent-color-light);
+    --button-selected-color: var(--focus-accent-color);
 
     --default-transition-duration: 50ms;
 
@@ -31,6 +33,6 @@
     --default-button-border-radius: 0px;
     --channel-message-border-radius: 0px;
     --bar-cards-border-radius: 0px;
-    --channel-button-border-radius: 4px;
+    --channel-button-border-radius: 10px;
-    --message-box-border-radius: 4px;
+    --message-box-border-radius: 10px;
 }