fix donwload attachment and modal to edit message

src/app/modals/edit-message/edit-message.page.html

@@ -1,20 +1,51 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Edit Message</ion-title>
-    <ion-buttons slot="end">
-      <ion-button (click)="dismiss()">Close</ion-button>
-    </ion-buttons>
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content width-100">
+        <div class="back-icon">
+          <!-- <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/Theme/doneIt/icons-arrow-arrow-left.svg'></ion-icon>
+          <button class="btn-no-color cursor-pointer" >
+            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " slot="end" src='assets/images/theme/{{ThemeService.currentTheme}}/icons-arrow-arrow-left.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
+          </button> -->
+        </div>
+        <div class="div-title">
+          <ion-label class="title">Editar Mensagem</ion-label>
+        </div>
+      </div>
+    </div>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <form (ngSubmit)="save()" #editForm="ngForm">
-    <ion-item>
-      <ion-label position="floating">Edit Message</ion-label>
-      <ion-input [(ngModel)]="message" name="text" required></ion-input>
-    </ion-item>
-    <ion-footer>
-      <ion-button expand="full" type="submit" [disabled]="!editForm.form.valid">Save</ion-button>
-    </ion-footer>
-  </form>
+  <div class="main-content">
+
+    <div class="old-message-container d-flex justify-center">
+      <div class="old-message">{{ oldMessage }}</div>
+    </div>
+
+
+    <div class="type-message mt-40-em">
+      <ion-textarea #messageInput clearOnEdit="true" placeholder="Escrever uma mensagem" class="message-input" rows="1" [(ngModel)]="message"   (keyup.enter)="save()"  ></ion-textarea>
+    </div>
+  </div>
 </ion-content>
+
+<ion-footer class="ion-no-border">
+  <ion-toolbar class="footer-toolbar px-20">
+    <ion-buttons slot="start">
+      <button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Enviar</ion-label>
+      </button>
+    </ion-buttons>
+    <ion-buttons  slot="end">
+      <button class="btn-cancel" fill="clear" color="#061b52" (click)="dismiss()" >
+        <ion-label>Cancelar</ion-label>
+      </button>
+    </ion-buttons>
+    
+  </ion-toolbar>
+</ion-footer>
+
+

src/app/modals/edit-message/edit-message.page.scss

@@ -0,0 +1,94 @@
+@import '~src/function.scss';
+
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+
+   .main-header{
+     width: 100%; /* 400px */
+     height: 100%;
+     font-family: Roboto;
+     border-top-left-radius: 25px;
+     border-top-right-radius: 25px;
+     background-color: #fff;
+     overflow:hidden;
+     padding: 30px 20px 0px 20px;
+     color:#000;
+     transform: translate3d(0, 1px, 0);
+
+     .div-icon{
+       width: rem(40);
+       float: right;
+       font-size: rem(35);
+       overflow: auto;
+       padding: 1px;
+     }
+     .div-icon ion-icon{
+       float: right;
+       padding-left: 20px;
+     }
+       .title-content{
+         margin: 0px auto;
+         overflow: auto;
+         padding: 0 !important;
+       }
+
+     .back-icon{
+       width: 37px;
+       float: left;
+       font-size: rem(35);
+       overflow: auto;
+
+       }
+     .div-title{
+         width: calc(100% - 45px);
+         padding: 0!important;
+         float: left;
+         margin: 2.5px 0 0 5px;
+     }
+     .title{
+         font-size: rem(25);
+     }
+   }
+ }
+
+ ion-content{
+   --background:transparent;
+ }
+ .main-content{
+   width: 100%;
+   height: 100%;
+   font-family: Roboto;
+   margin: 0 auto;
+   background-color: #fff;
+   overflow:auto;
+   padding: 0 0 0 0;
+
+    
+   }
+
+   .type-message {
+    display: flex;
+    border: 1px solid #ebebeb;
+    border-radius: 25px;
+    margin: 0 30px 0 30px;
+    align-items: center;
+    overflow: auto;
+  }
+
+.old-message-container {
+  padding: 40px;
+}
+.old-message {
+  font-size: rem(13);
+  font-family: Roboto;
+  overflow: auto;
+  background: var(--chat-incoming-msg-color);
+  border-radius: 10px;
+  display: inline;
+  padding: 10px 20px;
+}
+
+:host {
+  height: 400px;
+}

src/app/modals/edit-message/edit-message.page.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
 import { ModalController } from '@ionic/angular';
-
+import { ThemeService } from 'src/app/services/theme.service'
 
 @Component({
   selector: 'app-edit-message',
@@ -9,15 +9,23 @@ import { ModalController } from '@ionic/angular';
 })
 export class EditMessagePage implements OnInit {
 
+  @ViewChild('messageInput', { static: false }) messageInput!: ElementRef<HTMLIonTextareaElement>;
   @Input() message: string;
   @Input() roomId: any;
 
+  oldMessage: string
 
   constructor(
-    private modalController: ModalController
-  ) { }
+    private modalController: ModalController,
+    public ThemeService: ThemeService,
+  ) {}
 
   ngOnInit() {
+    this.oldMessage = this.message
+  }
+  ngAfterViewInit() {
+    // Focus the textarea once the view has been initialized
+    this.messageInput.nativeElement.focus();
   }
 
   dismiss() {