fix message colors and clean up css variables

bfrontend/src/Components/Auth/Create.js

@@ -66,7 +66,7 @@ export default function Create() {
     }
 
     if (specialCodePrompt) return (
-        <div id="login-container" className="card">
+        <div id="login-container">
             <h1>One more thing!</h1>
             <p>You need a special code to sign up here!</p>
             <label htmlFor="specialcode">Special Code</label>
@@ -78,7 +78,7 @@ export default function Create() {
     );
 
     return (
-        <div id="login-container" className="card">
+        <div id="login-container">
             <h1>Create an account</h1>
             <label htmlFor="username">Username</label>
             <br />

bfrontend/src/Components/Auth/Login.js

@@ -49,7 +49,7 @@ export default function Login() {
     }
 
     return (
-        <div id="login-container" className="card">
+        <div id="login-container">
             <h1>Log in</h1>
             <label htmlFor="username">Username</label>
             <br />

bfrontend/src/Components/Channels/ChannelMessageView.js

@@ -1,5 +1,6 @@
 import Message from  "../Messages/Message";
 import { useRef, useEffect } from 'react';
+import { CommentDiscussionIcon } from "@primer/octicons-react";
 
 export default function ChannelMessageView({messages}) {
     const invisibleBottomMessageRef = useRef();
@@ -11,10 +12,11 @@ export default function ChannelMessageView({messages}) {
     let messagesView = messages.map((message) => (<Message key={message._id} message={message} />));
     if (messagesView === undefined || messagesView.length <= 0) 
         messagesView = (<div className='no-messages-warning'>
-            <span>No messages yet...</span>
+            <CommentDiscussionIcon size={64} />
+            <span style={{ margin: "12px" }}>No messages yet...</span>
         </div>);
 
-    return <div className="message-list-card">
+    return <div className="message-list">
         { messagesView }
         <div className="messages-scroll-div" ref={ invisibleBottomMessageRef }></div>
     </div>;

bfrontend/src/Components/Channels/ChannelProfileLink.js

@@ -1,8 +1,17 @@
-import ProfileLink from '../UI/ProfileLink'
+export default function ChannelProfileLink({ channel, size }) {
+    let picture = null;
+
+    if (size !== "0") {
+        if (channel.picture) picture = <img className={ `profile-picture profile-picture-${size}` } src={ channel.picture } alt="Profile"></img>
+        else picture = <div className="profile-picture default-channel" alt="Profile">
+            <span className="default-channel-styled-text">#</span>
+        </div>
+    }
 
-// TODO: Stop using this component and just use the ProfileLink component
-export default function ChannelProfile({ channel, size, offset=false }) {
     return (
-        <ProfileLink object={ channel } size={ size } type="channel" offset={ offset } />
+        <div className="profile-link">
+            { picture }
+            <span className="profile-username">{ channel.title }</span>
+        </div>
     );
-}
+};

bfrontend/src/Components/Channels/ChannelUserList.js

@@ -3,14 +3,14 @@ import ProfileLinkLoader from "../UI/ProfileLinkLoader";
 
 function ChannelUserList({ presence }) {
     if (!presence || presence.length === 0) return (
-        <div className="card sidebar">
+        <div className="sidebar">
             <div className="channel-list">
                 <button className="button channel-button"><ProfileLinkLoader /></button>
             </div>
         </div>
     );
     return (
-        <div className="card sidebar">
+        <div className="sidebar">
             <div className="channel-list">
                 { Object.keys(presence).map((userId) => <UserProfileButton key={ userId } user={ presence[userId] } />) }
             </div>

bfrontend/src/Components/Channels/ChannelView.js

@@ -28,8 +28,8 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
 
     if (channel) {
         return (
-            <div className="col-flex-card hidden-overflow">
+            <div className="col-flex hidden-overflow">
-                <div className="bar-card-accent no-select">
+                <div className="bar-accent no-select">
                     <ChannelProfile channel={ channel } size="24" />
                     {/*
                         { (experiments.voiceSFUTesting) && <button className="button" onClick={ () => gatewayConnection.beginVoiceSession(channel._id) }>
@@ -38,10 +38,10 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
                     */}
                 </div>
 
-                <div className="row-flex-card hidden-overflow">
+                <div className="row-flex hidden-overflow">
                     <div className="channel-message-panel">
                         <ChannelMessageView messages={messages}></ChannelMessageView>
-                        <div className="col-flex-card">
+                        <div className="col-flex">
                             <input className="text-input message-input" type="text" placeholder="Go on, type something interesting!" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
                         </div>
                     </div>
@@ -51,15 +51,15 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
         );
     } else {
         return (
-            <div className="col-flex-card hidden-overflow">
+            <div className="col-flex hidden-overflow">
-                <div className="bar-card-accent no-select">
+                <div className="bar-accent no-select">
                     <ProfileLinkLoader />
                 </div>
 
-                <div className="row-flex-card hidden-overflow">
+                <div className="row-flex hidden-overflow">
                     <div className="channel-message-panel">
                         <ChannelMessageView messages={[]}></ChannelMessageView>
-                        <div className="col-flex-card">
+                        <div className="col-flex">
                             <input className="text-input message-input" type="text" disabled="disabled" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
                         </div>
                     </div>

bfrontend/src/Components/Main/App.js

@@ -35,7 +35,10 @@ function App({ user }) {
                     <Switch>
                         <Route path="/login" component={ Login } />
                         <Route path="/create" component={ Create } />
-                        <Route path="/channels/:id"
+                        <Route path="/channels/:channelId"
+                            render={() => <LoggedInMount />}
+                        />
+                        <Route path="/user/:userId"
                             render={() => <LoggedInMount />}
                         />
 

bfrontend/src/Components/Main/LoggedInMount.js

@@ -2,15 +2,17 @@ import { useParams } from "react-router-dom";
 import Sidebar from "../UI/Sidebar";
 import ChannelView from "../Channels/ChannelView";
 import GradientBanner from "../UI/GradientBanner";
+import UserView from "../Users/UserView";
 import { connect } from "react-redux";
 
 function LoggedInMount({ gradientBannerNotificationText }) {
-    const { id: channelId } = useParams();
+    const { channelId, userId } = useParams();
     return <>
         <Sidebar />
-        <div className="col-flex-card">
+        <div className="col-flex">
             <GradientBanner text={ gradientBannerNotificationText }/>
             { (channelId) && <ChannelView channelId={ channelId } /> }
+            { (userId) && <UserView userId={ userId } /> }
         </div>
     </>;
 }

bfrontend/src/Components/UI/GradientBanner.js

@@ -3,7 +3,7 @@ import { useDispatch } from "react-redux";
 export default function GradientBanner({ text }) {
     const dispatch = useDispatch();
 
-    return (text !== undefined) && <div className="gradient-banner-card" onClick={ () => dispatch({ type: "application/updatebannertext", text: undefined }) }>
+    return (text !== undefined) && <div className="gradient-banner" onClick={ () => dispatch({ type: "application/updatebannertext", text: undefined }) }>
         { text }
     </div>;
 }

bfrontend/src/Components/UI/ProfileLink.js

@@ -1,33 +0,0 @@
-// TODO: This is an actual, horrible mess
-export default function ProfileLink({ object, size, type, offset=true, children=null, hideName=false }) {
-    let picture;
-
-    if (size !== "0") {
-        // TODO: Make a debug error message for then the size does not exist
-        const pictureClass = `profile-picture profile-picture-${size}`;
-
-        if (object.picture) {
-            // 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">
-                <span className={`default-${type}-styled-text`}>{ (type === "user") ? "@" : "#" }</span>
-            </div>
-        }
-    } else {
-        picture = null;
-    }
-
-    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;
-
-    return (
-        <div className={ classes }>
-            { picture }
-            <span className={ hideName ? "profile-username hidden" : "profile-username" }>{ title }</span>
-            { bottomInfo }
-        </div>
-    );
-};

bfrontend/src/Components/UI/Sidebar.js

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

bfrontend/src/Components/Users/UserProfileLink.js

@@ -1,8 +1,17 @@
-import ProfileLink from '../UI/ProfileLink'
+export default function UserProfileLink({ user, size }) {
+    let picture = null;
+
+    if (size !== "0") {
+        if (user.picture) picture = <img className={ `profile-picture profile-picture-${size}` } src={ user.picture } alt="Profile"></img>
+        else picture = <div className="profile-picture default-user" alt="Profile">
+            <span className="default-user-styled-text">@</span>
+        </div>
+    }
 
-// TODO: Stop using this component and just use the ProfileLink component
-export default function UserProfile({ user, size, subtext, hideName }) {
     return (
-        <ProfileLink hideName={ hideName } object={ user } size={ size } type="user" offset={ subtext !== undefined } children={ (subtext) && (<span>{ subtext }</span>) } />
+        <div className="profile-link">
+            { picture }
+            <span className="profile-username">{ user.username }</span>
+        </div>
     );
-}
+};

bfrontend/src/Components/Users/UserView.js

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import { PersonIcon, ShieldCheckIcon } from "@primer/octicons-react";
+import APIRequest from "../../API/APIRequest";
+import UserProfile from "./UserProfileLink";
+import ProfileLinkLoader from "../UI/ProfileLinkLoader";
+
+export default function UserView({ userId }) {
+    const [userObject, setUserObject] = useState(null);
+
+    useEffect(() => {
+        APIRequest.authenticated(`/api/v1/users/user/${userId}/info`, {
+            method: 'GET',
+            headers: {
+                "Accept": "application/json"
+            }
+        }).then(({ isOK, json }) => {
+            if (isOK) {
+                setUserObject(json.user);
+            }
+        });
+    }, [userId]);
+
+    let view = null;
+    if (userObject) {
+        view = <>
+            <UserProfile user={ userObject } size="32" />
+            {(userObject.role === "ADMIN") && <ShieldCheckIcon size={24} className="profile-badge" />}
+            {(userObject.role === "USER") && <PersonIcon size={24} className="profile-badge" />}
+        </>
+    } else {
+        view = <>
+            <ProfileLinkLoader />
+        </>
+    }
+
+    return (
+        <div className="center grow">
+            <div className="user-view center">
+                {view}
+            </div>
+        </div>
+    );
+}

bfrontend/src/Styles/Components/Button.scss

@@ -1,5 +1,4 @@
 .button {
-    @include card;
 
     background-color: var(--button-color);
     color: var(--default-text-color);

bfrontend/src/Styles/Components/Card.scss

@@ -1,16 +1,4 @@
-@mixin card {
+.bar {
-    padding: 0px;
-    margin: 0px;
-    background-color: rgba(0, 0, 0, 0);
-    border-radius: var(--default-border-radius);
-}
-
-.card {
-    @include card;
-}
-
-.bar-card {
-    @include card;
     @extend .elevated;
 
     height: 32px;
@@ -22,39 +10,33 @@
     z-index: 10;
 
     &-accent {
-        @extend .bar-card;
+        @extend .bar;
 
         background-color: var(--channel-top-bar-color-accent);
     }
 }
     
-.message-list-card {
+.message-list {
-    @include card;
     @include fancy-scrollbar-firefox;
 
-    background-color: var(--channel-message-list-background-color);
     flex-basis: 100%;
     border-radius: 0px;
     overflow: auto;
 }
 
-.col-flex-card {
+.col-flex {
-    @include card;
-
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 }
 
-.row-flex-card {
+.row-flex {
-    @include card;
-
     flex-grow: 10;
     display: flex;
     flex-direction: row;
 }
 
-.gradient-banner-card {
+.gradient-banner {
     background: var(--default-user-background);
     height: 1.5rem;
     padding: 10px;
@@ -65,3 +47,16 @@
     white-space: nowrap;
     cursor: default;
 }
+
+.elevated-modal {
+    @extend .elevated-2;
+
+    background-color: var(--accent-color-dark);
+    padding: 16px;
+    margin: 6px;
+    border-radius: var(--elevated-modal-border-radius);
+}
+
+.user-view {
+    @extend .elevated-modal;
+}

bfrontend/src/Styles/Components/Containers.scss

@@ -2,7 +2,6 @@
     padding: 0px;
     margin: 0px;
     display: flex;
-    background-color: var(--background-color);
     min-height: 100vh;
     max-height: 100vh;
     flex-direction: row;
@@ -10,7 +9,6 @@
 
 .sidebar {
     @include fancy-scrollbar-firefox;
-    @include card;
     @extend .no-select;
 
     background-color: var(--sidebar-background-color);
@@ -32,10 +30,9 @@
 
 .channel-message-panel {
     @extend .hidden-overflow;
-    @extend .col-flex-card;
+    @extend .col-flex;
 
     padding: 15px;
-    background-color: var(--channel-view-container-color);
 }
 
 .hidden-overflow {
@@ -54,3 +51,17 @@
     height: 18px;
     visibility: hidden;
 }
+
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.grow {
+    flex-grow: 1;
+}
+
+.profile-badge {
+    margin: 16px;
+}

bfrontend/src/Styles/Components/Message.scss

@@ -1,12 +1,8 @@
 .message {
-    @include card;
-
     display: flex;
     flex-direction: row;
     margin: 2px;
     padding: 1px;
-    border-radius: var(--channel-message-border-radius);
-    background-color: var(--channel-message-color);
     max-width: 150px;
 }
 

bfrontend/src/Styles/Components/ProfileLink.scss

@@ -1,10 +1,9 @@
 .profile-picture {
     border-radius: 50%;
     flex-shrink: 0;
-    margin: 5px;
+    margin: 6px;
     width: 32px;
     height: 32px;
-    margin-right: 6px;
 
     &.default-channel {
         border-radius: 12px;

bfrontend/src/Styles/Components/Textbox.scss

@@ -1,6 +1,4 @@
 .text-input {
-    @include card;
-
     margin: 1px;
     padding: 5px;
     border: none;

bfrontend/src/Styles/Components/properties.scss

@@ -1,3 +1,7 @@
 .elevated {
     box-shadow: var(--elevation-box-shadow);
 }
+
+.elevated-2 {
+    box-shadow: rgba(0, 0, 0, 0.50) 0px 25px 50px -4px;
+}

bfrontend/src/Styles/root.scss

@@ -1,9 +1,9 @@
 :root {
     --background-color: hsl(230, 12%, 15%);
-    --card-accent-color: hsl(230, 12%, 18%);
+    --accent-color: hsl(230, 12%, 18%);
-    --card-accent-color-dark: hsl(230, 12%, 12%);
+    --accent-color-dark: hsl(230, 12%, 12%);
-    --default-text-color: hsl(0, 0%, 79%);
+    --default-text-color: hsl(0, 0%, 80%);
-    --darker-text-color: hsl(0, 0%, 53%);
+    --darker-text-color: hsl(0, 0%, 65%);
 
     --default-user-background: linear-gradient(
         to bottom right,
@@ -18,29 +18,23 @@
         hsl(225, 35%, 40%)
     );
 
-    --default-scrollbar-color: var(--card-accent-color);
+    --default-scrollbar-color: var(--accent-color);
     --default-scrollbar-color-track: var(--background-color);
     --default-scrollbar-width: 1px;
 
     --channel-top-bar-color-accent: var(--background-color);
     --channel-top-bar-color: var(--background-color);
-    --elevation-box-shadow: 0 1px 0 0 hsla(230, 12%, 5%, 0.3), 0 2px 0 0 hsla(230, 12%, 6%, 0.2), 0 3px 0 0 hsla(230, 12%, 7%, 0.1);
-    --message-box-color: var(--card-accent-color);
-
     --sidebar-background-color: hsl(230, 12%, 12%);
+    --elevation-box-shadow: 0 1px 0 0 hsla(230, 12%, 5%, 0.3), 0 2px 0 0 hsla(230, 12%, 6%, 0.2), 0 3px 0 0 hsla(230, 12%, 7%, 0.1);
+    --message-box-color: var(--accent-color);
 
-    --channel-message-list-background-color: var(--accent-color-dark);
+    --button-color: var(--accent-color-dark);
-    --channel-message-color: var(--accent-color-dark);
+    --button-hover-background-color: var(--accent-color);
-    --channel-view-container-color: var(--accent-color-dark);
+    --button-selected-background-color: var(--accent-color);
-
-    --button-color: var(--card-accent-color-dark);
-    --button-hover-background-color: var(--card-accent-color);
-    --button-selected-background-color: var(--card-accent-color);
     --channel-button-background: none;
 
-    --default-border-radius: 0px;
     --default-button-border-radius: 0px;
-    --channel-message-border-radius: 0px;
     --channel-button-border-radius: 10px;
     --message-box-border-radius: 10px;
+    --elevated-modal-border-radius: 10px;
 }