Changes for Jitsi UI (#518)

* css changes for jitsi box ui change

* edited jitsi.scss for jitsi ui and reverted changes of comment.scss

* changes made for making same fonts

* added modals in jitsi ui

* removed unnecessary code from jitsi.scss

Author: nisarg1499

src/user/integrations/NameForm.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Modal, Button, Form, Row} from 'react-bootstrap';
+import {Modal, Button, Form, Row, Col} from 'react-bootstrap';
 import {JitsiMeet} from './Jitsi';
 import "./jitsi.scss";
 
@@ -31,39 +31,47 @@ export class Info extends Component{
         {...this.props}
         size="md"
         aria-labelledby="contained-modal-title-vcenter"
+        className="modal"
         centered>
-        <div className="container">
-          <Modal.Header closeButton className="heading border border-0 p-0">
+
+          <Modal.Header closeButton className="modal__header">
             <Modal.Title id="contained-modal-title-vcenter"> 
               <div className="title">Info</div>
               <div className="about">Enter your name and a roomID</div>
             </Modal.Title> 
           </Modal.Header>
-          <Modal.Body>
-            <Row className="form-content">       
-              <Form.Label className="label">Your Name</Form.Label>
-              <Form.Control className="form-input"
-                type="text"   placeholder="Name.."   size="sm"
-                onChange={event => this.handleChange(event, "user")}
-                required/>
-            </Row>
-            <Row className="form-content">
-              <Form.Label className="label">Room ID</Form.Label>
-              <Form.Control className="form-input"
-                type="text"   placeholder="RoomID.."   size="sm"   
-                onChange={event => this.handleChange(event, "roomID")}
-                required/>
-            </Row> 
+          <Modal.Body className="modal__body">
+            <Form className="modal__form">
+              <Form.Row className="modal__row">
+                <Form.Group className="modal__group" as={Col}>
+                  <Form.Label className="label">Your Name</Form.Label>
+                  <Form.Control className="modal__post"
+                    type="text"   placeholder="Name.."   size="sm"
+                    onChange={event => this.handleChange(event, "user")}
+                    required/>
+                </Form.Group>
+              </Form.Row>
+              <Form.Row className="modal__row">
+              <Form.Group className="modal__group" as={Col}>
+                <Form.Label className="label">Room ID</Form.Label>
+                <Form.Control className="modal__post"
+                  type="text"   placeholder="RoomID.."   size="sm"   
+                  onChange={event => this.handleChange(event, "roomID")}
+                  required/>
+                  </Form.Group>
+              </Form.Row>
+            </Form>
           </Modal.Body>
-          <div className="form-footer">
+          <div className="modal__buttons">
             <Button onClick={() => this.setState({startJitsi:true})} 
-              disabled={this.state.disable} className="savebtn">Join Call</Button>
+              disabled={this.state.disable} className="modal__save">
+                <span className="modal__buttontext">Join</span></Button>
             {this.state.startJitsi ? <JitsiMeet show={this.state.startJitsi}
             onHide={this.closeJitsi} user={this.state.user} 
             roomID={this.state.roomID}/> : null}
-            <Button variant="outline-primary" onClick={this.props.onHide}>Cancel</Button>
+            <Button className="modal__cancel" variant="outline-primary" onClick={this.props.onHide}>
+              <span className="modal__buttontext">Cancel</span></Button>
           </div>
-        </div>
       </Modal>
     );
   }

src/user/integrations/jitsi.scss

@@ -9,13 +9,6 @@
 .display2{
     justify-content:space-between;
 }
-.base{
-    height: 450px;
-    width: 450px;
-    background-color: red;
-    position: relative;
-    right: 200px;
-}
 .heading{
     margin-top: 20px;
 }
@@ -24,7 +17,7 @@
     font-weight: 700;
     line-height: 29px;
     color: #1A73E8;
-   // margin-left: 6px;
+    margin-left: 3px;
 }
 .about{
     font-weight: 500;
@@ -34,53 +27,29 @@
     color: #90949C;
     margin-top:10px;
     margin-bottom: 5px;
-   // margin-left: 6px;
+    margin-left: 4px;
 }
-.message{
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 14px;
-    letter-spacing: 0.2em;
-    color: rgb(28, 30, 34);
-    margin-top:15px;
-    margin-bottom: 20px;
-}
-
 .label{
     font-weight: 600;
     font-size: 15px;
     color:#000000;
     margin-bottom: 3px;
     margin-top: 5px;
-   // margin-left: 3px;
+    margin-left: 2px;
 }
 .form-input{
     font-family: Inter;
     font-style: normal;
     font-weight: 300;
     font-size: 13px;
     line-height: 16px;
-    //margin-left: 3px;
+    margin-left: 3px;
 }
 .form-content{
     margin-top:-2%;
     margin-bottom: 20px;
     justify-content:space-between;
 }
-.form-footer{
-    margin-top: -5px;
-    Button{
-        width: auto;
-        margin-right: 20px;
-        margin-bottom: 30px;
-        border-radius: 100px;
-        font-weight:600;
-    }
-    .savebtn{
-        background-color: #1A73E8;
-    }
-
-}
 .contain{
     margin-top: -3px;
 }