style new group view desktop/tablet

src/app/shared/chat/new-group/new-group.page.html

@@ -2,9 +2,6 @@
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="title-content">
-        <div class="left">
-          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
-        </div>
         <div class="middle">
           <ion-label class="title">Novo Grupo</ion-label>
         </div>
@@ -15,11 +12,11 @@
 </ion-header>
 
 <ion-content>
-  <div class="main-content">
+  <div class="main-content width-100">
     <div class="item-container">
       <ion-input [(ngModel)]="groupName" placeholder="Título"></ion-input>
     </div>
-    <div *ngIf="false" class="item-container-no-border">
+    <div *ngIf="true" class="item-container-no-border">
       <ion-checkbox (ionChange)="_ionChange($event)" color="primary"></ion-checkbox>
       <ion-label>Grupo Ultra-secreto</ion-label>
     </div>

src/app/shared/chat/new-group/new-group.page.scss

@@ -47,7 +47,7 @@ ion-content{
     transform: translate3d(0, 1px, 0);
     
     .title-content{
-      width: 360px;
+      //width: 360px;
       margin: 0px auto;
       overflow: auto;
       padding: 0 !important;
@@ -63,7 +63,7 @@ ion-content{
         padding: 0!important;
         float: left;
         width: 221px;
-        margin: 2.5px 0 0 5px;
+        //margin: 2.5px 0 0 5px;
       }
       .right{
         padding: 0!important;
@@ -101,7 +101,7 @@ ion-content{
     padding: 15px 20px 0 20px;
 
     .item-container{
-        width: 360px;
+        //width: 360px;
         margin: 15px auto;
         border: 1px solid #ebebeb;
         border-radius: 5px;
@@ -110,7 +110,7 @@ ion-content{
 
       .item-container-no-border{
         display: flex;
-        width: 360px;
+        //width: 360px;
         margin: 25px auto;
         border-radius: 5px;
         align-items: center;
@@ -124,15 +124,16 @@ ion-content{
   }
 
   .container-div{
+    width: 100%;
     margin-bottom: 15px;
     overflow: auto;
 
     .ion-item-class-2{
-        width: 360px;
+        width: 100%;
         margin: 0px auto;
 
         .ion-icon-class{
-            width: 45px;
+            width: 5%;
             height: 45px;
             float: left;
             padding: 10px;
@@ -140,12 +141,13 @@ ion-content{
           }
       }
       .ion-input-class{
-        width: 315px;
+        width: 93%;
         height: 45px;
         border: 1px solid #ebebeb;
         border-radius: 5px;
         padding-left: 5px;
         padding-right: 10px;
+        margin-left: 2%;
         float: left;
       }
   }

src/app/shared/chat/new-group/new-group.page.ts

@@ -1,5 +1,5 @@
 import { analyzeAndValidateNgModules } from '@angular/compiler';
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { ModalController, NavParams, PickerController, PopoverController } from '@ionic/angular';
 import { GroupDurationPage } from 'src/app/shared/popover/group-duration/group-duration.page';
 import { GroupContactsPage } from '../group-messages/group-contacts/group-contacts.page';
@@ -15,17 +15,19 @@ export class NewGroupPage implements OnInit {
   displayDuration: any;
   showDuration: boolean;
   selectedDuration = ['','',''];
-  groupName:string;
+  //groupName:string;
+
+  @Input() groupName:string;
 
   constructor(
     private pickerController: PickerController,
     private popoverController: PopoverController,
     private modalController: ModalController,
-    private navParams: NavParams,
+    //private navParams: NavParams,
   ) 
   { 
     this.isGroupCreated = false;
-    this.groupName = this.navParams.get('name');
+    //this.groupName = this.navParams.get('name');
   }
 
   ngOnInit() {