experiment more with redesign

bfrontend/src/API/APIRequest.js

@@ -37,15 +37,12 @@ APIRequest.authenticated = async function(endpoint, options) {
     if (!options) options = {};
     if (!options.headers) options.headers = {};
 
-    console.log(options);
-
     options.headers = {
         "Authorization": token.getToken(),
         ...options.headers
     };
 
     try {
-        console.log(options);
         res = await fetch(`${config.apiUrl}${endpoint}`, options);
         json = await res.json();
         isOK = true;

bfrontend/src/Components/Channels/ChannelUserList.js

@@ -1,7 +1,6 @@
 import UserProfileButton from '../Users/UserButton';
 
 function ChannelUserList({ presence }) {
-    console.log(presence);
     return (
         <div className="main-card sidebar">
             <div className="channel-list">

bfrontend/src/Components/Channels/ChannelView.js

@@ -41,12 +41,20 @@ const ChannelView = ({ channels, messages, channel, selectedChannelId, experimen
     }, [channels, id, dispatch, channel, selectedChannelId]);
 
     if (channel) {
-        let messagesView = messages.map(m => <Message key={ m._id } message={ m } />);
+        let messagesView = messages.map((m, i) => {
+            //if (messages[i-1] && messages[i-1].author.username === m.author.username) return <Message key={ m._id } message={ m } hideUsername={ true } />
+            return <Message key={ m._id } message={ m } />;
+        });
 
         if (messagesView === undefined || messagesView.length <= 0) {
             messagesView = (
                 <div className='no-messages-warning'>
-                    Wow, such empty!
+                    <div className="profile-picture default-user no-messages-icon">
+                        <div className="default-channel-styled-text no-messages-text">
+                            #?
+                        </div>
+                    </div>
+                    <span style={ { marginTop: "1em" } }>No messages yet...</span>
                 </div>
             );
         }

bfrontend/src/Components/Messages/Message.js

@@ -1,9 +1,9 @@
 import UserProfileLink from '../Users/UserProfileLink';
 
-export default function Message({ message }) {
+export default function Message({ message, hideUsername }) {
     return (
         <div className="message">
-            <UserProfileLink size="0" user={ message.author } />
+            <UserProfileLink size="0" user={ message.author } hideName={ hideUsername } />
             <span className="message-content">{ message.content }</span>
         </div>
     );

bfrontend/src/Components/UI/ProfileLink.js

@@ -1,5 +1,5 @@
 // This is a mess pls fix later
-export default function ProfileLink({ object, size, type, offset=true, children=null }) {
+export default function ProfileLink({ object, size, type, offset=true, children=null, hideName=false }) {
     let picture;
 
     if (size !== "0") {
@@ -26,7 +26,7 @@ export default function ProfileLink({ object, size, type, offset=true, children=
     return (
         <div className={ classes }>
             { picture }
-            <span className="profile-username">{ title }</span>
+            <span className={ hideName ? "profile-username hidden" : "profile-username" }>{ title }</span>
             { bottomInfo }
         </div>
     );

bfrontend/src/Components/Users/UserProfileLink.js

@@ -1,8 +1,8 @@
 import ProfileLink from '../UI/ProfileLink'
 
 // TODO: Stop using this component and just use the ProfileLink component
-export default function UserProfile({ user, size, subtext }) {
+export default function UserProfile({ user, size, subtext, hideName }) {
     return (
-        <ProfileLink object={ user } size={ size } type="user" offset={ subtext !== undefined } children={ (subtext) && (<span>{ subtext }</span>) } />
+        <ProfileLink hideName={ hideName } object={ user } size={ size } type="user" offset={ subtext !== undefined } children={ (subtext) && (<span>{ subtext }</span>) } />
     );
 }

bfrontend/src/Styles/Components/Containers.scss

@@ -47,3 +47,7 @@
 .hidden-overflow {
     overflow: hidden;
 }
+
+.hidden {
+    visibility: hidden;
+}

bfrontend/src/Styles/Components/Message.scss

@@ -6,14 +6,18 @@
     display: flex;
     flex-direction: row;
     margin: 3px;
-    margin-left: 15px;
+    margin-left: 1rem;
     padding: 1px;
     border-radius: var(--channel-message-border-radius);
     background-color: var(--channel-message-color);
 }
 
 .no-messages-warning {
-    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    justify-self: center;
+    flex-direction: column;
     padding: 50px;
     color: var(--darker-text-color);
 }

bfrontend/src/Styles/Components/ProfileLink.scss

@@ -4,8 +4,10 @@
     margin: 5px;
     width: 32px;
     height: 32px;
+    margin-right: 6px;
 
     &.default-channel {
+        border-radius: 12px;
         display: flex;
         align-items: center; 
         justify-content: center;
@@ -13,6 +15,12 @@
         color: var(--default-text-color);
     }
 
+    &.no-messages-icon {
+        border-radius: 0;
+        width: 16em;
+        height: 16em;
+    }
+
     &.default-user {
         display: flex;
         align-items: center; 
@@ -71,9 +79,14 @@
 }
 
 .default-channel-styled-text {
-    filter: drop-shadow(2px 2px hsl(300, 60%, 25%));
     font-size: 24px !important;
+    filter: drop-shadow(2px 2px hsl(300, 60%, 25%));
     user-select: none;
+
+    &.no-messages-text {
+        filter: drop-shadow(45px 0 hsl(300, 60%, 40%));
+        font-size: 8em !important;
+    }
 }
 
 .default-user-styled-text {

bfrontend/src/Styles/root.scss

@@ -14,14 +14,14 @@
     --default-user-background: linear-gradient(
         to bottom right,
         hsl(275, 55%, 40%),
-        hsl(300, 55%, 40%),
+        hsl(325, 55%, 40%),
-        hsl(325, 55%, 40%)
+        hsl(350, 55%, 40%)
     );
     --default-channel-background: linear-gradient(
-        to bottom right,
+        to top right,
         hsl(150, 55%, 40%),
-        hsl(175, 55%, 40%),
+        hsl(200, 55%, 40%),
-        hsl(200, 55%, 40%)
+        hsl(225, 55%, 40%)
     );
 
     --channel-top-bar-color-accent: var(--background-color);