Makes online users available in anonymous mode and for private rooms, fixes private room creation description and custom fields bug, refactors code

Author: RonLek

client/src/images/online.png client/public/online.pngclient/src/images/online.png renamed to client/public/online.png

@@ -167,7 +167,9 @@ Embed this room
 `);
         await axios({
           method: "post",
-          url: `${rcApiDomain}/api/v1/channels.setDescription`,
+          url: `${rcApiDomain}/api/v1/${
+            publicChannel ? "channels" : "groups"
+          }.setDescription`,
           headers: {
             "X-Auth-Token": Cookies.get("rc_token"),
             "X-User-Id": Cookies.get("rc_uid"),
@@ -223,7 +225,7 @@ Embed this room
           maxWidth="sm"
           fullWidth={true}
         >
-          <DialogTitle >Create Room</DialogTitle>
+          <DialogTitle>Create Room</DialogTitle>
           <DialogContent>
             <p className="create-dialog-description">
               Rooms are where your teams communicate.
@@ -260,42 +262,40 @@ Embed this room
               )}
               <br />
               <div className="form-switch">
-              <p>Show All Repositories</p>
-              <FormControlLabel
-                className="form-control-label"
-                control={
-                  <RCSwitch
-                    checked={this.state.includePrivateRepositories}
-                    onChange={this.handleAllRepositories}
-                    name="includePrivateRepositories"
-                  />
-                }
-              />
+                <p>Show All Repositories</p>
+                <FormControlLabel
+                  className="form-control-label"
+                  control={
+                    <RCSwitch
+                      checked={this.state.includePrivateRepositories}
+                      onChange={this.handleAllRepositories}
+                      name="includePrivateRepositories"
+                    />
+                  }
+                />
               </div>
-              
+
               <p className="create-dialog-description">
-                {includePrivateRepositories ? "Both public and private " : "Only public "}
+                {includePrivateRepositories
+                  ? "Both public and private "
+                  : "Only public "}
                 repositories are visible.
               </p>
               <br />
               <div className="form-switch">
-
-                <p>
-                  Public Room
-                </p>
-              <FormControlLabel
-                className="form-control-label"
-                control={
-                  <RCSwitch
-                    checked={publicChannel}
-                    onChange={() =>
-                      this.setState({ publicChannel: !publicChannel })
-                    }
-                    name="publicChannel"
-
-                  />
-                }
-              />
+                <p>Public Room</p>
+                <FormControlLabel
+                  className="form-control-label"
+                  control={
+                    <RCSwitch
+                      checked={publicChannel}
+                      onChange={() =>
+                        this.setState({ publicChannel: !publicChannel })
+                      }
+                      name="publicChannel"
+                    />
+                  }
+                />
               </div>
               <p className="create-dialog-description">
                 {publicChannel

client/src/components/CreateChannel/index.js

@@ -1,12 +1,12 @@
-import ChannelInfo from '../ChannelInfo';
+import RoomInfo from '../RoomInfo';
 import ActivityPane from './../ActivityPane';
 
 import './index.css';
 
 export default function RightSidebar(props) {
     return (
       <div className="rightSidebar-wrapper">
-        <ChannelInfo {...props} />
+        <RoomInfo {...props} />
         <ActivityPane {...props}/>
       </div>
     );

client/src/components/RightSidebar/index.js

@@ -17,6 +17,10 @@
   margin-bottom: 20px;
 }
 
+.repo-info-owner {
+  margin-top: 10px;
+}
+
 .repo-info-stats {
   display: flex;
   justify-content: space-between;
@@ -37,7 +41,7 @@
   line-height: 25px;
 }
 
-.channel-info-tab {
+.roominfo-tab {
   width: 50%;
   color: #70747b !important;
 }
@@ -50,7 +54,7 @@
   color: #9a9ea4 !important;
 }
 
-.channel-info-wrapper {
+.roominfo-wrapper {
   max-height: 50%;
   overflow-wrap: break-word;
   overflow-y: auto;
@@ -86,12 +90,30 @@
   margin-left: 5px;
 }
 
-.channel-member-grid {
+.room-member-grid {
   margin: 10px 0px !important;
 }
 
-.channel-member-grid-item {
+.room-member-grid-item {
   display: flex;
   align-items: flex-start;
   position: relative;
 }
+
+.room-member-grid-avatar {
+  width: 30px;
+}
+
+.room-member-grid-name-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-left: 5px;
+}
+
+.room-member-grid-name {
+  font-weight: bold;
+}
+
+.room-member-grid-username {
+  font-size: x-small;
+}