Finished UI of:

1-publication-view pag
2-gallery page

src/app/pages/publications/gallery/gallery.page.html

@@ -1,9 +1,57 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>gallery</ion-title>
-  </ion-toolbar>
+<ion-header class="ion-no-border">
+  <ion-toolbar class="ion-no-border bg-blue">
+    <div class="div-top-header">
+    <div class="div-search">
+      <ion-icon src='assets/images/icons-search.svg'></ion-icon>
+    </div>
+    <div class="div-logo">
+      <img src='assets/images/logo-no-bg.png' alt='logo'>
+    </div>
+    <div class="div-profile">
+      <ion-icon src='assets/images/icons-profile.svg'></ion-icon>
+    </div>
+  </div>
+</ion-toolbar>
 </ion-header>
 
 <ion-content>
-
+  <div class="content-top"></div>
+  <div class="content-container">
+    <div class="title-content">
+      <div class="div-title">
+        <ion-label class="title"> Galeria de fotos</ion-label>
+      </div>
+    </div>
+    <div class="gallery-items">
+      <ion-list>
+        <div class="gallery-item">
+          <img src='assets/images/icons-tirar-foto.svg'>
+        </div>
+        <div class="gallery-item">
+          <img src='assets/images/logo.png'>
+        </div>
+        <div class="gallery-item">
+          <img src='assets/images/icons-profile.svg'>
+        </div>
+        <div class="gallery-item">
+          <img src='assets/images/icons-search.svg'>
+        </div>
+        
+      </ion-list>
+    </div>
+  </div>    
 </ion-content>
+<ion-footer>
+  <ion-toolbar class="footer-toolbar">
+    <ion-buttons slot="start">
+      <ion-button class="btn-cancel" fill="clear" color="#e0e9ee" (click)="cancel()">
+        <ion-label>Cancelar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Selecionar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>

src/app/pages/publications/gallery/gallery.page.scss

@@ -0,0 +1,92 @@
+:host{
+    background: #0782c9;
+  }
+  ion-content{
+    --background: transparent;
+    transform: translate3d(0, 5px, 0);
+    --border-radius: 30px;
+  }
+  ion-footer{
+      background: #fff;
+  }
+  ion-toolbar{
+    /* --background:#0782c9; */
+    border-width: 0 !important;
+  }
+  .div-top-header{
+    width: 400px;
+    margin: 0 auto;
+    background-color: #0782c9;
+    overflow: auto;
+    padding-top: 15px;
+    border: 0!important;
+  }
+  .div-search{
+    font-size: 45px;
+    float: left;
+    margin: 0 0 0 10px
+  }
+  .div-logo{
+    background: transparent;
+    width: 140px;
+    margin: 5px 0 0px 71px;
+    float: left;
+  }
+  .div-logo img{
+    width: 100%;
+  }
+  .div-profile{
+    font-size: 45px;
+    float: right;
+    margin-right: 10px;
+  }
+  .content-top{
+    width: 344px;
+    background: #f3f2f2;
+    height: 20px;
+    margin: 0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+}
+  .content-container{
+    width: 100%;
+    margin:0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background: #ffffff;
+    height: 100%;
+    box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.6);
+    padding: 25px 20px 0 20px;
+    overflow: auto;
+  }
+  .title-content{
+    width: 360px;
+    margin: 0px auto;
+    overflow: auto;
+    padding: 0 !important;
+  }
+  .div-title{
+    width: 270px;
+  /* padding: 0!important; */
+  float: left;
+  margin: 2.5px 0 0 5px;
+}
+.title{
+  font-size: 25px;
+}
+.gallery-items{
+    width: 360px;
+    margin: 0 auto;
+}
+.gallery-item{
+    width: 118px;
+    height: 118px;
+    float: left;
+    overflow: hidden;
+    margin: 1px;
+    border: 1px solid #ccc;
+}
+.gallery-item img{
+    width: 100%;
+    height: 100%;
+}

src/app/pages/publications/gallery/gallery.page.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
 
 @Component({
   selector: 'app-gallery',
@@ -7,9 +8,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class GalleryPage implements OnInit {
 
-  constructor() { }
+  constructor(private modalController: ModalController,) { }
 
   ngOnInit() {
   }
+  cancel(){
+    this.modalController.dismiss();
+  }
+  save(){
+
+  }
 
 }