Add show and hide whether checkbox is active or not

src/app/pages/chat/group-messages/group-messages.page.scss

@@ -146,9 +146,17 @@
     margin-top: 4px;
   }
 
-   ion-col .type-message{
+  .type-message{
+    display: flex;
     border: 1px solid #ebebeb;
     border-radius: 25px;
     padding-left: 15px;
+    align-items: center;
+    overflow: auto;
+
+    ion-textarea{
+      margin: 0 !important;
+      align-self: center;
+    }
   }
  }

src/app/pages/chat/messages/messages.page.scss

@@ -151,10 +151,18 @@
     margin-top: 4px;
   }
 
-   ion-col .type-message{
+   .type-message{
+    display: flex;
     border: 1px solid #ebebeb;
     border-radius: 25px;
     padding-left: 15px;
+    align-items: center;
+    overflow: auto;
+
+    ion-textarea{
+      margin: 0 !important;
+      align-self: center;
+    }
   }
  }
 
@@ -169,4 +177,5 @@
     float: left;
     color:#99e47b;
     padding-left: 10px;
- }
+ }
+ 

src/app/pages/chat/messages/messages.page.ts

@@ -11,6 +11,8 @@ import { ContactsPage } from '../new-group/contacts/contacts.page';
 })
 export class MessagesPage implements OnInit {
 
+  message = '';
+  
   constructor(
     public popoverController: PopoverController,
     private modalController: ModalController,

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

@@ -19,12 +19,12 @@
     <div class="item-container">
       <ion-input placeholder="Título"></ion-input>
     </div>
-    <ion-item class="ion-no-padding item-container-no-border" lines="none">
+    <div class="item-container-no-border">
-      <ion-checkbox color="primary"></ion-checkbox>
+      <ion-checkbox (ionChange)="_ionChange($event)" color="primary"></ion-checkbox>
       <ion-label>Grupo Ultra-secreto</ion-label>
-    </ion-item>
+    </div>
 
-    <div class="container-div">
+    <div *ngIf="showDuration" class="container-div">
       <div class="ion-item-class-2">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-duration.svg"></ion-icon>

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

@@ -107,21 +107,19 @@ ion-content{
         border-radius: 5px;
         padding-left: 10px;
       }
+
       .item-container-no-border{
+        display: flex;
         width: 360px;
-        margin: 15px auto;
+        margin: 25px auto;
         border-radius: 5px;
-        padding-left: 10px;
+        align-items: center;
-      }
-      .item-container-no-border ion-checkbox{
-          margin-top: 10px;
       }
 
       .item-container-no-border ion-label{
           padding-left: 10px;
           font-size: 12px;
           color: #000;
-          margin-top: 0 !important;
       }
   }
 

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

@@ -9,6 +9,7 @@ import { ContactsPage } from './contacts/contacts.page';
 })
 export class NewGroupPage implements OnInit {
   showLoader: boolean;
+  showDuration: boolean;
 
   constructor(
     private modalController: ModalController, 
@@ -18,6 +19,9 @@ export class NewGroupPage implements OnInit {
 
   ngOnInit() {
 
+  }
+  _ionChange(event){
+    this.showDuration = event.detail.checked;
   }
   close(){
     this.modalController.dismiss();

src/app/shared/popover/chat-popover/chat-popover.page.html

@@ -9,9 +9,10 @@
   </ion-row>
   <ion-row class="border-top">
     <ion-col>
-      <button  class="btn-delete" shape="round">Apagar grupo</button>
+      <button (click)="close()" full class="btn-cancel" shape="round" >Cancelar</button>
     </ion-col>
     <ion-col>
+      <button  class="btn-delete" shape="round">Apagar grupo</button>
     </ion-col>
   </ion-row>
 </ion-content>

src/app/shared/popover/chat-popover/chat-popover.page.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { PopoverController } from '@ionic/angular';
 
 @Component({
   selector: 'app-chat-popover',
@@ -7,9 +8,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ChatPopoverPage implements OnInit {
 
-  constructor() { }
+  constructor(
+    private popoverController: PopoverController,
+  ) { }
 
   ngOnInit() {
   }
+  close(){
+    this.popoverController.dismiss();
+  }
 
 }

src/theme/variables.scss

@@ -264,7 +264,7 @@
   background: rgba(51, 51, 51, 0.3); 
 }
 .newchat, .new-group, .contacts, .group-messages, .custom-modal{
-  padding-top: 73px;
+  padding-top: 93px;
   --border-radius: 25px 25px 0 0;
   --border-width:0px;
 }