Add devicemgt React app UI improvements

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/AddGroup.js

@@ -124,7 +124,7 @@ class AddGroup extends React.Component {
                 <div>
                     <Modal
                         title="ADD NEW GROUP"
-                        width="500px"
+                        width="40%"
                         visible={this.state.addModalVisible}
                         onOk={this.handleAddOk}
                         onCancel={this.handleAddCancel}
@@ -141,8 +141,7 @@ class AddGroup extends React.Component {
                             <p>Create new device group on IoT Server.</p>
                             <Form
                                 labelCol={{ span: 5 }}
-                                wrapperCol={{ span: 12 }}
-                                style={{alignItems:"center"}}
+                                wrapperCol={{ span: 18 }}
                             >
                                 <Form.Item label="Name" style={{display:"block"}}>
                                     {getFieldDecorator('name', {

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupActions.js

@@ -291,7 +291,7 @@ class GroupActions extends React.Component {
                 <div>
                     <Modal
                         title="Update Group"
-                        width="500px"
+                        width="40%"
                         visible={this.state.editModalVisible}
                         onOk={this.handleEditOk}
                         onCancel={this.handleEditCancel}
@@ -308,8 +308,7 @@ class GroupActions extends React.Component {
                             <p>Enter new name and description for the group</p>
                             <Form
                                 labelCol={{ span: 5 }}
-                                wrapperCol={{ span: 12 }}
-                                style={{alignItems:"center"}}
+                                wrapperCol={{ span: 18 }}
                             >
                                 <Form.Item label="Name" style={{display:"block"}}>
                                     {getFieldDecorator(
@@ -351,22 +350,25 @@ class GroupActions extends React.Component {
                         onOk={this.handleShareOk}
                         onCancel={this.handleShareCancel}
                         footer={[
-                            <Button key="cancel" onClick={this.handleShareCancel}>
-                                Cancel
+                            <Button key="new-role" onClick={this.handleShareCancel}>
+                                New Role
+                            </Button>,
+                            <Button key="new-role-selection" onClick={this.handleShareCancel}>
+                                New Role from Selection
                             </Button>,
                             <Button key="submit" type="primary" onClick={this.handleShareOk}>
-                                Submit
+                                Share
                             </Button>,
                         ]}
                     >
+                        <p>Select user role(s)</p>
                         <Select
-                            placeholder={"Select user role(s)"}
                             mode="multiple"
+                            defaultValue={"admin"}
                             style={{ width: '100%' }}
                             onChange={this.handleRolesDropdownChange}>
                             {item}
                         </Select>,
-
                     </Modal>
                 </div>
             </div>

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/components/Groups/GroupsTable.js

@@ -164,8 +164,8 @@ class GroupsTable extends React.Component {
 
         return (
             <div>
-                <div style={{background: '#f0f2f5', marginBottom:"5px"}}>
-                    <AddGroup fetchGroups={this.fetchGroups}/>
+                <div style={{background: '#f0f2f5'}}>
+                    <AddGroup fetchGroups={this.fetchGroups} style={{marginBottom:"10px"}}/>
                 </div>
                 <div>
                     <Table

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Dashboard/Policies/Policies.js

@@ -55,7 +55,7 @@ class Policies extends React.Component {
                     </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
-                    <p>sghdfugjhskf</p>
+                    
                 </div>
             </div>
         );

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/pages/Login.js

@@ -157,7 +157,7 @@ class NormalLoginForm extends React.Component {
                     )}
                     <br/>
                     <a className="login-form-forgot" href="">Forgot password</a>
-                    <Button block type="primary" htmlType="submit" className="login-form-button">
+                    <Button loading={this.state.loading} block type="primary" htmlType="submit" className="login-form-button">
                         Log in
                     </Button>
                 </Form.Item>