Improves create room dialog

Author: RonLek

client/src/components/CreateChannel/index.css

@@ -4,13 +4,24 @@
 }
 
 .create-dialog-description {
+  margin-top: 0px;
   color: #8e9299;
 }
 
-.repository-autocomplete {
-  width: 80%;
+.create-button {
+  margin-bottom: 10px !important;
 }
 
-.create-button {
-  margin-bottom: 10px;
+.form-switch {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
+
+.form-control-label {
+  margin-right: 0px !important;
+}
+
+.repository-select-label {
+  margin-top: 0px;
+}

client/src/components/CreateChannel/index.js

@@ -156,11 +156,11 @@ export default class CreateChannel extends Component {
       });
       if (rcCreateChannelResponse.data.data.success) {
         let room = rcCreateChannelResponse.data.data.channel;
-        //Add embeddable code for community to description
+        //Add embeddable code for room to description
         description = description.concat(`
 
 -----
-Embed this community
+Embed this room
 <pre><code>&lt;a&nbsp;href=&quot;${rc4gitDomain}/channel/${room.name}&quot;&gt;
 &lt;img&nbsp;src=&quot;${rcApiDomain}/images/join-chat.svg&quot;/&gt;
 &lt;/a&gt;</code></pre>
@@ -180,7 +180,7 @@ Embed this community
         });
 
         addRoom(room);
-        setSnackbar(true, "success", "Community created successfully!");
+        setSnackbar(true, "success", "Room created successfully!");
         this.setState({
           loading: false,
           room: room,
@@ -189,12 +189,12 @@ Embed this community
         });
       } else {
         this.setState({ loading: false });
-        setSnackbar(true, "error", "Error Creating Community!");
+        setSnackbar(true, "error", "Error Creating Room!");
       }
     } catch (error) {
       console.log(error);
       this.setState({ loading: false });
-      setSnackbar(true, "error", "Error Creating Community!");
+      setSnackbar(true, "error", "Error Creating Room!");
     }
   };
 
@@ -223,52 +223,20 @@ Embed this community
           maxWidth="sm"
           fullWidth={true}
         >
-          <DialogTitle>Create a New Community</DialogTitle>
+          <DialogTitle >Create Room</DialogTitle>
           <DialogContent>
             <p className="create-dialog-description">
-              Communities are where your teams communicate.
+              Rooms are where your teams communicate.
             </p>
             <div>
               <br />
-              <FormControlLabel
-                control={
-                  <RCSwitch
-                    checked={publicChannel}
-                    onChange={() =>
-                      this.setState({ publicChannel: !publicChannel })
-                    }
-                    name="publicChannel"
-                  />
-                }
-                label="Public Community"
-              />
-              <p className="create-dialog-description">
-                {publicChannel
-                  ? "Everyone can access this community."
-                  : "Just invited people can access this community."}
-              </p>
-              <br />
-              <FormControlLabel
-                control={
-                  <RCSwitch
-                    checked={this.state.includePrivateRepositories}
-                    onChange={this.handleAllRepositories}
-                    name="includePrivateRepositories"
-                  />
-                }
-                label="Show All Repositories"
-              />
-              <p className="create-dialog-description">
-                Show public {includePrivateRepositories ? "and private " : ""}
-                repositories.
-              </p>
-              <br />
-              <p>Select a repository</p>
+              <p className="repository-select-label">Select Repository</p>
               <Autocomplete
                 id="combo-box-repo"
-                className="repository-autocomplete"
+                fullWidth
                 options={repositories.sort()}
-                getOptionLabel={(option) => option.split("/")[1]}
+                renderOption={(option) => option.split("/")[1]}
+                getOptionLabel={(option) => option}
                 groupBy={(option) => option.split("/")[0]}
                 onChange={(event, value) => {
                   this.setState({ channel: value });
@@ -285,12 +253,56 @@ Embed this community
               {channel && (
                 <>
                   <p className="create-dialog-description">
-                    Your community would be created as{" "}
+                    Your room would be created as{" "}
                     <strong>{channel.replace("/", "_")}</strong>
                   </p>
                 </>
               )}
               <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"
+                  />
+                }
+              />
+              </div>
+              
+              <p className="create-dialog-description">
+                {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"
+
+                  />
+                }
+              />
+              </div>
+              <p className="create-dialog-description">
+                {publicChannel
+                  ? "Everyone can access this room."
+                  : "Just invited people can access this room."}
+              </p>
+              <br />
               <Button
                 className="create-button"
                 disabled={!channel || loading}

client/src/components/RCSwitch.js

@@ -4,14 +4,14 @@ import Switch from '@material-ui/core/Switch';
 const RCSwitch = withStyles((theme) => ({
     root: {
       width: 42,
-      height: 26,
+      height: 20,
       padding: 0,
       margin: 10,
     },
     switchBase: {
-      padding: 1,
+      padding: 0,
       '&$checked': {
-        transform: 'translateX(16px)',
+        transform: 'translateX(20px)',
         color: theme.palette.common.white,
         '& + $track': {
           backgroundColor: '#52d869',
@@ -21,15 +21,15 @@ const RCSwitch = withStyles((theme) => ({
       },
       '&$focusVisible $thumb': {
         color: '#52d869',
-        border: '6px solid #fff',
       },
     },
     thumb: {
-      width: 24,
-      height: 24,
+      width: 20,
+      height: 20,
     },
     track: {
-      borderRadius: 26 / 2,
+      display: "inline-table",
+      borderRadius: 20 / 2,
       border: `1px solid ${theme.palette.grey[400]}`,
       backgroundColor: theme.palette.grey[50],
       opacity: 1,